Construct mobilní webové stránky s jQuery Mobile

jQuery Mobile je optimalizované pro dotykové, HTML5 systém založený na uživatelské rozhraní.Je postaven na platformě jQuery a jQuery UI, a je ideální pro rychlý vývoj mobilních.Rámec jQuery Mobile využívá speciální atributy, které pomáhají definovat a styl své prvky, aniž by bylo nutné psát podrobný Pravidlům třídy sami.

1. 1
   Přejděte k jQuery Mobile domovskéa poté klikněte na záložku "Download" z hlavního menu navigace.

   Reklama

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
2. 2
   Přejdete-li dolů na stránce stahování až uvidíte Copy-and-Paste úryvek CDN-hostované soubory sekce .

   Zkopírujte řádky kódu do vaší schránky.Tyto tři referenční soubory jsou vše, co potřebujete pro provádění rámce.

   instagram viewer

   Reklama

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
3. 3
   otevřít svůj preferovaný vývoj software a vytvořit nový HTML dokument .

   Pokud nemáte vývoj software, otevřete aplikaci Poznámkový blok v počítači.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
4. 4
   Přidat odkazy do vašeho HTML dokumentu .

   uvnitř hlavy značek, vložte CDN-hostované odkazy souborů.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
5. 5
   Vytvořte si svůj první "strana" .

   S rámce jQuery Mobile, můžete vytvořit více stránek v rámci stejného dokumentu HTML.Uvnitř tělo značek, vytvořit kontejner div.Přidejte atribut dat role, a přiřadit mu hodnotu strana .Nakonec přidejte atribut ID a přiřaďte jí hodnotu domácí .

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
6. 6
   Přidejte záhlaví , obsahu a zápatí div kontejnery .

   Uvnitř své stránky div kontejneru, vytvořte další tři tagy div.Použití dat role atribut , přiřadit hodnoty záhlaví , obsahu a zápatí resp.To je základní struktura stránky jQuery Mobile.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
7. 7
   Přidat záhlaví a zápatí tituly .

   Použití h1 okruhu tag, vytvořit okruh tituly pro vaše záhlaví a zápatí tagy.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
8. 8
   Vytvoření druhé stránky .

   Mimo kontejneru div, která má své dat role atribut nastaven na stránku, vytvořit nový div kontejneru.Přidejte dat role atribut , a nastavte ji na stranu.Přidejte atribut ID , a pak ji nastavit na straně 2. Nakonec přidejte div kontejnery pro záhlaví, obsah a zápatí, takže struktura se podobá domovskou stránku.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
9. 9
   vytvořit nabídku stránky .

   Stránka menu se bude vytvořena stejným způsobem jako v prvních dvou stranách, ale bez zápatí.Vytvořit kontejner div a nastavte jeho údajů role atribut na stranu.Přidejte atribut ID , a dát mu hodnotu main_nav.

   Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
10. 10
    Vytvoření navigační struktury menu .

    Uvnitř obsah div kontejneru , vytvoření seznamu.Přidejte atribut dat role, a nastavit jeho hodnotu na seznam.Přidejte atribut dat vsazení , a nastavit jeho hodnotu na true.Uvnitř ul tagy pro výčtu, přidejte dvě list-item tagy( Li tagy).

    Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
11. 11
    Vytvoření nabídce odkazy .

    Uvnitř prvních list-item značek, vytvořte kotevní tag.Přidejte atribut HREF do značky ukotvení.Použijte křížek zaměřit atribut ID , a pak napsat "domov".To se zaměřuje na "domácí" div kontejneru.Postupujte podle tohoto stejný postup pro druhý list-item, ale tentokrát typ hashtag "strana2" zaměřit se na druhou stranu.

    Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
12. 12
    Doplnit odkazy v menu na jiné stránky .

    Nyní, když je vytvořena vaše menu, je třeba nastavit tagy na "domácí" a "strana 2" stran se k nim dostat.Rolovat nahoru a najít sekce záhlaví své domovské stránky.-Li přidat kotevní tag uvnitř kontejneru záhlaví, těsně před značkou h1 .S použitím stejného procesu propojování jak jste se v menu, nastavit atribut href do hashtag "main_nav".Přidejte dat role atribut , a dát mu hodnotu tlačítka.Přidejte dat ikonu atribut , a dát mu hodnotu barů.Nakonec přidejte atribut dat iconpos , a dát mu hodnotu notext.Tím se vytvoří tlačítko na levé straně vašeho titulu záhlaví.tento krok pro stránku STR.2 opakovat.

    Byl tento krok užitečné?Ano |Ne |Potřebuji pomoc
    Reklama

• vytvořit tolik stránek v rámci stejného dokumentu HTML, jak se vám líbí.jQuery Mobile používá navigační systém, AJAX, který automaticky kopy při vytváření více stránek v rámci stejného dokumentu.
• Přidejte dat přechodu atribut na kotvy pro zrakově nekonfliktní přechod mezi stránkami.K dispozici jsou přechody jsou vyblednutí, pop, flip, zatáčka, průtok, slidefade, skluzavka, slideup a slidedown.
• Pomocí dat téma atribut styl téměř každý prvek v projektu.Ve výchozím nastavení, jQuery Mobile přichází s pěti barevných vzorníků pro vás k použití.Motivů Systém používá písmena jako hodnoty.V důsledku toho dat téma atribut přijímá hodnoty a, b, c, d a e, když jste poprvé si jej stáhnout.Podívejte se na jQuery Mobile Themeroller vytvořit vlastní motiv, s až 26 různých barevných vzorníků!
• Pomocí dat pozice atribut vytvořit "lepkavé" nebo pevné záhlaví a zápatí pro vaše webové stránky.Přidat tento atribut do kontejneru div, která má své dat role sadu do záhlaví nebo zápatí, a dat o poloze hodnotu pevné.
• Podívejte se na Kit jQuery Mobile Color začít rozvíjet s 26 různých tématických vzorníků.

• Nezapomeňte použít komentáře HTML k oddělení stránek jQuery Mobile.To vám ušetří spoustu času dolů na silnici, jako jediný HTML dokumentu s více "stránek" dostane nezvětší docela rychle.

• jQuery Mobile Color Kit
• jQuery Mobile
• jQuery Mobile Themeroller
• Máte-li problémy s některou z těchto kroků, požádejteotázkou pro další pomoc, nebo poštou v sekci komentáře níže.