Jquery mobil serimize devam ediyoruz.Bu derste form elemanlarından
select-optionu anlatacağım.Select,liste şeklindeki verilerden bir veya birden fazla veri seçmemize sağlayan bir özellik.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-18%20Select%20-%20Option.zip
1-Selects genel
Diğer derslerde öğrendiğimiz bunda da kullandığımız bazı özellikleri hızlıca anlatıp önemli özelliklere geçelim.Selectsi küçültmek için selects e
data-mini="true" verebiliriz.İcon yerini değiştirmek için
data-iconpos="left-right" değiştirebiliriz.Daha önce işlediğimiz controlgroup ile bir çok selecti grup halinde gösterebiliriz.Veri uzunluğuna göre selects olmasını istiyorsak
data-inline="true" vererek yapabiliriz.Bir verinin seçili olarak gelmesini istiyorsak o optiona
selected="selected" vermemiz gerek.Genel özellikleri bunlar.
2-Gruplama
Select içindeki optionları gruplayabiliriz.Bunun için optionları
<optgroup label="Group isimi">
</optgroup>
içine almamız gerek.İlk option başlıktır.Gruplara büyük başlık etmek istiyorsak grup dışında ilk optionu kullanabiliriz.
3-Popup
Selectsler genelde aşağıya doğru açılır.Ama jquery mobilde popup şeklinde özel bir tasarım yapılmış bunun için selecte
data-native-menu="false" vererek popup şeklinde açılmasını sağlayabiliriz.
4-Çoklu seçim
Selectlerde çoklu seçimlere izin verilir.Çoklu seçimi aktif etmek için selecte
multiple="multiple" vermemiz yeterli.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<select data-inline="true">
<option value="1">Alan-1</option>
<option value="5">Alan-2</option>
<option value="7">Alan-3</option>
</select>
<fieldset data-role="controlgroup" data-type="horizontal">
<select> <option value="1">Alan-1</option><option value="5">Alan-2</option><option value="7">Alan-3</option> </select>
<select> <option value="1">Alan-1</option><option value="5">Alan-2</option><option value="7">Alan-3</option> </select>
<select> <option value="1">Alan-1</option><option value="5">Alan-2</option><option value="7">Alan-3</option> </select>
</fieldset>
<select data-native-menu="false" data-iconpos="left">
<option data-placeholder="true">Başlık</option>
<option value="1" selected="selected">Alan-1</option>
<option value="5">Alan-2</option>
<option value="7">Alan-3</option>
</select>
<select multiple="multiple" data-native-menu="false" data-inline="true">
<option>Başlık</option>
<optgroup label="Group-1">
<option value="1" selected="selected">Alan-1</option>
<option value="5">Alan-2</option>
</optgroup>
<optgroup label="Group-2">
<option value="7" selected="selected">Alan-3</option>
<option value="7" selected="selected">Alan-4</option>
<option value="7">Alan-5</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
