Jquery Mobil Ders-3 Button
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-3 Button

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2022)
RAPOR ET
Jquery mobil derslerimize devam ediyoruz.Bu derste button özelliğini anlatacağım.a veya buttonlra buton özelliği atayarak buton yapabiliriz.Direk button tagını koyarsak buna parametre atamanda buton olabiliyor.

1-Buton yapma


2 şekilde buton yapabiliyoruz.

a-Parametre

data-role="button" parametresini atayarak objeye buton yapabiliriz.Örnek :
<a href="#" data-role="button">cArleone</a>


b-class

ui-btn classa atayarak objeyi buton yapabiliriz.Örnek :
<a href="#" class="ui-btn">cArleone</a>


2-İnline


İnline yaptığımız objede,buton metnin uzunluğu kadar olur.
a-parametre

data-inline="true" diye parametre atayarak objeyi inline yapabiliriz.Örnek :
<button data-inline="true">cArleone</button>

b-class

Objeyi inline yapmak için,objenin classına ui-btn-inline veririz.Örnek :
<a href="#" class="ui-btn ui-btn-inline">cArleone</a>


3-Mini


Butonu az ufaltmak istiyorsanız bu özelliği kullanabilirsiniz.
a-parametre

data-mini="true" diye parametre atayarak butonu ufaltabiliriz.Örnek :
<button data-mini="true">cArleone</button>

b-class

Objenin classına ui-mini veririz.Örnek :
<a href="#" class="ui-btn ui-mini">cArleone</a>


4-Gölge


a-parametre
Parametre olarak gölge vermek için objeye data-shadow="true" verirriz.Gölgeyi kapatmak için true yi false yapabiliriz.Örnek :
<a href="#" data-role="button" data-shadow="false">cArleone</a>

b-class

Butona gölge vermek için objenin classına ui-shadow veririz.Örnek :
<a href="#" class="ui-btn ui-shadow">cArleone</a>


5-Diğer Özellikler



a-Kenarları yumuşatma

Objenin clasına ui-corner-all vererek kenarları yumuşatabiliriz.Örnek :
<button class="ui-corner-all"></button>

b-Kilitleme

Butonu kilitleyip tıklanmaz hale getirmek için ,objenin classına ui-state-disabled verebiliriz.Örnek:
<a href="#" class="ui-btn ui-state-disabled">cArleone</a>


Geçen derste gördüğümüz iconları butonlara atayabiliz.Ayrıca hemen hemen tüm objelerin temalarını değiştirebiliriz.Tema özelliğini gelecek derslerde anlatacağım.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<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>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<style type="text/css">
.ana{width:960px;margin:auto;}
</style>
</head>
<body>

<div class="ana">
<a href="#" data-role="button">cArleone</a>
<a href="#" class="ui-btn">cArleone</a>
<button class="ui-corner-all">cArleone</button>
<a href="#" class="ui-btn ui-mini">cArleone</a>
<a href="#" class="ui-btn ui-state-disabled">cArleone</a>
<button data-inline="true">cArleone</button>
<a href="#" data-role="button" data-shadow="false">cArleone</a>

<button data-icon="delete" data-inline="true" data-shadow="false" data-mini="true">cArleone</button>

</div>

</body>
</html>


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

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



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