Jquery Mobil Ders-2 icons
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

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

Jquery Mobil Ders-2 icons

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(5512)
RAPOR ET
Jquey mobil derslerimize başlıyoruz.İlk olarak iconları anlatacağım.Çünkü ilerki bazı objelerde bunları kullanacağız.Öncelikle işlevinden bahsedelim.Buton,link,form elemanları vs gibi objelere icon vermemizi sağlar.Ben tüm iconları isimleriyle beraber bir resimde topladım.

İconları atamayı 2 şekilde yapıyoruz genelde.parametre ve class olarak.benim tercihim ve önerim parametre olarak atamak.Çok fazla karmaşıklığa sebeb olmaz.

http://ustaderslik.com/resim/ders/jquery-mobil-icons.png

1-İcon Atama


2 şekilde icon atayabiliyoruz.

a-parametre

data-icon=" İcon_ismi "

diye atayarak objeye icon verebiliriz.Örnek :
<button data-icon="plus">cArleone</button>


b-class

class="ui-btn ui-btn-icon-left ui-icon- icon_ismi "

diyerek atama yapabilirsiniz.ui-btn-icon-left biraz sonra anlatacam.class olarak atama yaparken bunu vermez iseniz gözükmez.Örnek :
<button class="ui-btn ui-btn-icon-left ui-icon-action">cArleone</button>


2-İcon Pozisyonu


İcon atacığımızda standart olarak soladır.Ama biz pozisyonunu değiştirebiliriz.
left:sol
right:sağ
top:yukarı
bottom:aşağı
olmak üzere 4 pozisyona objeyi koyabiliyoruz.Bunuda 2 şekilde atayabiliyoruz.

a-parametre

data-iconpos=" pozisyon "

bu şekilde parametre olarak atayabilirsiniz.Örnek :
<button data-icon="plus" data-iconpos="top">cArleone</button>


b-class

ui-btn-icon- pozisyon

diyerekte class olarak atayabilirsiniz.
<button class="ui-btn ui-btn-icon-right ui-icon-action">cArleone</button>


3-İcon Gölge


İcona gölgeyide diğerleri gibi 2 şekilde atayabiliyoruz.Gölge çok belli olmuyor.Yakından bakmak gerekir.

a-parametre

data-iconshadow="true"

diyerek parametre olarak atayabilirsiniz.Örnek :
<button data-icon="delete" data-iconshadow="true">cArleone</button>


b-class

ui-shadow

u classa vererek gölgeyi icona verebiliriz.Örnek :
<button class="ui-btn ui-shadow ui-btn-icon-bottom ui-icon-action ">cArleone</button>


4-Diğer Özellikler


Bir kaç özellik daha var.

a-Metin kaldırma
Objenin classına ui-btn-icon-notext vererek metini kaldırıp sadece iconun gözükmesini sağlayabilirsiniz.

b-Çemberi kaldırma
İconun etrefındaki gri çemberi ui-nodisc-icon atayarak classa,kaldırabiliriz.

c-Kenarları yuvarlama
İconları kenarlarını yuvarlayarak daire haline getirebiliriz iconu.Bunun için classa ui-corner-all atayarak yapabiliriz.

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" />
</head>
<body>

<button data-icon="plus" data-iconpos="top">cArleone</button>
<button data-icon="delete" data-iconshadow="true">cArleone</button>
<button class="ui-btn ui-btn-icon-right ui-icon-action ">cArleone</button>
<button class="ui-btn ui-shadow ui-btn-icon-bottom ui-icon-action ">cArleone</button>
<button class="ui-btn ui-btn-icon-bottom ui-icon-home ui-nodisc-icon">cArleone</button>
<button class="ui-btn ui-shadow ui-btn-icon-bottom ui-icon-gear ui-btn-icon-notext">cArleone</button>
<button class="ui-btn ui-shadow ui-btn-icon-bottom ui-icon-gear ui-btn-icon-notext ui-corner-all">cArleone</button>


</body>
</html>


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

İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-2%20İcons.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