Jquery Mobil Ders-10 ControlGroup
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-10 ControlGroup

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1691)
RAPOR ET
Jquery mobil derslerimize devam ediyoruz.Bu derste controlgroup işleyeceğiz.Controlgroup bazı elemanları gruplayıp güzel gözükmesini sağlıyor.Örnek butonlar,forum elemanları vs.Kullanımından başlayalım.

İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-10%20ControlGroup.zip

1-Gruplama


Bir div yaratıp ona data-role="controlgroup" verirsek onlar artık grup olur.Div içine gruplanması gereken objeleri atabilirsiniz.Örnek :
<div data-role="controlgroup">
<button>Buton-1</button>
<button>Buton-2</button>
<button>Buton-3</button>
</div>


2-Yatay


Controlgroup içine atığımız objeler alt alta gelir.Dive data-type="horizontal" vererek yan yana sıralanmalarını sağlayabiliriz.Örnek :
<div data-role="controlgroup" data-type="horizontal">
<button>Buton-1</button>
<button>Buton-2</button>
<button>Buton-3</button>
</div>


3-Mini


Controlgroupa data-mini="true" vererek içindeki tüm objeleri ufak gözükmesini sağlayabiliriz.

4-Tema


Controlgroupa data-theme="tema_ismi" vererek içindeki tüm objelerin temalarını değiştirebiliriz.

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>
<style type="text/css">
.ana{width:960px;margin:auto;}
.controlgroup-textinput{padding-top:.22em;padding-bottom:.22em;color:#666 !important;}
</style>
</head>
<body>

<div class="ana">

<div data-role="controlgroup" data-type="horizontal">
<button data-icon="home">Buton-1</button>
<button data-icon="info">Buton-2</button>
<button data-icon="clock">Buton-3</button>
<button data-icon="grid">Buton-4</button>
<button data-icon="star">Buton-5</button>
</div>

<div data-role="controlgroup" data-type="horizontal" data-theme="b">
<select> <option>Select-1</option> </select>
<select> <option>Select-2</option> </select>
<select> <option>Select-3</option> </select>
</div>

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="r" id="r1"><label for="r1">Radio-1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio-2</label>
<input type="radio" name="r" id="r3"><label for="r3">Radio-3</label>
</div>

<div data-role="controlgroup" data-type="horizontal" >
<input type="text" value="aranacak kelime..." data-wrapper-class="controlgroup-textinput ui-btn"/>
<select>
<option>css</option>
<option>html</option>
<option>javascript</option>
</select>
<button>Ara</button>
</div>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/8fg5h48efd5.png



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