Casa / Lezioni di Windows / Imparare a lavorare con i modelli jQuery. Lavorare con i modelli jQuery Layout dei dati digitali in jquery

Imparare a lavorare con i modelli jQuery. Lavorare con i modelli jQuery Layout dei dati digitali in jquery

09.03.2024 Lezioni di Windows

Iniziamo Iniziamo. L'esempio seguente mostra un elenco di film forniti in un array (il codice completo per l'esempio è nel file BasicSample1.htm):

Esempio semplice (1) $(titolo)

Direttore: $(direttore)
Cast: $(attori)
Anno: $(anno)

$(funzione () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Esempio semplice (1)
E questo è ciò che vedrai nel browser:

Diamo un'occhiata a questo esempio in dettaglio.

Quindi la prima cosa che faccio è connettermi Libreria principale jQuery E Modelli jQuery:


È stato detto molte volte prima Modelli jQuery sarà incluso in Libreria principale jQuery- ma in jQuery 1.5 RC1, rilasciato il 24 gennaio, mancano ancora i template.

Quindi carico l'elenco dei film:


Naturalmente, puoi preparare i dati di origine in qualsiasi modo conveniente per te: riceverli utilizzando una richiesta AJAX, crearli in base all'input dell'utente, ecc., Sto utilizzando uno script statico solo ad esempio.

All'interno del fascicolo DataItems.js come segue:

Var dataItems = [ (titolo: "Bandits", miniatura: "Bandits.jpg", regista: "Barry Levinson", attori: ["Bruce Willis", "Billy Bob Thornton", "Cate Blanchett"], anno: 2001, budget: 95000000, entrate lorde: 67631903, valutazione: 0, fotogrammi: ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits- 5.jpg"] ), ...
Il passaggio successivo è creare un modello:

$(titolo)

Direttore: $(direttore)
Cast: $(attori)
Anno: $(anno)


Tieni presente che il modello è inserito nel tag SCRITTURA e come tipo MIME specifico testo/x-jquery-tmpl. Quando incontra un tipo MIME sconosciuto durante l'analisi di un documento, il browser non tenta di interpretare il contenuto del tag SCRITTURA, che è ciò di cui ho bisogno.

In generale, il modello può essere inserito in qualsiasi tag, ad esempio nel tag DIV:

$(titolo)

Direttore: $(direttore)
Cast: $(attori)
Anno: $(anno)


Tuttavia, in questo caso, gli effetti collaterali non possono essere evitati, perché il browser proverà sicuramente a interpretare il codice del modello.

Ad esempio, l'esempio sopra tenterà di caricare un'immagine inesistente:

Ma nel caso di una tabella tutto può essere molto più interessante (molte grazie a TEHEK per questo esempio!):

((ogni elemento di dati)) ((/ogni))
$(titolo) $(direttore) $(anno)

Internet Explorer e Opera elaboreranno questo codice correttamente:

Ma Chrome e Fire Fox “spingeranno” il codice extra fuori dalla tabella, risultando in una tabella vuota... Buon debug! ;-)

Per etichetta SELEZIONARE si osserverà un'immagine simile.

Infine, istanziamo il template con la seguente chiamata:

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
Ho illustrato cosa succede nello schema seguente:

  • Metodo .tmpl() ottiene il testo del modello, ad es. testo interiore elemento ottenuto chiamando $("#filmTmpl").
  • Il testo del modello viene compilato e su di esso viene creata una funzione JavaScript.
  • Viene creata una "istanza di modello": un oggetto che contiene un riferimento a un elemento di dati (field dati) passato come argomento del metodo .tmpl(). Metodo .tmpl() puoi passare un array, un oggetto, nullo o chiamarlo senza argomenti. Se passi un array, per ogni elemento dell'array verrà creata la propria istanza del modello, facendo riferimento a questo elemento; in tutti gli altri casi, verrà creata solo un'istanza.
  • La funzione del modello compilato viene chiamata e passata a un oggetto di istanza. La funzione restituisce il testo modello in cui sono state effettuate tutte le sostituzioni.
  • Il testo ottenuto nel passaggio precedente viene convertito in una raccolta di elementi HTML. I riferimenti a questi elementi vengono memorizzati anche nell'oggetto istanza (field nodi), che consente di aggiornare facilmente l'“output” del modello in futuro quando cambiano i dati di origine (vedere la sezione “Aggiornamento dinamico”).
  • E infine il metodo .tmpl() ritorna jQuery-una raccolta di elementi HTML che vengono aggiunti al documento utilizzando la chiamata appendTo("#movieListBag").
    • Espressioni Per sostituire i valori nel modello, utilizzare il tag ${...} . All'interno di questo tag è possibile specificare il nome della proprietà dell'oggetto passato al metodo .tmpl(), nonché qualsiasi espressione JavaScript valida, inclusa una chiamata di funzione.

    Utilizzando le proprietà di un oggetto (elemento array):

    $(titolo)
    Utilizzo delle espressioni JavaScript:

    Budget: $$((budget / 1000000).toFixed(0)) milioni.
    Lordo: $$((Ricavi lordi / 1000000).toFisso(1)) milioni.

    Campi e metodi dell'istanza del modello All'interno delle espressioni, è possibile accedere all'istanza del modello corrente tramite una variabile $articolo e per accedere all'elemento dati corrente: una variabile $dati.

    Ogni istanza del modello contiene i seguenti campi:

  • dati- contiene un collegamento a un elemento di dati associato a un'istanza del modello;
  • tmpl- contiene un collegamento al modello compilato utilizzato per il rendering;
  • genitore- se il modello è stato richiamato da un altro modello utilizzando un tag ((tmpl)), contiene un collegamento all'istanza “genitore” del modello;
  • nodi- dopo il rendering, contiene collegamenti a elementi HTML generati come risultato dell'applicazione del modello.
    • Inoltre il metodo .tmpl() accetta due argomenti: dati E opzioni. Con una discussione dati che hai già incontrato, attraverso di esso viene trasmesso un collegamento a un dato. E usando l'argomento opzioni, puoi passare un riferimento a un oggetto, tutti i cui campi e metodi verranno trasferiti a ciascuna istanza del modello creato nel metodo .tmpl().

    Di seguito è riportato un esempio di utilizzo di questo parametro:

    $(titolo)

    Direttore: $(direttore)
    Cast: $(attori)
    Anno: $(anno)
    Budget: $$($item.formatBudget(budget)) milioni.
    Lordo: $$($item.formatGrossRevenue(grossRevenue)) milioni.


    $(funzione () ( $("#movieTmpl") .tmpl(dataItems, ( formatBudget: funzione (valore) ( ​​return (valore / 1000000).toFixed(0); ), formatGrossRevenue: funzione (valore) ( ​​return (valore / 1000000).toFixed(1); ) )).appendTo("#movieListBag"); ));
    In questo esempio utilizzo le chiamate di funzione per formattare i valori del budget e delle commissioni, ma per evitare di ingombrare lo spazio dei nomi globale, le ho passate tramite un parametro opzioni, dopodiché queste funzioni sono diventate disponibili come metodi dell'istanza del modello corrente.

    Infine, l'istanza del modello contiene metodi aggiornamento() E html(), il cui utilizzo mostrerò di seguito.

    Che aspetto ha il modello compilato? Puoi vedere come appare il modello compilato usando il metodo .modello(), che compila semplicemente modelli. Questo metodo restituisce un oggetto funzione il cui contenuto è facile da visualizzare:

    $("#compiledTemplateBag").text("" + $("#movieTmpl").template());
    Il modello utilizzato nell'esempio sopra appare così una volta compilato (testo formattato per una migliore leggibilità):

    Funzione anonima(jQuery, $item) ( var $ = jQuery, call, _ = , $data = $item.data; with ($data) ( _.push(" "); if (typeof (titolo) !== "undefinito" && (titolo) != null) ( _.push($.encode((typeof (titolo) === "funzione" ? (titolo).call( $oggetto) : (titolo)))); ) _.push("

    Direttore: "); if (typeof (direttore) !== "undefinito" && (direttore) != null) ( _.push($.encode((typeof (direttore) === "funzione" ? (direttore). call($elemento) : (direttore)))); ) _.push("
    Cast: "); if (typeof (attori) !== "non definito" && (attori) != null) ( _.push($.encode((typeof (attori) === "funzione" ? (attori) . call($oggetto) : (attori)))); ) _.push("
    Anno: "); if (typeof (anno) !== "non definito" && (anno) != null) ( _.push($.encode((typeof (anno) === "funzione" ? (anno). call($articolo) : (anno)))); ) _.push("

    "); ) ritorno _; )
    Penso che ora dovresti capire come vengono elaborate le espressioni specificate nel tag ${...} - e questa comprensione può aiutarti in modo significativo durante il debug! Il fatto è che Modelli jQuery esegue una trasformazione relativamente semplice del testo del modello, quindi se commetti un errore nell'espressione, il messaggio di errore si riferirà al testo della funzione risultante e spesso può creare estremamente confusione.

    Sfortunatamente, se il modello viene compilato con un errore, senza trucchi speciali non sarai in grado di vedere il testo della funzione con l'errore, perché il metodo corrispondente è dichiarato privato.

    Beh, immagino che sia tutto per la storia del lavoro. Modelli jQuery vale la pena completarlo e passare alla sua applicazione pratica.

    Seconda parte, Condizioni pratiche Per applicare parti del modello a seconda di determinate condizioni, in Modelli jQuery vengono utilizzati i tag ((se))...((altro))...((/se)).

    L'esempio seguente mostra l'uso di questi tag (il codice di esempio completo si trova nel file IfElseTag.htm):

    Supporto: ((se $item.data.media == "dvd")) ((altro $item.data.media == "blu-ray")) ((altro)) ((/Se))


    Come puoi immaginare, questo codice ha lo scopo di visualizzare l'icona del supporto su cui si trova il film. Ecco come appare nel browser:

    Come condizione nei tag ((Se)) E ((altro))È possibile utilizzare qualsiasi espressione JavaScript valida.

    Elaborazione delle raccolte Per elaborare le raccolte nei modelli, utilizzare il tag ((ciascuno))...((/ciascuno)). L'esempio seguente mostra l'uso del tag ((ogni)) per visualizzare un elenco di attori (il codice di esempio completo è nel file CiascunTag1.htm):

    Cast: ((ogni attore)) $($valore) ((se $indice< $data.actors.length - 1}} , {{/if}} {{/each}}

    Come argomento da taggare ((ogni)) puoi passare un array, un oggetto o jQuery-collezione. Etichetta interna ((ogni)) utilizza la chiamata jQuery.each() quindi qualunque cosa dica la documentazione sul comportamento jQuery.each() vale anche per il tag ((ogni)). L'esempio seguente dimostra l'uso del tag ((ogni)) per mostrare tutte le proprietà di un oggetto (il codice di esempio completo è nel file CiascunTag2.htm):

    ((ciascuno $dati)) $($indice) $($valore) ((/ciascuno))
    All'interno di un cartellino ((ogni)) sono disponibili due variabili: $valore, che contiene un riferimento all'elemento dell'array corrente e $indice, che contiene l'indice dell'elemento dell'array corrente o il nome della proprietà.

    Ovviamente all'interno del tag ((ogni)) puoi utilizzare altri tag e inoltre avrai comunque accesso alle variabili $articolo E $dati. Nell'esempio fornito, le variabili $indice E $dati insieme all'etichetta ((Se)) vengono utilizzati per emettere una virgola tra i nomi degli attori, sfortunatamente una variabile $ultimo non è previsto, anche se sarebbe molto utile!

    Infine, se mai ne avessi bisogno, puoi modificare i nomi delle variabili predefinite. Nell'esempio seguente questi nomi vengono modificati in mioIndice E myValue(il codice di esempio completo è nel file CiascunTag3.htm):

    Cast: ((each(myIndex, myValue) attori)) $(myValue) ((se myIndex< $data.actors.length - 1}} , {{/if}} {{/each}}
    A proposito, provando a cambiare il nome solo per una variabile $indice non porterà a nulla di buono: non ci saranno errori, ma non sarai nemmeno in grado di accedere al valore corrente!

    Modelli nidificati I modelli possono essere molto grandi e quindi ha senso dividerli in più parti più piccole o includere parti ripetute che è logico separare in un modello separato. IN Modelli jQuery questo viene fatto utilizzando modelli nidificati, che vengono chiamati utilizzando il tag ((tmpl)).

    L'esempio seguente illustra come spostare parte del codice del modello in un altro modello (il codice di esempio completo si trova nel file NestedTemplates1.htm):

    ...

    Direttore: $(direttore)
    Cast: ((tmpl "#actorsTmpl"))
    Anno: $(anno)

    ... ((ogni attore)) $($valore) ((se $indice< $data.actors.length - 1}} , {{/if}} {{/each}}
    Nell'etichetta ((tmpl)) deve essere indicato jQuery-selettore del template da richiamare oppure il nome del template precedentemente salvato nella cache. Perché in questo esempio di altri argomenti per il tag ((tmpl)) no, il modello nidificato riceverà lo stesso elemento dati del genitore, ma avrà la propria istanza del modello e il campo genitore farà riferimento all'istanza genitore del modello.

    L'esempio seguente dimostra il passaggio di un nuovo elemento dati in un modello nidificato e l'utilizzo di un riferimento all'istanza padre del modello. Come nel caso dell'utilizzo del metodo .tmpl(), se specifichi un array quando chiami un modello nidificato, il modello verrà applicato a ciascun elemento dell'array (il codice di esempio completo è nel file NestedTemplates2.htm):

    ...

    Direttore: $(direttore)
    Cast: ((tmpl(actors) "#actors_template"))
    Anno: $(anno)

    ... $($dati) ((se $dati!== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/if))
    Infine, l'ultimo esempio in questa sezione mostra come passare un argomento a un modello nidificato opzioni, e allo stesso tempo dimostra come argomento opzioni può essere utilizzato per determinare l'ultimo elemento nell'array elaborato (il codice di esempio completo è nel file NestedTemplates3.htm):

    ...

    Direttore: $(direttore)
    Cast: ((tmpl(attori, ( ultimo: attori )) "#actors_template"))
    Anno: $(anno)

    ... $($dati) ((if $dati !== $oggetto.ultimo)) , ((/if))

    Trasformazione Un'altra opportunità interessante Modelli jQueryè associato alla trasformazione del markup HTML, per il quale viene utilizzato il tag ((avvolgere))(in generale, avvolgere è “avvolgere”, ma mi sembra che il termine “trasformazione” rifletta meglio l'essenza di ciò che sta accadendo).

    Un classico esempio di utilizzo di un tag ((avvolgere))- questa è la creazione dei segnalibri:

    Questo è quello che appare all'interno (il codice di esempio completo è nel file Trasformazione1.htm):

    ((wrap(null, ( viewState: $item.viewState )) "#tabsTmpl")) Inglese La ballata di Oriente e Occidente Rudyard Kipling

    OH, l'Est è l'Est e l'Ovest è l'Ovest...

    ((/avvolgere))
    I dati iniziali per la trasformazione vengono inseriti nel modello schedaContenuto- è questo modello che istanziarò ulteriormente.

    Il markup HTML che trasformerò verrà inserito nel tag ((avvolgere)). Per etichetta ((avvolgere)) viene utilizzata la stessa identica notazione di invocazione utilizzata per il tag {}}
    Nel browser, questo esempio sarebbe simile al seguente:

    Modelli di memorizzazione nella cache in ogni chiamata $("#...").tmpl(...) viene compilato il modello che, nonostante la velocità notevolmente aumentata di JavaScript nei browser moderni, può avere un impatto estremamente negativo sulle prestazioni. Sviluppatori Modelli jQuery non potevo ignorare questo fatto ovvio, quindi Modelli jQueryè previsto un meccanismo per la precompilazione e la memorizzazione nella cache dei modelli.

    Il modello viene compilato e memorizzato nella cache come segue:

    $("#movieTmpl").template("movieTmpl");
    Il modello compilato viene salvato nella cache interna Modelli jQuery sotto il nome filmTmpl. Per accedere a un modello memorizzato nella cache, utilizzare il metodo jQuery.tmpl() e il primo parametro è il nome del modello memorizzato nella cache:

    $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
    L'esempio seguente consente di navigare in un elenco di film, utilizzando un modello memorizzato nella cache per visualizzare le informazioni sul film.

    Il codice del template non è praticamente diverso da quelli che usavo prima, l'unica differenza è che sotto la descrizione del film ci sono collegamenti aggiuntivi per la navigazione (il codice di esempio completo è nel file CachedTemplates.htm):

    $(titolo)

    Direttore: $(direttore)
    Cast: $(attori)
    Anno: $(anno)

    ((se $item.canMoveBack)) [Indietro]((/if)) ((if $item.canMoveFwd)) [Avanti]((/Se))
    Anche lo script di accompagnamento è semplice:

    Var indicefilm = 0; $(funzione () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", funzione () ( movieIndex += parseInt($(this).attr("x-inc")); updateMovie(); )); )); funzione updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack: movieIndex > 0, canMoveFwd: movieIndex< dataItems.length - 1 })); }
    Il gestore dei clic sul collegamento di navigazione modifica l'indice del film selezionato e quindi chiama la funzione aggiornamentofilmato(), che prima cancella il contenitore della descrizione del film e poi lo riempie con nuovi dati.

    Ecco come appare questo esempio nel browser:


    Il browser, ovviamente, scaricherà il file corrispondente, ma non sarai comunque in grado di accedervi.

    Ma il modello può ancora essere inserito in un file separato e ciò richiederà letteralmente una riga di codice aggiuntiva (il codice di esempio completo è nel file):

    $(funzione () ( $.get("Templates/DynamicLoading.htm", (), funzione (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
    Perché in questo caso riceviamo il template sotto forma di testo, il metodo serve per istanziarlo jQuery.tmpl(), il cui primo argomento è il testo del modello ricevuto.

    Sì, metodo jQuery.tmpl() viene utilizzato per istanziare sia i modelli memorizzati nella cache in base al nome sia i modelli specificati come testo (tradizione!...) - tuttavia, è abbastanza "intelligente" da distinguerli l'uno dall'altro.

    Se è necessario caricare più modelli correlati, è possibile utilizzare la libreria WaitSync(vedi “Sincronizzazione delle chiamate asincrone. WaitSync”) o scrivi il tuo sincronizzatore (il codice di esempio completo è nel file):

    $(funzione () ( var ws = new WaitSync(funzione () ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( cache: false, url: " Templates/MovieTmpl.htm", successo: ws.wrap("MovieTmpl", funzione (templateBody) ( $.template("movieTmpl", templateBody); )), errore: ws.wrap("MovieTmpl", funzione () ( alert("Errore durante il caricamento di MovieTmpl.htm!"); )) )); $.ajax(( cache: false, url: "Templates/ActorsTmpl.htm", success: ws.wrap("ActorsTmpl", funzione (templateBody) ( $.template("actorsTmpl", templateBody); )), errore: ws.wrap("ActorsTmpl", funzione () ( alert("Errore durante il caricamento di ActorsTmpl.htm!"); )) )); ));
    Tieni presente che in questo caso il template attoriTmpl chiamato per nome (file Modelli\MovieTmpl.htm):

    Direttore: $(direttore)
    Cast: ((tmpl(attori, ( last: attori )) "actorsTmpl"))
    Anno: $(anno)

    Aggiornamento dinamico Nell'ultima sezione della parte pratica, mostrerò altri due scenari di lavoro Modelli jQuery- modifica dei dati associati e sostituzione del template associato.

    Nell'esempio seguente, per ogni film, è stata aggiunta la possibilità di modificarne la classificazione (il codice completo dell'esempio è nel file DynamicUpdate1.htm):

    ...
    Codice correlato:

    $(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "click", function ( ) ( var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); )); ));
    Come puoi vedere, questo codice è molto simile al codice dei segnalibri della sezione "Trasformazione", solo che lavorando con i segnalibri ho effettuato l'accesso a un oggetto condiviso viewState e qui sto lavorando con i dati associati a un'istanza del modello.

    Nel browser, questo esempio si presenta così:

    L'esempio seguente dimostra la sostituzione di un modello collegato (il codice di esempio completo è nel file DynamicUpdate2.htm):

    ((tmpl "#movieMainTmpl"))

    [Di più...]

    ((tmpl "#movieMainTmpl"))

    Fotogrammi dal film:

    ((ogni fotogramma)) ((/ogni))

    [Meno...]


    Qui sto usando due modelli, movieShortTmpl E movieFullTmpl, la cui parte generale è inclusa nel modello movieMainTmpl.

    Codice correlato:

    $(function () ( var shortTemplate = $("#movieShortTmpl").template("shortTemplate"); var fullTemplate = $("#movieFullTmpl").template(); $.tmpl("shortTemplate", dataItems). appendTo("#movieListBag"); $("#movieListBag").delegate(".more-details", "click", function () ( var item = $.tmplItem(this); item.tmpl = item.tmpl === shortTemplate ? fullTemplate: shortTemplate; item.update(); )); ));
    Penso che questo codice richieda qualche ulteriore spiegazione.

    Per sostituire un modello, ho bisogno di un collegamento al modello compilato. Ottengo questi collegamenti utilizzando le chiamate .modello(). Inoltre, perché campione shortTemplate utilizzato per visualizzare un elenco di film dopo il caricamento della pagina, lo memorizzo in una cache in modo da poterne istanziare per nome.

    Nel browser, questo esempio si presenta così:

    Conclusione Il codice per gli esempi utilizzati nell'articolo può essere scaricato da questo collegamento.

    Scaricamento Modelli jQuery puoi dal sito Web ASP.NET CDN o direttamente dal repository GitHub:
    Brian Landau "Benchmarking delle librerie di modelli Javascript".

    E in conclusione, vorrei esprimere la mia gratitudine a Vitaly Dilmukhametov e Denis Gladkikh per i preziosi commenti fatti durante la lavorazione dell'articolo.

    Tag: aggiungi tag

    Il 4 ottobre 2010 è stato pubblicato l'annuncio di tre plugin jQuery, realizzati con il supporto del team Microsoft. Questi plugin, il plugin jQuery Templates, il plugin jQuery Data Link e il plugin jQuery Globalization, sono designati come "Plugin ufficialmente supportati del progetto jQuery".

    Il plugin del modello viene utilizzato quando è necessario visualizzare un oggetto dati o un array di oggetti nel markup della pagina. Il plug-in di associazione dati è necessario per collegare gli oggetti con gli elementi della pagina e modificare i valori in modo sincrono. Il plug-in di globalizzazione consente di visualizzare su una pagina dati come numeri, data e ora, quantità di denaro, ecc. nel formato della lingua corrente.

    Va notato che il team Microsoft ha utilizzato la sua notevole esperienza in questi ambiti, così come il team del progetto jQuery, e con un'interazione consolidata, a mio avviso, si sono rivelati ottimi strumenti per gli sviluppatori. Per confermare la mia opinione, posso aggiungere che gli sviluppatori jQuery hanno annunciato l'inclusione di plug-in di template e data binding nella libreria principale di jQuery già nella versione 1.5 e un plug-in di globalizzazione nella versione corrispondente dell'interfaccia utente di jQuery. I plugin non hanno ancora ricevuto lo stato di rilascio, ma la documentazione è già stata scritta attivamente sul sito. A proposito, il team Microsoft ha seguito la tradizione dello sviluppo jQuery e ha pubblicato materiali sullo sviluppo dei plugin su github.com, dove sono disponibili descrizioni e codici sorgente dei plugin.

    In questo articolo parlerò un po’ del plugin template.

    Plug-in per modelli jQuery

    Cominciamo con un semplice esempio:

  • $(Nome) ($(Anno di rilascio))
    • var film = [ ( Nome: "Il violino rosso", Anno di uscita: "1998"), ( Nome: "Eyes Wide Shut", Anno di uscita: "1999"), ( Nome: "L'eredità", Anno di uscita: "1976") ]; $("#movieTemplate").tmpl(movies) .appendTo("#movieList");

    Quindi, nell'esempio, lo sviluppatore della pagina ha descritto un modello per la visualizzazione di oggetti sotto forma di markup (il primo elemento sceneggiatura), poi ho ottenuto una serie di oggetti da qualche parte film e ha chiamato l'istruzione per generare il markup richiesto in base al modello, prendendo i dati dall'array di oggetti fornito e aggiungendo il risultato alla fine dell'elenco #listafilm .
    Come risultato dell'esecuzione del plugin, otterremo il seguente markup:

    • Il violino rosso (1998)
    • Occhi ben chiusi (1999)
    • L'eredità (1976)

    E ora veniamo al nocciolo della questione.
    Cosa fa il plugin?
    Il plugin riceve come input una stringa modello e un insieme di oggetti (o un oggetto) che devono essere restituiti in una stringa (o markup) con formattazione.
    Dove viene applicato?
    Questo plugin è utile principalmente per visualizzare dinamicamente oggetti JS su una pagina; gli oggetti possono essere ottenuti in vari modi, ad esempio durante i calcoli o come risultato di alcune azioni dell'utente e, ovviamente, l'esempio più frequentemente citato è nel forma di JSON nella risposta del server a una richiesta AJAX.

    Metodi di plugin

    .tmpl([ dati ], [ opzioni ])
    Ottiene il contenuto del primo elemento selezionato e lo utilizza come modello per l'output formattato dei dati specificati.
    dati– dati da inviare a un modello (oggetto o array di oggetti).
    opzioni– estensione facoltativa definita dall'utente sotto forma di coppie chiave-valore per l'oggetto di output nel modello.
    jQuery.tmpl(modello, [dati], [opzioni])
    Utilizza il modello specificato per produrre un output formattato dei dati specificati.
    modello– un modello per la formattazione dei dati, può essere uno dei seguenti tipi: una stringa con markup, un elemento HTML (compreso in un wrapper jQuery), una stringa corrispondente al nome di un modello precedentemente compilato.
    dati, opzioni– hanno lo stesso significato di cui sopra
    .tmplItem()
    Restituisce una struttura (oggetto) per il primo elemento selezionato con i risultati del motore di template. L'oggetto restituito dal metodo fornisce l'accesso a:

    • Parti HTML che compongono il modello
    • unità dati trasmessa associata
    • al modello principale se il modello corrente è nidificato
    • il modello corrente utilizzato per l'output
    • estensione definita dall'utente (campi e metodi) passata al parametro opzioni del metodo tmpl()

    Questo metodo viene utilizzato, ad esempio, quando, dopo aver formattato i dati, è necessario scoprire quali dati sono stati utilizzati per formare una determinata parte di markup o per aggiornare una parte di markup utilizzando nuovi dati.
    jQuery.tmplItem(elemento)
    Similmente al metodo .tmplItem, per l'elemento viene cercata solo la struttura con i risultati del motore di template elemento(Elemento HTML, incluso nel wrapper jQuery).
    .Nome modello ])
    Il metodo crea una versione compilata del modello di formattazione dal contenuto del primo elemento selezionato.
    nome– nome del modello facoltativo, se il nome è specificato, è possibile utilizzarlo per accedere a questo modello in un metodo jQuery.tmpl(nome, dati, opzioni)
    jQuery.template([ nome, ] modello)
    Il metodo è simile a quello descritto sopra, solo che qui il template viene passato come parametro modello– può essere una stringa, una stringa con markup, un elemento HTML (incluso in un wrapper jQuery).

    Sintassi del modello

    Descriverò brevemente alcuni degli elementi più basilari del modello; spero di descrivere il resto in modo più dettagliato nel prossimo articolo (se c'è una risposta positiva a questo articolo)
    $(nomecampoOrExpression) e ((= nomecampoOrExpression))
    Permette di inserire nel template il valore di un campo (proprietà) di un oggetto dati; può essere utilizzato anche per inserire il risultato di un metodo o di un'espressione js. Per esempio, "$(Nome)"– inserirà nel template il valore del campo obj.Name, e dato che Languages ​​è un campo dell'oggetto a cui è assegnato l'array, "$(Lingue.lunghezza)"– inserirà la lunghezza di questo array nel template e, infine, se l'oggetto ha un metodo getLanguages ​​con due parametri, allora “$(getLanguages(Lingue, ‘ – ‘))”– inserirà il risultato di questo metodo nel modello.
    ((nomecampo o espressione html))
    L'elemento del modello $(field) (o ((= field))) inserisce il valore del campo specificato come testo nel risultato, ad es. Se nella stringa sono presenti tag HTML, verranno codificati anziché convertiti in markup. Se è necessario inserire dati nel modello sotto forma di markup HTML, è necessario utilizzare la sintassi ((html)) .
    Per iniziare con il plugin, ne ho già parlato abbastanza, posso solo aggiungere che la sintassi del template permette di inserire template annidati, istruzioni condizionali, accedere ad alcuni oggetti JS e jQuery e qualcos'altro... Il resto è materiale per un futuro articolo.

    Fonti

    L'articolo è stato scritto sulla base di materiali trovati sul World Wide Web. Si tratta principalmente di una traduzione di documentazione ufficiale. Gli originali possono essere visualizzati ai seguenti link:

    • (esempi presi da lì)
    Circa l'autore

    Mi chiamo Andrey Zaitsev, profilo sul forum zandroid

    Questo è il mio primo articolo su questo blog, spero, e non l'ultimo. Mille grazie a Gennady per l'opportunità di pubblicare e per gli utili consigli sulla scrittura e la progettazione del materiale.

    Esempi

    Esempio 1: commutazione dinamica del modello applicato

    table ( cursore:puntatore; border-collapse:collapse; border:2px blu fisso; larghezza:300px; margine:8px; ) table tr ( border:1px blu fisso; colore:blu; background-color:#f8f8f8; ) table td ( imbottitura:3px; ) tabella tr:hover ( colore:rosso; ) .movieDetail ( colore di sfondo:giallo; ) .movieDetail.row1 ( border-bottom:none; ) .movieDetail.row2 ( border-top:none; ) $(Nome) $(Nome)$(Anno di rilascio)Direttore: $(Direttore) Clicca per vedere i dettagli:

    var film = [ ( Nome: "The Red Violin", Anno di uscita: "1998", Regia: "François Girard" ), ( Nome: "Eyes Wide Shut", Anno di uscita: "1999", Regia: "Stanley Kubrick" ), (Nome: "L'eredità", Anno di uscita: "1976", Regia: "Mauro Bolognini" )]; var selezionatoArticolo = null; /* Visualizza il summaryTemplate con i dati "movies" */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Aggiunge gestori onclick per gli elementi del modello di film utilizzando il modello di riepilogo o di dettagli */ $("#movieList") .delegate(".movieSummary", "click", function () ( if (selectedItem) ( // Imposta il modello sull'elemento precedentemente selezionato // torna al modello di riepilogo selezionatoItem.tmpl = $("#summaryTemplate").template(); selezionatoItem.update(); ) /* Ottieni la struttura dei dati per l'elemento del modello a cui appartiene questo elemento cliccato a e renderlo l'elemento selezionato */ selezionatoItem = $.tmplItem(this); /* Imposta il modello su questo elemento sul modello dei dettagli */ selezionatoItem.tmpl = $("#detailTemplate").template(); selezionatoItem .update(); )).delegate(".movieDetail", "click", function () ( /* Imposta il modello su questo elemento sul modello di riepilogo */ selezionatoItem.tmpl = $("#summaryTemplate").template (); oggetto selezionato.update(); oggetto selezionato = null; ));

    Abbastanza complesso e voluminoso, utilizza diversi metodi di plugin contemporaneamente, tratti da.

    Esempio 2: inserimento di dati con markup in un modello

    .role (font-weight:bold;font-style: italic;) #movieContainer (padding-left: 8px;) $(Nome)

    ((Sinossi html))

    /* Il campo dati Sinossi contiene markup HTML. */ var movie = ( Nome: "Vi presento Joe Black", Sinossi: "La triste mietitrice (Brad Pitt) fa visita a Bill Parrish (Anthony Hopkins)..." ); /* Visualizza il modello con i dati del film. Il modello utilizza il tag template ((html)) per inserire i dati di markup HTML della sinossi. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

    In questo esempio, al modello vengono aggiunti sia valori di campi stringa semplici che valori con markup, presi da qui.

    PS

    Non ho descritto gli esempi, ma se il pubblico sostiene le mie iniziative, allora posso descrivere passo dopo passo cosa, come e perché e fornire qualche altro esempio.

    Si prega di porre domande sul plugin sul forum, se ci sono commenti specifici sull'articolo, commentare di seguito.

    Plugin per implementare il cambio di parole con vari effetti animati. L'effetto CSS è adatto per implementare siti promozionali e banner animati.

    Implementazione della divisione del contenuto della pagina in schede utilizzando effetti animati CSS3. Quattro opzioni di design: schede orizzontali e verticali con vari effetti animati.

    3. Dispositivo di scorrimento jQuery adattivo basato sul plug-in IMPRESS.JS

    Fantastico cursore con simulazione dell'effetto 3D durante lo scorrimento delle diapositive. Quando si aumenta/diminuisce la dimensione dello schermo, cambia la dimensione del carattere, delle immagini e di tutti gli elementi sulla diapositiva, garantendo la corretta visualizzazione a qualsiasi dimensione dello schermo. È fornito lo scorrimento automatico.

    Soluzione jQuery per creare una comoda navigazione attraverso le sezioni del documento senza ricaricare la pagina. Ogni sezione viene visualizzata in un blocco separato con scorrimento verticale e la transizione tra di loro può essere effettuata con un clic del mouse o utilizzando il titolo (con schermi di grandi dimensioni, il titolo viene visualizzato sul lato sinistro, quando si visualizza il sito su un piccolo schermata - nella parte superiore del documento).

    Implementazione della navigazione dei contenuti nel modulo Elenco delle categorie → Elenco delle sezioni → Contenuto della sezione. La navigazione è accompagnata da vari effetti JS.

    Lo scorrimento delle diapositive viene effettuato con l'effetto Parallax (movimento di strati a velocità diverse, che insieme creano un effetto 3D). La dimensione del cursore cambia in proporzione alla dimensione della finestra del browser.

    Presentazione con accompagnamento musicale. È possibile mettere in pausa o saltare una composizione musicale.

    11. Un menu unico che utilizza jQuery e CSS

    Quando selezioni una voce di menu, l'area con i suoi contenuti si espande in alto.

    Un menu a discesa orizzontale con un interessante effetto jQuery di visualizzazione di elementi nidificati.

    Un fantastico plugin jQuery CSS che sarà un'aggiunta molto utile al sito web di qualsiasi studio web o libero professionista. Con il suo aiuto, puoi visualizzare chiaramente esempi di lavoro completato suddivisi per tempo. La sequenza temporale stessa viene visualizzata in basso e il lavoro completato viene visualizzato in alto. Per navigare tra i lavori, è possibile utilizzare sia la scala che le frecce sinistra/destra.

    14. Galleria “TouchTouch”, ottimizzata per la visualizzazione da dispositivi mobili 15. Slider immagini CSS3 “Cycle Slider”

    Quando si fa clic sul nome, viene visualizzata un'immagine con una descrizione. Viene utilizzato solo CSS3.
    Lezione sulla creazione di una galleria.

    17. Tooltip jQuery e CSS3 interessanti e colorati

    Suggerimenti jQuery in 7 stili. Facile da collegare e utilizzare nei tuoi progetti.

    Se nella galleria sono presenti più di 5 immagini, verranno visualizzate le frecce sinistra/destra per navigare tra le foto.

    Le diapositive possono essere non solo immagini, ma anche altri contenuti HTML.

    Plugin per creare ombre fotorealistiche.

    Nuova implementazione dello slider.

    26. Avvolgi il testo "Pancetta"

    Un effetto insolito di trasferimento del testo su una pagina su una nuova linea lungo una curva o una determinata linea con un determinato passo di offset.

    Il plugin calcola automaticamente la dimensione del carattere per ogni parola in modo che tutto il testo occupi la stessa larghezza, indipendentemente dal numero di parole nella riga.

    28. Scegliere il tipo di visualizzazione dei blocchi utilizzando CSS3

    Quattro tipi di visualizzazione a blocchi: immagine con descrizione su tre colonne, immagine con descrizione su una colonna, solo immagini, solo descrizione testuale. Per cambiare il tipo di visualizzazione dei blocchi è necessario utilizzare le icone in alto.

    Il modo migliore per iniziare a conoscere i modelli di dati è iniziare a lavorarci subito. Vengono mostrate le funzionalità di base dei modelli. Ho incluso il documento HTML completo in questo elenco per via del modo in cui impostiamo i modelli utilizzando l'elemento script, ma ti mostrerò gli elementi rilevanti negli esempi successivi.

    Listato 12-3: Primo esempio di un modello di dati Esempio $(document).ready(function () ( var data = [ ( name: "Astor", product: "astor", stocklevel: "10", price: 2.99 ) , ( nome: "Daffodil", prodotto: "daffodil", livello delle scorte: "12", prezzo: 1,99 ), ( nome: "Rose", prodotto: "rose", livello delle scorte: "2", prezzo: 4,99 ), ( nome: "Peonia", prodotto: "peonia", livello di stock: "0", prezzo: 1.50 ), ( nome: "Primula", prodotto: "primula", livello di stock: "1", prezzo: 3.12 ), ( nome: "Bucaneve", prodotto: "bucaneve", livello scorte: "15", prezzo: 0,99 ), ]; )); $(nome): Effettua l'ordine nel negozio di fiori di Jacqui

    Nelle sezioni seguenti, analizzerò l'esempio e spiegherò ogni parte. Se i dati fanno parte di un documento, è noto come dati incorporati. Un'alternativa è dati cancellati, questo è quando ricevi i dati dal server separatamente dal documento. Toccheremo i dati remoti più avanti in questo capitolo, ma si parlerà del supporto di jQuery per Ajax, che è l'argomento dei capitoli 14 e 15.

    Definizione dei dati

    Il punto di partenza dell'esempio sono i dati, che in questo caso sono una serie di oggetti, ognuno dei quali descrive un'unità separata di produzione di fiori. B mostra le espressioni corrispondenti dal documento.

    Listato 12-4: Definizione dei dati colore var data = [ ( nome: "Astor", prodotto: "astor", livello stock: "10", prezzo: 2.99 ), ( nome: "Daffodil", prodotto: "daffodil", livello stock : "12", prezzo: 1.99 ), ( nome: "Rosa", prodotto: "rosa", livello stock: "2", prezzo: 4.99 ), ( nome: "Peonia", prodotto: "peonia", livello stock: " 0", prezzo: 1.50 ), ( nome: "Primula", prodotto: "primula", livello stock: "1", prezzo: 3.12 ), ( nome: "Bucaneve", prodotto: "bucaneve", livello stock: "15 " , prezzo: 0,99 ), ];

    Esprimi i tuoi dati come uno o più oggetti JavaScript. La libreria dei modelli jQuery è molto flessibile per quanto riguarda il tipo di oggetti che possono essere utilizzati come dati, ma il formato mostrato nel modello viene utilizzato più spesso perché segue il formato dati JSON, di cui parlerò nel Capitolo 14.

    Consiglio

    JSON è importante perché viene spesso utilizzato con Ajax, di cui parlerò nei capitoli 14 e 15.

    In questo esempio, la matrice contiene sei oggetti, ciascuno con un insieme di proprietà che descrivono i prodotti del negozio di fiori: nome visualizzato, nome del prodotto, dimensione dell'inventario (quantità disponibile) e prezzo.

    Definizione del modello

    Come puoi immaginare, il cuore della libreria dei modelli di dati è il modello di dati. È un insieme di elementi HTML contenenti segnaposto che corrispondono ad aspetti degli oggetti dati. B mostra il modello per questo esempio.

    Listato 12-5: Definizione di un modello di dati $(prodotto).png" /> $(nome) :

    La prima cosa da notare sul modello è che è contenuto all'interno di un elemento script con un valore di attributo type text/x-jquery-tmpl . Lo facciamo per impedire al browser di interpretare il contenuto del modello come normale HTML. Questo non è del tutto necessario, ma è una buona pratica e aiuterà a evitare molti potenziali problemi.

    Il secondo punto da notare è che quando definisci un modello in un elemento script, assegnerai un nome al modello utilizzando l'attributo id. Nel nostro caso, il modello si chiama flowerTmpl. Devi conoscere il nome del modello quando lo applichi ai tuoi dati.

    Il contenuto del modello verrà applicato agli oggetti nell'array di dati per creare un set di elementi HTML per ciascun oggetto individualmente. Puoi vedere che la struttura del modello corrisponde all'insieme di elementi che ho utilizzato per i prodotti floreali nei capitoli precedenti. La differenza fondamentale, ovviamente, sta nelle parti di codice che ho evidenziato nell'elenco. Questo è quello che è segnaposto dei dati.

    Quando la libreria di template elabora un template, sostituisce eventuali segnaposto di dati con i valori delle proprietà dell'oggetto su cui sta lavorando. Quindi, ad esempio, la libreria template assocerà il primo oggetto dell'array all'etichetta $(prodotto) e lo sostituirà con il valore della proprietà dell'unità prodotto, ovvero, in questo caso, astor . Questa è la parte del modello:

    $(prodotto).png"/>

    trasformato in questo:

    astor .png"/>

    L'inserimento dei valori dei dati è solo una delle cose che puoi fare con un modello. Spiegherò altre possibilità più avanti in questo capitolo.

    Applicazione di un modello

    Appiattiamo il modello utilizzando il metodo tmpl. Questo ci permette di specificare i dati che vogliamo utilizzare e il modello che dovrebbe essere applicato ad essi. Viene mostrato l'uso di questo metodo.

    Listato 12-6: $("#flowerTmpl").tmpl(data).appendTo("#row1");

    Utilizzo la funzione jQuery $ per selezionare l'elemento che contiene il template, e poi chiamo il metodo tmpl sul risultato, passando come argomento i dati che voglio elaborare.

    Il metodo tmpl restituisce un oggetto jQuery standard che contiene gli elementi ottenuti dal template. Nel nostro caso, lo concludo con una serie di elementi div, ciascuno contenente un img , label e un elemento input che sono stati elaborati per uno degli oggetti nel mio array di dati. Sto utilizzando il metodo appendTo per inserire l'intero set di figli per row1 . Il risultato può essere visto su.

    Figura 12-2: Utilizzo di un modello di dati Personalizzazione del risultato

    Non abbiamo ottenuto il risultato completo che ci aspettavamo perché tutti i prodotti si trovano sulla stessa linea. Ma poiché stiamo lavorando con un oggetto jQuery, possiamo fare tutto ciò che facevamo prima con gli elementi. Mostra come ciò può essere fatto utilizzando il risultato del metodo tmpl.

    Listato 12-7: Elaborazione dei risultati ottenuti dal template $("#flowerTmpl").tmpl(data) .slice(0, 3).appendTo("#row1").end().end().slice( 3 ).appendTo("#riga2"); )); $(nome):

    In questo esempio utilizzo i metodi slice ed end per restringere ed espandere la selezione e il metodo appendTo per aggiungere sottoinsiemi di elementi generati dal modello a righe diverse.

    Tieni presente che ho dovuto chiamare il metodo end due volte di seguito per risolvere il restringimento della selezione causato dai metodi slice e appendTo. È molto funzionale e generalmente mi piace usare il metodo end per creare comandi in un'unica istruzione, ma non mi piace molto la sequenza end().end(). Invece, di solito separo tali sequenze in comandi separati, come mostrato in .

    Listato 12-8: Separare gli elementi utilizzando più espressioni var templResult = $("#flowerTmpl").tmpl(data); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

    In ogni caso si ottiene lo stesso risultato, ovvero il prodotto viene diviso in due file, ciascuna contenente tre fiori, come mostrato in figura.

    Figura 12-3: Regolazione dei risultati per adattarli al layout
    Correzione inserimento dati

    È possibile utilizzare un altro metodo per correggere i dati passati al metodo tmpl. Mostra come ciò può essere fatto.

    Listato 12-9: Utilizzo dei dati per modificare i risultati del modello $(document).ready(function () ( var data = [ ( nome: "Astor", prodotto: "astor", livello stock: "10", prezzo: 2,99 ) , ( nome: "Daffodil", prodotto: "daffodil", livello delle scorte: "12", prezzo: 1.99), ( nome: "Rose", prodotto: "rose", livello delle scorte: "2", prezzo: 4.99), ( nome: "Peonia", prodotto: "peonia", livello di stock: "0", prezzo: 1,50 ), ( nome: "Primula", prodotto: "primula", livello di stock: "1", prezzo: 3,12 ), ( nome : "Bucaneve", prodotto: "bucaneve", livello stock: "15", prezzo: 0,99 ), ]; var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ( "#riga1"); template.tmpl(data.slice(3)).appendTo("#riga2"); )); $(nome):

    In questo script ho risolto il problema di posizionare i fiori in file utilizzando il modello due volte: una volta per ogni riga. Ho utilizzato il metodo slice, in questo modo ho potuto passare ogni volta un set specifico di oggetti dati al modello. La tecnica è diversa, ma il risultato è lo stesso di sopra.

    Valutazione delle espressioni

    Non ci limitiamo esclusivamente ai valori delle proprietà degli oggetti dati. Puoi inserire un'espressione JavaScript tra le parentesi graffe e il motore del modello eseguirà i calcoli e inserirà l'output del modello nell'HTML. Contiene un esempio.

    Elenco 12-10: $(nome):

    In questo modello utilizzo l'operatore ternario JavaScript per impostare l'attributo value dell'elemento di input in base alla proprietà stocklevel. Metto questa espressione tra parentesi graffe, proprio come ho fatto quando ho inserito direttamente i valori delle proprietà. Se la proprietà stocklevel è maggiore di zero, l'attributo value verrà impostato su 1, altrimenti sarà 0. Il risultato può essere visto su. Per tutti i fiori tranne la peonia, il valore del livello delle scorte è maggiore di zero.

    Figura 12-4: Valutazione di un'espressione in un modello

    Questo esempio dimostra brevemente la funzionalità di base di un modello: combini i dati con un modello per produrre oggetti DOM, che poi aggiungi al documento utilizzando jQuery di base. I valori dei dati possono quindi essere utilizzati direttamente o indirettamente nelle espressioni per generare contenuto.

    Con il rilascio di jQuery, la vita è diventata molto più semplice per gli sviluppatori. Ad esempio, possiamo facilmente fare quanto segue:

    $("#someElement").children().each(function() ( $(this).wrap($("")); ));

    Questo codice inserirà nel tag tutti i discendenti dell'elemento con ID #someElement. Non c'è niente di sbagliato in tali operazioni; Questa espressione è assolutamente corretta ed è molto comoda in alcune situazioni. Ma il codice HTML inserito nel nostro script viola la logica strutturale del codice. In questo semplice esempio questa violazione non è significativa, ma nei progetti reali è molto comune. In genere, tale codice contiene molti frammenti HTML incorporati nel DOM dopo aver ricevuto dati dalle richieste AJAX. Questo stile può trasformarsi rapidamente in qualcosa di estremamente illeggibile.

    L'utilizzo dei template ci consentirà di eliminare questo inconveniente separando i frammenti HTML dagli script, separando così la logica del contenuto dei diversi tipi di codice. Lungo la strada, non posso fare a meno di mostrarti alcune fantastiche nuove funzionalità AJAX introdotte da jQuery 1.5.

    Inizio

    In questo esempio, svilupperemo un widget Twitter che caricherà non solo i nostri post più recenti, ma anche un elenco di amici e follower. Ho scelto Twitter per questo esempio perché interagisce con i dati JSON con cui è facile e divertente lavorare.

    Iniziamo; il widget stesso verrà costruito in base alla seguente struttura HTML:

    jQuery, AJAX e modelli Dan Wellmann

    Marito, padre, sviluppatore front-end e autore. Scrive per Nettuts e Packt Publishing. Lavora per @designhaus | Fanatico di jQuery

    • Tweet
    • Amici
    • Seguaci
    Questo widget ha funzionalità straordinarie che richiedono l'uso di JavaScript. Abilitalo per una migliore esperienza su Internet

    In questo esempio stiamo utilizzando HTML5. Per fare ciò, abbiamo specificato un DOCTYPE semplificato e un meta elemento. Potresti anche notare nel codice una connessione ai fogli di stile, che verrà descritta tra un paio di minuti. Per supportare la versione corrente di IE8 e precedenti, utilizziamo commenti condizionali sullo speciale plugin html5shiv.

    Utilizzo a parte

    Molto probabilmente, questo widget assomiglierà a una barra laterale e visualizzerà il contenuto dell'utente Twitter specificato. Con questo in mente, ho deciso di inserire il contenuto in un file . Per poter accedere facilmente a questo elemento, imposteremo un ID per esso.

    A proposito di marcature. Tutti i titoli dei post dell'utente Twitter verranno inclusi nel tag e l'immagine e tutto il resto verranno inclusi nel tag

    Puoi modificarlo in base alle tue preferenze quando esegui il reverse engineering di questo esempio. Potremmo ottenere tutti i dati richiesti tramite JSON, cosa che faremo, tuttavia, se si verifica un ritardo nel processo di caricamento, al visitatore verranno mostrati molti blocchi vuoti. Quindi è meglio aspettare fino al completamento del download e poi riempire i blocchi.

    Avremo anche schede sulla nostra pagina per passare da un elenco di messaggi, amici e iscritti. Tutti saranno racchiusi in tag

    © Copyright 2024, Padroneggiare PC - Internet. Skype. Mezzi sociali. Lezioni di Windows