Bir sayfa yarat
JQuery Mobile tüm mobil cihazlarda çalışır olsa da, masaüstü bilgisayarlarda bazı uyumluluk sorunları olabilir (due to limited CSS3 support) .
Bu eğitim için, daha iyi bir okuma deneyimi için Google Chrome tarayıcı kullanmanız önerilir.
Aşağıda, basit, standart jQuery Mobile sayfasını oluşturduk:
Örnek
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Kendin dene " Örnek açıklanmıştır:
- data-role="page" tarayıcıda görüntülenen sayfası
- data-role="header" sayfasının üst kısmında bir araç çubuğu oluşturur (genellikle başlık veya arama düğmeleri için kullanılan)
- data-role="main" metin, resim, düğmeler, formlar, vb gibi, sayfanın içeriğini tanımlar
- "ui-content" sınıf sayfa içeriğinin içinde ekstra dolgu ve marj ekler
- data-role="footer" sayfasının alt kısmındaki bir araç çubuğu oluşturur
- vb paragraflar, resimler, başlıklar, listeler, - bunlar konteynerlerin içinde, herhangi bir HTML öğelerini ekleyebilirsiniz
HTML5 data-* nitelikler bir oluşturmak için jQuery Mobile boyunca kullanılır "touch-friendly" mobil cihazlar için ve çekici bir görünüm.
jQuery Mobile Sayfaları Ekleme
jQuery Mobile olarak, tek bir HTML dosyasında birden sayfaları oluşturabilirsiniz.
Benzersiz kimliğe sahip her bir sayfayı ayırın ve kullanımı href aralarında bağlamak niteliğini:
Örnek
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Kendin dene " İpucu: Yükleme süresi içeriğin bir sürü web uygulamaları etkilenecektir (yani metin, bağlantılar, resimler, komut dosyaları vb.) Eğer dahili sayfaları bağlamak istemiyorsanız harici dosyalar kullanılır:
<a href="externalfile.html">Go To External Page</a>
Iletişim kutuları olarak kullanılması Sayfalar
Bir iletişim kutusu, özel bilgi veya istek girişi göstermek için kullanılan pencerenin türüdür.
Bir kullanıcı bir bağlantıyı dokunduğunda açılan bir iletişim kutusu oluşturmak için eklemek data-dialog="true" Eğer bir diyalog olarak görüntülenmesini istediğiniz sayfaya:
Örnek
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Kendin dene "