HTML5 ve CSS3 Programlama için Çok Sayfalı Bir Hareketli Belge Nasıl Oluşturulur - mankenler

Bu nedenle, bir HTML5 ve CSS3 web sayfasını aşağılayabiliyor olmak çok güzel bir mobil cihaza uyar, ancak tabii ki sayfa daha küçükse, onlardan daha fazlasına ihtiyacınız olacak. Mobil uygulamalar küçük bir ekran gayrimenkulünde daha fazla veri toplamak için genellikle bir sayfa çevirme metaforu kullanır ve jQuery mobil kitaplığı bunun kolay olması için harika bir araç daha sunar.

Şimdiye dek, bu uygulama şu ana kadar gördüğünüz diğer jQuery mobil uygulamalarına benziyor. Bir şey farklıdır ve başlıktaki düğme budur. Mobil uygulamaların üstbilgisinde gezinme düğmeleri olması çok yaygındır. İleri düğmesine basın.

Şık bir solukluk gecikmesinden sonra bir sonraki sayfa görüntülenir. Bu, üstbilgisinde iki düğme vardır. İleri'ye tekrar basılması, kullanıcıyı üçüncü sayfaya götürür.

Üçüncü sayfa bir kez daha çok tanıdık geliyor, ancak bu sefer başlık bölümünün solunda tek bir düğme ve ana içerik alanında başka bir düğme var.

Bu üç sayfanın ilginç yanı, üç sayfalık değil! Her şey üç farklı sayfa gibi davranacak şekilde tasarlanmış bir sayfadır. Bu düzenlemeye bir iki avantaj daha var.

• CSS ve JavaScript kaynaklarının yalnızca bir kez yüklenmesi gerekir: Bu, sistemi tutarlı tutar ve yükleme sürelerini hafifçe geliştirir.

• Hiç gecikme süresi yok: Belge yüklendiğinde, her seferinde yalnızca bir bölüm görünse bile, bellekteki herşey bellekteyse. Bu, sunucu erişimi için beklemek zorunda kalmadan sayfalar arasında hızlıca gezinmenizi sağlar.

Normalde bu tür bir mekanizma, birkaç küçük sayfa olarak ele almak istediğiniz büyük bir sayfanız olduğunda uygular; böylece kullanıcı kaydırma yapmaz.

İşte multiPage için kod. html tümüyle.

Çok sayfalı. html #foot {font-size:% 75; yazı tipi stili: italik; text-align: center;} ön {margin-left: auto; margin-right: otomatik; arka plan rengi: beyaz;

Sayfa Bir
sonraki
Bu,

Sayfa 1
Sayfa 2
Sayfa 3
HTML'den Tümünü Göster Bir İçecek İçin dizinidir.

Sayfa İki
sonraki
İkinci sayfa çok ilki gibidir, ancak ilk sayfa değildir ve düğmeler yerine metni içerir. İkinci sayfa. İlkini beğendiyseniz, geri dönebilirsiniz, ancak bir sonraki sayfaya gerçekten gitmelisiniz, çünkü gerçekten güzel olduğunu duyuyorum.
HTML'den Kuklalar İçin Hepsi Bir Arada Modeller prev

Sayfa Üç
3333333 3 3 3 33333 3 3 3333333

HTML'den İndex'e Git
Bu örnek için kod uzun olmakla birlikte, bir çok yeni zemini kırmaz.

JQuery mobil içeriğini yükleyin.

1. Gerekli CSS ve JavaScript dosyalarını jQuery'den çekin. com sitesi.

   Kendi CSS'nizi uygulayın.

2. CSS kodunu jQuery'den "ödünç" aldınız bile, yine de kendi kodunuzu ekleme izni verilir. Altbilgi ve ön elemanları istediğiniz şekilde hareket ettirebilmek için CSS ekleyebilirsiniz.

   Sayfalarınızı oluşturun.

3. İstediğiniz kadar sayfa oluşturabilirsiniz, ancak hepsi aynı genel jQuery mobil modelini takip eder: Başlık, içerik ve altbilgi div'si olan bir sayfa div oluşturun. Her div'nin rolünü belirtmek için data-role özniteliğini kullanın.

   Her bir sayfa düzeyi div'sini id özniteliği ile adlandırın.

4. Kullanıcı sayfalar arasında dolaşırken, her sayfanın bir çeşit tanımlayıcıya ihtiyacı vardır. Her sayfaya benzersiz bir kimlik özelliği verin.

   Başlıkların içinde düğmeler oluşturun.

5. Bu örneğin gerçekten yeni kısmı (sayfanın yanı sıra kendisini çevirme) başlıkların içindeki düğmelerdir. Sayfa 2 üstbilgisine geçerseniz, gerçekten ilginç bir şey göreceksiniz:

   prev

   Sayfa İki
   
   
   sonraki
   Bir öğenin içinde, veri rolü başlığına sahip bir bağlantı tanımlarsanız, bu bağlantı otomatik olarak bir düğme haline gelecektir. Üstelik, tanımlanan ilk bağlantı, başlığın soluna otomatik olarak yerleştirilir ve ikincisi sağa yerleştirilir.
   

   Sağdaki tek bir düğmeyi zorla.

6. Bir düğmenin sağ tarafta olmasını istiyorsanız, düğmeye bir sınıf ekleyin:

   Sayfa Bir

   
   
   sonraki
   Sayfa arasında atlamak için dahili bağlantıları kullanın.
   

7. Tüm düğmelerdeki URL'lere bir göz atın. Belgede dahili bir bağlantı olduğunu belirten bir karma ile başlarlar. Unutmayın, ancak bu kullanıcıya üç farklı sayfa gibi geliyor, aslında hepsi bir büyük web sayfası.

   Geçişlerle deneme.

8. Üçüncü sayfada dikkatli olun:

   Dizine git

   Bu düğmenin özel bir veri geçiş özniteliği vardır. Varsayılan olarak, mobil sayfalar soldurma ile değiş tokuş yapar. Geçişi, slideup, slidedown, pop, solmaya veya çevirmeye ayarlayabilirsiniz. Ayrıca, başka bir nitelik ekleyerek geçişi tersine çevirebilirsiniz: data-direction = "reverse".