Jquery mobil derslerimize devam ediyoruz.Bu derste
theme yani temaları anlatacağım.Normal 1.4.2 de standart olarak a ve b olmak üzere 2 tema var.Ama eski sürümlerinde 5 taneydi.O yüzden ek bir dosya daha ekleyerek bu 5 temayı kullanacağız.
Temalar nerdeyse tüm objelere atanabiliyor.Objelere tema atamak için :
data-theme="tema_ismi"
şeklinde atanır.5 temamız var bunlar:
a,b,c,d,e
<button data-inline="true" data-theme="b">cArleone</button>
Bu şekilde parametre olarak temalarımızı atıyoruz.Collapsible menülerde alt nesnelere toplu atama yapabiliyoruz.Collapsibleyi sonra anlatacağım.Örnek :
data-content-theme="tema_ismi"
şeklinde menünüyü kapsayan objeye verdiğimizde liste olarak sıralanan tüm objelere topluca tema vermiş oluruz.
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" />
<link rel="stylesheet" href="css/theme-classic.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;}
</style>
</head>
<body>
<div class="ana">
<button data-inline="true" data-theme="a">Tema a</button>
<button data-inline="true" data-theme="b">Tema b</button>
<button data-inline="true" data-theme="c">Tema c</button>
<button data-inline="true" data-theme="d">Tema d</button>
<button data-inline="true" data-theme="e">Tema e</button>
<div class="ana" data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="e">
<h1>cArleone</h1>
<ul data-role="listview">
<li>Alan-1</li>
<li>Alan-2</li>
<li>Alan-3</li>
</ul>
</div>
</div>
</body>
</html>
Görüntüsü :
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-4%20Temalar.zip
UstaDerslik
