Jquery Mobil Ders-18 Select - Option
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Mobil Ders-18 Select - Option

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2193)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/a74d4fe4.png




ahmetedip
ahmetedip 3 Yıl Önce Cevaplandı
yaptığınız anlatımlar çok güzel emeğinize sağlık rica etsem bu eğitim bittikten sonra psd-css aktarma ile ilgili bir eğitimde yapabilir misiniz?
cArleone
cArleone 3 Yıl Önce Cevaplandı
Sağol.Psd-css aktarımıyla ilgili nette kaynak çok ama bende anlatabilirim bir ara.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol