Costruire un sito web mobile con jQuery Mobile

jQuery mobile è un sistema di interfaccia utente basata su HTML5 touch-ottimizzato.È costruito sulla piattaforma di jQuery e jQuery UI, ed è l'ideale per un rapido sviluppo mobile.Il framework jQuery Mobile utilizza attributi speciali per aiutare a definire e lo stile gli elementi, senza dover scrivere classe le relative modalità di te stesso.

1. 1
   Accedere alla homepage di jQuery mobile, e quindi fare clic sulla scheda "download" dal menu di navigazione principale.

   Pubblicità

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
2. 2
   Scorrere nella pagina di download fino a vedere un copia-e-incolla Snippet per i file CDN-ospitati sezione .

   Copiare le righe di codice sul vostro clipboard.Questi tre file di riferimento sono tutto ciò che è necessario implementare il quadro.

   instagram viewer

   Pubblicità

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
3. 3
   Aprire il software di sviluppo preferito e creare un nuovo documento HTML.

   Se non si dispone di software di sviluppo, aprire l'applicazione Blocco note sul computer.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
4. 4
   Aggiungere i riferimenti al documento HTML .

   All'interno i tag testa , incollare i collegamenti ai file CDN-hosted.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
5. 5
   Crea la tua prima "pagina".

   Con il framework jQuery Mobile, è di creare più pagine all'interno dello stesso documento HTML.All'interno i tag body , creare un contenitore div.Aggiungere l'attributo dati-ruolo, e assegnare un valore di pagina .Infine, aggiungere l'attributo ID , e assegnarle un valore di casa .

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
6. 6
   Aggiungere il intestazione , contenuti e piè contenitori div .

   All'interno vostro contenitore div pagina, creare più di tre tag div.Utilizzando l'attributo dati-ruolo , assegnare rispettivamente valori di intestazione , contenuti e piè .Questa è la struttura di base di una pagina jQuery Mobile.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
7. 7
   Aggiungi intestazione e piè di pagina titoli .

   Utilizzando la h1 voce tag, creare voce titoli per l'intestazione e piè di pagina tag.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
8. 8
   Creare una seconda pagina .

   Al di fuori del contenitore div che ha il suo attributo dati-ruolo impostato alla pagina, creare un nuovo contenitore div.Aggiungere l'attributo dati-ruolo , e quindi impostarlo alla pagina.Aggiungere l'attributo ID , e quindi impostare a pagina 2. Infine, aggiungere i contenitori div per l'intestazione, il contenuto e piè di pagina, in modo che la struttura assomiglia alla home page.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
9. 9
   Crea una pagina del menu .

   La pagina del menu sta per essere creato nello stesso modo come le prime due pagine, ma senza un piè di pagina.Creare un contenitore div, e impostare il suo attributo data-ruolo di pagina.Aggiungere l'attributo ID , e dargli un valore main_nav.

   questo passo è stato utile?Sì |No |Ho bisogno di aiuto
10. 10
    Creare il navigazione struttura di menu.

    All'interno del contenitore div contenuti , creare una lista non ordinata.Aggiungere l'attributo dati-ruolo, e impostare il suo valore a ListView.Aggiungere l'attributo dati-inserto, e impostarne il valore su true.All'interno dei tag ul per la lista non ordinata, aggiungere due tag elenco-item( tag LI).

    questo passo è stato utile?Sì |No |Ho bisogno di aiuto
11. 11
    Creare il link del menu .

    all'interno del primo tag lista-voce, creare un tag di ancoraggio.Aggiungere l'attributo href al tag di ancoraggio.Utilizzare il simbolo hashtag di indirizzare un attributo ID , e quindi digitare "casa".Questo si rivolge il contenitore div "casa".Seguire la stessa procedura per il secondo elenco-item, ma questa volta di tipo hashtag "Pagina2" per indirizzare la seconda pagina.

    questo passo è stato utile?Sì |No |Ho bisogno di aiuto
12. 12
    Aggiungi link del menu ad altre pagine .

    Ora che è stato creato il vostro menu, è necessario impostare i tag di ancoraggio sulla vostra "casa" e le pagine "pagina 2" per accedervi.Scorrere verso l'alto e trovare la sezione intestazione della tua home page.Aggiungere un tag di ancoraggio all'interno del contenitore di testa, appena prima del tag H1 .Utilizzando lo stesso processo di collegamento come avete fatto con il menu, impostare l'attributo href a hashtag "main_nav".Aggiungere l'attributo dati-ruolo , e dargli un valore di tasto.Aggiungere i dati-icona di attributo , e dargli un valore bar.Infine, aggiungere l'attributo dati-iconpos, e dargli un valore notext.Questo crea un pulsante a sinistra del titolo di intestazione.Ripetere questo passaggio per la pagina page2.

    questo passo è stato utile?Sì |No |Ho bisogno di aiuto
    Pubblicità

• creare il numero di pagine all'interno dello stesso documento HTML come ti piace.jQuery Mobile utilizza un sistema di navigazione AJAX che prende automaticamente quando si creano più pagine all'interno dello stesso documento.
• aggiungere l'attributo data-transizione di ancore per una transizione placare visivamente tra le pagine.Le transizioni disponibili sono dissolvenza, pop, capovolgere, sua volta, il flusso, slidefade, scivolo, slideUp e slideDown.
• Utilizzare il dati-tema attributo per lo stile quasi ogni elemento del progetto.Per impostazione predefinita, jQuery Mobile è dotato di cinque campioni di colore per l'uso.Il sistema utilizza tematizzazione lettere come valori.Di conseguenza, l'attributo data-tema accetta valori di a, b, c, d ed e prima quando si scarica.Controlla la jQuery Mobile Themeroller per creare un tema personalizzato, con un massimo di 26 diversi campioni di colore!
• Utilizzare il posizioni dei dati attributo per creare intestazioni e piè di pagina "appiccicosi" o fissi per il tuo sito.Aggiungere questo attributo ad un div contenitore che ha la sua dati-ruolo set di intestazione o piè di pagina, e la posizione dei dati valore a fisso.
• Scopri il kit di jQuery Mobile colori per iniziare a sviluppare con 26 diversi campioni a tema.

• Assicurarsi di utilizzare i commenti HTML per separare le pagine jQuery Mobile.Ciò consente di risparmiare un sacco di tempo lungo la strada, come un singolo documento HTML con più "pagine" viene gonfio abbastanza rapidamente.

• jQuery Mobile Kit colori
• jQuery Mobile
• jQuery Mobile Themeroller
• In caso di problemi con uno di questi passaggi, chiedere ad undomanda per ulteriori informazioni, o per posta nella sezione commenti qui sotto.