Geri Dön
Anasayfa
Jquery Mobil Ders-18 Select - Option
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
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.
Select içindeki optionları gruplayabiliriz.Bunun için optionları
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.
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.
Selectlerde çoklu seçimlere izin verilir.Çoklu seçimi aktif etmek için selecte multiple="multiple" vermemiz yeterli.
Genel örnek :
Görüntüsü :
İ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ü :