Jquery Mobile Sayfalar
Merhaba arkadaşlar bu dersimizde Jquery mobil’e sayfalarla giriş yapacağız.
jQuery Mobile ı sorunsuz kullanmamız ve mobil site özelliklerinin tamamından faydalanmak için HTML5 “doctype” ile başlamamız gerekiyor.
<!DOCTYPE html>
Jquery mobile kütüphanelerini CDN’den kullanabiliriz fakat en iyi sonuç için yerelinizde kalmalı.Örnek bir sayfa
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
Yukarıda bahsettiğimiz CDN kullanımı
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page">
Burdan sayfamızı açıyoruz.
<div data-role="header">
Bu bizim headerımız.Başlığımız buraya yazıyoruz.
<div data-role="content">
İçeriklerimizi buraya yazıyoruz.Binevi <body> görevi görüyor.
<div data-role="footer">
Burasıda en alt kısmımız. Hepsini toparlarsak şöyle bir şey çıkıyor: 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></pre>
<div data-role="page">
<div data-role="header">
<h1>Deneme Sayfa</h1>
</div>
<div data-role="content">Burada içeriklerimiz olacak.</div>
<div data-role="footer">
<h4>utkugurler.com</h4>
</div>
</div>
<pre>
Çoklu Sayfa
Mobil sayfamızda aynı sayfa üzerinde bir fazla sayfa çağırmak isteyebiliriz.jQuery Mobile’da bunu <div> etiketine atayacağımız değerle halledebiliriz.En iyisi bir örnekle açıklayalım:
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page" id="sayfa1"> <div data-role="header"> <h1>Jquery Mobile Örnek Sayfa</h1> </div> <div data-role="content"> <p>jQuery Mobile kullanarak mobil uygulamalar geliştirebiliriz.</p> <p>Daha detaylı bilgi almak için <a href="#sayfa2">buraya </a>tıklayabilirsiniz.</p> </div> <div data-role="footer"> <h4>utkugurler.com</h4> </div> </div> <div data-role="page" id="sayfa2"> <div data-role="header"> <h1>jQuery Mobile 2.Sayfa</h1> </div> <div data-role="content"> <p>utkugurler.com </p> <p><a href="#sayfa1">İlk Sayfaya Dön</a></p> </div> <div data-role="footer"> <h4>utkugurler.com</h4> </div> </div> </body> </html>
Temalar
- Siyah -> a
- Mavi -> b
- Gri -> c
- Gri ve Beyaz -> d
- Sarı -> e
Bu temaları uygulamamız için tag’lerimize data-theme=”a” veriyoruz örneğin.
Yorumlar
Burası çok boş... yorum bırakabilirsin!