Maison / Leçons Windows / Apprendre à travailler avec des modèles jQuery. Travailler avec des modèles jQuery Disposition des données numériques dans jquery

Apprendre à travailler avec des modèles jQuery. Travailler avec des modèles jQuery Disposition des données numériques dans jquery

09.03.2024 Leçons Windows

Commençons Commençons. L'exemple ci-dessous montre une liste de films donnés dans un tableau (le code complet de l'exemple se trouve dans le fichier BasicSample1.htm):

Exemple simple (1) $(titre)

Réalisateur : $(réalisateur)
Casting : $(acteurs)
Année : $(année)

$(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); )); Exemple simple (1)
Et voici ce que vous verrez dans le navigateur :

Regardons cet exemple en détail.

Donc la première chose que je fais est de me connecter Bibliothèque principale jQuery Et Modèles jQuery:


On l'a déjà dit plusieurs fois auparavant Modèles jQuery sera inclus dans Bibliothèque principale jQuery- mais dans jQuery 1.5 RC1, sorti le 24 janvier, il manque toujours des templates.

Ensuite je charge la liste des films :


Bien sûr, vous pouvez préparer les données source de la manière qui vous convient - les recevoir à l'aide d'une requête AJAX, les créer en fonction des entrées de l'utilisateur, etc., j'utilise un script statique par exemple uniquement.

À l'intérieur du fichier DataItems.js comme suit:

Var dataItems = [ ( titre : "Bandits", vignette : "Bandits.jpg", réalisateur : "Barry Levinson", acteurs : ["Bruce Willis", "Billy Bob Thornton", "Cate Blanchett"], année : 2001, budget : 95000000, revenu brut : 67631903, note : 0, cadres : ["Bandits-1.jpg", "Bandits-2.jpg", "Bandits-3.jpg", "Bandits-4.jpg", "Bandits- 5.jpg"] ), ...
L'étape suivante consiste à créer un modèle :

$(titre)

Réalisateur : $(réalisateur)
Casting : $(acteurs)
Année : $(année)


Veuillez noter que le modèle est placé dans la balise SCÉNARIO, et comme type MIME je précise texte/x-jquery-tmpl. Lorsqu'il rencontre un type MIME inconnu lors de l'analyse d'un document, le navigateur n'essaie pas d'interpréter le contenu de la balise SCÉNARIO, c'est ce dont j'ai besoin.

D'une manière générale, le modèle peut être placé dans n'importe quelle balise, par exemple dans la balise DIV:

$(titre)

Réalisateur : $(réalisateur)
Casting : $(acteurs)
Année : $(année)


Cependant, dans ce cas, les effets secondaires ne peuvent être évités, car le navigateur essaiera certainement d'interpréter le code du modèle.

Par exemple, l'exemple ci-dessus tentera de charger une image inexistante :

Mais dans le cas d'un tableau, tout peut être bien plus intéressant (un grand merci à TEHEK pour cet exemple !) :

((chaque élément de données)) ((/chaque))
$(titre) $(réalisateur) $(année)

Internet Explorer et Opera traiteront ce code correctement :

Mais Chrome et Fire Fox « pousseront » le code supplémentaire en dehors de la table, ce qui entraînera une table vide... Bon débogage ! ;-)

Pour l'étiquette SÉLECTIONNER une image similaire sera observée.

Enfin, j'instancie le modèle avec l'appel suivant :

$("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag");
J'ai décrit ce qui se passe dans le diagramme ci-dessous :

  • Méthode .tmpl() obtient le texte du modèle - c'est-à-dire texte intérieurélément obtenu en appelant $("#movieTmpl").
  • Le texte du modèle est compilé et une fonction JavaScript est créée sur cette base.
  • Une « instance de modèle » est créée : un objet qui contient une référence à un élément de données (champ données) passé en argument de méthode .tmpl(). Méthode .tmpl() vous pouvez passer un tableau, un objet, nul ou appelez-le sans arguments. Si vous transmettez un tableau, alors pour chaque élément du tableau, sa propre instance de modèle sera créée, faisant référence à cet élément. Dans tous les autres cas, une seule instance sera créée.
  • La fonction de modèle compilée est appelée et transmise à un objet instance. La fonction renvoie le texte du modèle dans lequel toutes les substitutions ont été effectuées.
  • Le texte obtenu à l'étape précédente est converti en une collection d'éléments HTML. Les références à ces éléments sont également stockées dans l'objet instance (champ nœuds), qui vous permet de mettre à jour facilement la « sortie » du modèle à l'avenir lorsque les données source changent (voir la section « Mise à jour dynamique »).
  • Et enfin la méthode .tmpl() Retour jQuery-une collection d'éléments HTML ajoutés au document à l'aide de l'appel appendTo("#movieListBag").
    • Expressions Pour remplacer des valeurs dans le modèle, utilisez la balise ${...} . A l'intérieur de cette balise vous pouvez spécifier le nom de la propriété de l'objet passé à la méthode .tmpl(), ainsi que toute expression JavaScript valide, y compris un appel de fonction.

    Utilisation des propriétés d'un objet (élément de tableau) :

    $(titre)
    Utilisation d'expressions JavaScript :

    Budget : $$((budget / 1000000).toFixed(0)) millions.
    Brut : $$((grossRevenue / 1000000).toFixed(1)) millions.

    Champs et méthodes de l'instance de modèle Dans les expressions, vous pouvez accéder à l'instance de modèle actuelle via une variable $article, et pour accéder à l'élément de données actuel - une variable $données.

    Chaque instance de modèle contient les champs suivants :

  • données- contient un lien vers un élément de données associé à une instance de modèle ;
  • tmpl- contient un lien vers le modèle compilé utilisé pour le rendu ;
  • parent- si le modèle a été appelé depuis un autre modèle à l'aide d'une balise ((tmpl)), contient un lien vers l'instance « parent » du modèle ;
  • nœuds- après rendu, contient des liens vers des éléments HTML générés suite à l'application du modèle.
    • De plus, la méthode .tmpl() prend deux arguments - données Et choix. Avec un argument données que vous avez déjà rencontré, un lien vers une donnée est transmis via celui-ci. Et en utilisant l'argument choix, vous pouvez passer une référence à un objet, dont tous les champs et méthodes seront transférés à chaque instance de modèle créée dans la méthode .tmpl().

    Voici un exemple d'utilisation de ce paramètre :

    $(titre)

    Réalisateur : $(réalisateur)
    Casting : $(acteurs)
    Année : $(année)
    Budget : $$($item.formatBudget(budget)) millions.
    Brut : $$($item.formatGrossRevenue(grossRevenue)) millions.


    $(function () ( $("#movieTmpl") .tmpl(dataItems, ( formatBudget : fonction (valeur) ( ​​return (value / 1000000).toFixed(0); ), formatGrossRevenue : fonction (valeur) ( ​return (valeur / 1000000).toFixed(1 )) .appendTo("#movieListBag");
    Dans cet exemple, j'utilise des appels de fonction pour formater les valeurs du budget et des frais, mais pour éviter d'encombrer l'espace de noms global, je les ai transmis via un paramètre choix, après quoi ces fonctions sont devenues disponibles en tant que méthodes de l'instance de modèle actuelle.

    Enfin, l'instance de modèle contient des méthodes mise à jour() Et html(), dont je montrerai l'utilisation ci-dessous.

    À quoi ressemble le modèle compilé ? Vous pouvez voir à quoi ressemble le modèle compilé en utilisant la méthode .modèle(), qui compile simplement des modèles. Cette méthode renvoie un objet fonction dont le contenu est facile à visualiser :

    $("#compiledTemplateBag").text("" + $("#movieTmpl").template());
    Le modèle utilisé dans l'exemple ci-dessus ressemble à ceci une fois compilé (texte formaté pour une meilleure lisibilité) :

    Fonction anonyme(jQuery, $item) ( var $ = jQuery, call, _ = , $data = $item.data; avec ($data) ( _.push(" "); if (typeof (title) !== "undefined" && (title) != null) ( _.push($.encode((typeof (title) === "function" ? (title).call( $item) : (titre)))); _.push("

    Directeur : " ); if (typeof (directeur) !== "indéfini" && (directeur) != null) ( _.push($.encode((typeof (directeur) === "fonction" ? (directeur). call($item) : (directeur)))); _.push("
    Cast : "); if (typeof (actors) !== "undefined" && (actors) != null) ( _.push($.encode((typeof (actors) === "function" ? (actors) . call($item) : (acteurs)))); _.push("
    Année : "); if (typeof (year) !== "undefined" && (year) != null) ( _.push($.encode((typeof (year) === "function" ? (year). call($item) : (année)))); _.push("

    "); ) retour _; )
    Je pense que maintenant vous devriez comprendre comment les expressions spécifiées dans la balise sont traitées ${...} - et cette compréhension peut vous aider considérablement lors du débogage ! Le fait est que Modèles jQuery effectue une transformation relativement simple du texte du modèle, donc si vous faites une erreur dans l'expression, le message d'erreur fera référence au texte de la fonction résultante et peut souvent être extrêmement déroutant.

    Malheureusement, si le modèle est compilé avec une erreur, alors sans astuces spéciales, vous ne pourrez pas voir le texte de la fonction avec l'erreur, car la méthode correspondante est déclarée privée.

    Eh bien, je suppose que c'est tout pour l'histoire du travail. Modèles jQuery cela vaut la peine de le compléter et de passer à son application pratique.

    Deuxième partie,Conditions pratiques Afin d'appliquer des parties du modèle en fonction de certaines conditions, dans Modèles jQuery les balises sont utilisées ((si))...((sinon))...((/si)).

    L'exemple ci-dessous montre l'utilisation de ces balises (l'exemple de code complet se trouve dans le fichier IfElseTag.htm):

    Média : ((si $item.data.media == "dvd")) ((sinon $item.data.media == "blue-ray")) ((autre)) ((/si))


    Comme vous pouvez le deviner, ce code est destiné à afficher l'icône du support sur lequel se trouve le film. Voici à quoi cela ressemble dans le navigateur :

    Comme condition dans les balises ((si)) Et ((autre)) Vous pouvez utiliser n'importe quelle expression JavaScript valide.

    Traitement des collections Pour traiter les collections dans les modèles, utilisez la balise ((chacun))...((/chacun)). L'exemple ci-dessous montre l'utilisation de la balise ((chaque)) pour afficher une liste d'acteurs (un exemple de code complet se trouve dans le fichier ChaqueTag1.htm):

    Cast : ((chaque acteur)) $($valeur) ((si $index< $data.actors.length - 1}} , {{/if}} {{/each}}

    Comme argument pour taguer ((chaque)) vous pouvez passer un tableau, un objet ou jQuery-collection. Étiquette intérieure ((chaque)) utilise l'appel jQuery.each() donc tout ce que dit la documentation sur le comportement est jQuery.each() c'est aussi vrai pour le tag ((chaque)). L'exemple ci-dessous montre l'utilisation de la balise ((chaque)) pour afficher toutes les propriétés d'un objet (un exemple de code complet se trouve dans le fichier ChaqueTag2.htm):

    ((chaque $données)) $($index) $($valeur) ((/chacun))
    À l'intérieur d'une balise ((chaque)) deux variables sont disponibles : valeur $, qui contient une référence à l'élément actuel du tableau, et $index, qui contient l'index de l'élément actuel du tableau ou le nom de la propriété.

    Bien sûr, à l'intérieur de l'étiquette ((chaque)) vous pouvez utiliser d'autres balises, et en plus, vous aurez toujours accès aux variables $article Et $données. Dans l'exemple donné, les variables $index Et $données avec l'étiquette ((si)) sont utilisés pour afficher une virgule entre les noms d'acteurs - malheureusement une variable $dernier n'est pas fourni, même si ce serait très utile !

    Enfin, si jamais vous en avez besoin, vous pouvez modifier les noms des variables par défaut. Dans l'exemple ci-dessous, ces noms sont remplacés par monIndex Et maValeur(un exemple de code complet se trouve dans le fichier ChaqueTag3.htm):

    Cast : ((chacun des acteurs (myIndex, myValue))) $(myValue) ((si myIndex< $data.actors.length - 1}} , {{/if}} {{/each}}
    Au fait, j'essaie de changer le nom uniquement pour une variable $index ne mènera à rien de bon - il n'y aura pas d'erreur, mais vous ne pourrez pas non plus accéder à la valeur actuelle !

    Modèles imbriqués Les modèles peuvent être très volumineux - et il est alors logique de les diviser en plusieurs parties plus petites ou d'inclure des parties répétitives qu'il est logique de séparer dans un modèle distinct. DANS Modèles jQuery cela se fait à l'aide de modèles imbriqués, appelés à l'aide de la balise ((tmpl)).

    L'exemple ci-dessous illustre comment déplacer une partie du code du modèle vers un autre modèle (l'exemple de code complet se trouve dans le fichier NestedTemplates1.htm):

    ...

    Réalisateur : $(réalisateur)
    Casting : ((tmpl "#actorsTmpl"))
    Année : $(année)

    ... ((chaque acteur)) $($valeur) ((si $index< $data.actors.length - 1}} , {{/if}} {{/each}}
    Dans la balise ((tmpl)) doit être indiqué jQuery-sélecteur du modèle à appeler ou du nom du modèle préalablement enregistré dans le cache. Parce que dans cet exemple d'autres arguments pour la balise ((tmpl)) non, le modèle imbriqué recevra le même élément de données que le parent - mais il aura sa propre instance du modèle et le champ parent il fera référence à l'instance parent du modèle.

    L'exemple suivant montre la transmission d'un nouvel élément de données dans un modèle imbriqué et l'utilisation d'une référence à l'instance parent du modèle. Comme dans le cas de l'utilisation de la méthode .tmpl(), si vous spécifiez un tableau lors de l'appel d'un modèle imbriqué, le modèle sera appliqué à chaque élément du tableau (l'exemple de code complet se trouve dans le fichier NestedTemplates2.htm):

    ...

    Réalisateur : $(réalisateur)
    Casting : ((tmpl(actors) "#actors_template"))
    Année : $(année)

    ... $($data) ((if $data !== $item.parent.data.actors[$item.parent.data.actors.length - 1])) , ((/if))
    Enfin, le dernier exemple de cette section montre comment passer un argument à un modèle imbriqué choix, et démontre en même temps comme argument choix peut être utilisé pour déterminer le dernier élément du tableau traité (un exemple de code complet se trouve dans le fichier NestedTemplates3.htm):

    ...

    Réalisateur : $(réalisateur)
    Casting : ((tmpl(acteurs, (dernier : acteurs)) "#actors_template"))
    Année : $(année)

    ... $($data) ((if $data !== $item.last)) , ((/if))

    Transformation Une autre opportunité intéressante Modèles jQuery est associé à la transformation du balisage HTML, pour laquelle la balise est utilisée ((envelopper))(d'une manière générale, envelopper signifie « emballer », mais il me semble que le terme « transformation » reflète mieux l'essence de ce qui se passe).

    Un exemple classique d'utilisation d'une balise ((envelopper))- c'est la création de marque-pages :

    Voici à quoi cela ressemble à l'intérieur (un exemple de code complet se trouve dans le fichier Transformation1.htm):

    ((wrap(null, ( viewState: $item.viewState )) "#tabsTmpl")) Anglais La ballade de l'Est et de l'Ouest de Rudyard Kipling

    OH, l'Est est l'Est et l'Ouest est l'Ouest...

    ((/envelopper))
    Les données initiales à transformer sont placées dans le modèle ongletContenu- c'est ce modèle que je vais instancier davantage.

    Le balisage HTML que je vais transformer va dans la balise ((envelopper)). Pour l'étiquette ((envelopper)) la même notation d'invocation est utilisée exactement comme pour la balise {}}
    Dans le navigateur, cet exemple ressemblerait à ceci :

    Modèles de mise en cache à chaque appel $("#...").tmpl(...) le modèle est compilé, ce qui, malgré la vitesse considérablement accrue de JavaScript dans les navigateurs modernes, peut avoir un impact extrêmement négatif sur les performances. Développeurs Modèles jQuery ne pouvait ignorer cette évidence, donc en Modèles jQuery un mécanisme est fourni pour la précompilation et la mise en cache des modèles.

    Le modèle est compilé et mis en cache comme suit :

    $("#movieTmpl").template("movieTmpl");
    Le modèle compilé est enregistré dans le cache interne Modèles jQuery sous le nom filmTmpl. Pour accéder à un modèle en cache, utilisez la méthode jQuery.tmpl(), et le premier paramètre est le nom du modèle mis en cache :

    $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag");
    L'exemple ci-dessous parcourt une liste de films, à l'aide d'un modèle mis en cache pour afficher des informations sur le film.

    Le code du modèle n'est pratiquement pas différent de ceux que j'ai utilisés plus tôt, la seule différence est que sous la description du film, il y a des liens supplémentaires pour la navigation (l'exemple de code complet se trouve dans le fichier CachedTemplates.htm):

    $(titre)

    Réalisateur : $(réalisateur)
    Casting : $(acteurs)
    Année : $(année)

    ((si $item.canMoveBack)) [Retour]((/if)) ((if $item.canMoveFwd)) [Transférer]((/si))
    Le script qui l'accompagne est également simple :

    Var movieIndex = 0 ; $(function () ( $("#movieTmpl").template("movieTmpl"); updateMovie(); $("#movieBag").delegate(".nav-link", "click", function () ( movieIndex += parseInt($(this).attr("x-inc")); updateMovie()); fonction updateMovie() ( $("#movieBag").empty(); $("#movieBag").append($.tmpl("movieTmpl", dataItems, ( canMoveBack : movieIndex > 0, canMoveFwd : movieIndex< dataItems.length - 1 })); }
    Le gestionnaire de clics du lien de navigation modifie l'index du film sélectionné, puis appelle la fonction mettre à jour le film(), qui efface d'abord le conteneur de description du film, puis le remplit avec de nouvelles données.

    Voici à quoi ressemble cet exemple dans le navigateur :


    Le navigateur téléchargera bien sûr le fichier correspondant, mais vous ne pourrez toujours pas accéder à son contenu.

    Mais le modèle peut toujours être placé dans un fichier séparé, ce qui nécessitera littéralement une ligne de code supplémentaire (l'exemple de code complet se trouve dans le fichier) :

    $(function () ( $.get("Templates/DynamicLoading.htm", (), function (templateBody) ( $.tmpl(templateBody, dataItems).appendTo("#movieListBag"); )); ));
    Parce que dans ce cas, nous recevons le modèle sous forme de texte ; la méthode est utilisée pour l'instancier ; jQuery.tmpl(), dont le premier argument est le texte du modèle reçu.

    Oui, méthode jQuery.tmpl() est utilisé pour instancier à la fois les modèles mis en cache par leur nom et les modèles spécifiés sous forme de texte (tradition !..) - cependant, il est suffisamment « intelligent » pour les distinguer les uns des autres.

    Si vous devez charger plusieurs modèles associés, vous pouvez utiliser la bibliothèque AttendreSync(voir « Synchronisation des appels asynchrones. WaitSync ») ou écrivez votre propre synchroniseur (un exemple de code complet se trouve dans le fichier) :

    $(function () ( var ws = new WaitSync(function () ( $.tmpl("movieTmpl", dataItems).appendTo("#movieListBag"); )); $.ajax(( cache: false, url: " Templates/MovieTmpl.htm", succès : ws.wrap("MovieTmpl", function (templateBody) ( $.template("movieTmpl", templateBody); )), erreur : ws.wrap("MovieTmpl", function () ( alert("Erreur de chargement de MovieTmpl.htm!"); $.ajax(( cache : false, url : "Templates/ActorsTmpl.htm", succès : ws.wrap("ActorsTmpl", fonction (templateBody) ( $.template("actorsTmpl", templateBody); )), erreur : ws.wrap("ActorsTmpl", function () ( alert("Erreur de chargement de ActorsTmpl.htm!"); )) ));
    Veuillez noter que dans ce cas, le modèle acteursTmpl appelé par son nom (fichier Modèles\MovieTmpl.htm):

    Réalisateur : $(réalisateur)
    Casting : ((tmpl(acteurs, (dernier : acteurs)) "acteursTmpl"))
    Année : $(année)

    Mise à jour dynamique Dans la dernière section de la partie pratique, je montrerai deux autres scénarios de travail Modèles jQuery- modifier les données associées et remplacer le modèle associé.

    Dans l'exemple ci-dessous, pour chaque film, la possibilité de modifier sa note a été ajoutée (l'exemple de code complet se trouve dans le fichier DynamicUpdate1.htm):

    ...
    Code associé :

    $(function () ( $("#movieTmpl").tmpl(dataItems).appendTo("#movieListBag"); $("#movieListBag").delegate(".rating-button", "click", fonction ( ) ( var item = $.tmplItem(this); item.data.rating += parseInt($(this).attr("x-inc")); item.update(); ));
    Comme vous pouvez le voir, ce code est très similaire au code des signets de la section « Transformation », uniquement lorsque je travaille avec des signets, j'ai accédé à un objet partagé état d'affichage, et ici je travaille avec des données associées à une instance de modèle.

    Dans le navigateur, cet exemple ressemble à ceci :

    L'exemple suivant montre la substitution d'un modèle lié (l'exemple de code complet se trouve dans le fichier DynamicUpdate2.htm):

    ((tmpl "#movieMainTmpl"))

    [Plus...]

    ((tmpl "#movieMainTmpl"))

    Images du film :

    ((chaque image)) ((/chaque))

    [Moins...]


    Ici, j'utilise deux modèles, filmShortTmpl Et filmFullTmpl, dont la partie générale est incluse dans le modèle filmMainTmpl.

    Code associé :

    $(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; item.update());
    Je pense que ce code nécessite quelques explications supplémentaires.

    Pour remplacer un modèle, j'ai besoin d'un lien vers le modèle compilé. Je reçois ces liens en utilisant des appels .modèle(). De plus, parce que échantillon modèle court utilisé pour afficher une liste de films après le chargement de la page, je la stocke dans un cache afin de pouvoir l'instancier par son nom.

    Dans le navigateur, cet exemple ressemble à ceci :

    Conclusion Le code des exemples utilisés dans l'article peut être téléchargé à partir de ce lien.

    Télécharger Modèles jQuery vous pouvez depuis le site Web ASP.NET CDN ou directement depuis le référentiel GitHub :
    Brian Landau « Analyse comparative des bibliothèques de modèles Javascript ».

    Et en conclusion, je voudrais exprimer ma gratitude à Vitaly Dilmukhametov et Denis Gladkikh pour les précieux commentaires formulés lors de la rédaction de l'article.

    Balises : ajouter des balises

    Le 4 octobre 2010, l'annonce de trois plugins jQuery, créés avec le soutien de l'équipe Microsoft, a été publiée. Ces plugins (le plugin jQuery Templates, le plugin jQuery Data Link et le plugin jQuery Globalization) sont désignés comme « Plugins officiellement pris en charge du projet jQuery ».

    Le plugin de modèle est utilisé lorsqu'il est nécessaire d'afficher un objet de données ou un tableau d'objets dans le balisage de la page. Le plugin de liaison de données est nécessaire pour lier des objets avec des éléments de page et modifier les valeurs de manière synchrone. Le plugin de globalisation permet d'afficher des données telles que des chiffres, la date et l'heure, le montant d'argent, etc., sur une page selon le format de la langue actuelle.

    Il convient de noter que l'équipe Microsoft a utilisé sa grande expérience dans ces domaines, tout comme l'équipe du projet jQuery, et avec une interaction bien établie, à mon avis, ils se sont révélés être d'excellents outils pour les développeurs. Pour confirmer mon opinion, je peux ajouter que les développeurs de jQuery ont annoncé l'inclusion de plugins de modèles et de liaison de données dans la bibliothèque principale jQuery déjà dans la version 1.5, et d'un plugin de globalisation dans la version correspondante de jQuery UI. Les plugins n'ont pas encore reçu le statut de version, mais la documentation est déjà en cours de rédaction sur le site. À propos, l'équipe Microsoft a suivi les traditions du développement jQuery et a publié des documents sur le développement de plugins sur github.com, où les descriptions et les codes sources des plugins sont disponibles.

    Dans cet article, je parlerai un peu du plugin de modèle.

    Plugin de modèles jQuery

    Commençons par un exemple simple :

  • $(Nom) ($(ReleaseYear))
    • var films = [ ( Nom : "Le violon rouge", Année de sortie : "1998"), ( Nom : "Eyes Wide Shut", Année de sortie : "1999"), ( Nom : "L'héritage", Année de sortie : "1976") ]; $("#movieTemplate").tmpl(movies) .appendTo("#movieList");

    Ainsi, dans l'exemple, le développeur de la page a décrit un modèle d'affichage d'objets sous forme de balisage (le premier élément scénario), puis j'ai récupéré un tableau d'objets quelque part films et appelé l'instruction pour générer le balisage requis selon le modèle, en prenant les données du tableau d'objets fourni et en ajoutant le résultat à la fin de la liste #listedefilms .
    À la suite de l’exécution du plugin, nous obtiendrons le balisage suivant :

    • Le violon rouge (1998)
    • Les yeux grands fermés (1999)
    • L'héritage (1976)

    Et maintenant au fond de la question.
    Que fait le plugin ?
    Le plugin reçoit en entrée une chaîne de modèle et un ensemble d'objets (ou un objet) qui doivent être générés sous forme de chaîne (ou de balisage) avec formatage.
    Où est-ce appliqué ?
    Ce plugin est principalement utile pour afficher dynamiquement des objets JS sur une page ; les objets peuvent être obtenus de différentes manières, par exemple lors de calculs ou à la suite de certaines actions de l'utilisateur et, bien sûr, l'exemple le plus fréquemment cité est dans le forme de JSON dans la réponse du serveur à une requête AJAX.

    Méthodes de plugin

    .tmpl([ données ], [ options ])
    Obtient le contenu du premier élément sélectionné et l'utilise comme modèle pour la sortie formatée des données spécifiées.
    données– données à sortir vers un modèle (objet ou tableau d'objets).
    choix– extension facultative définie par l'utilisateur sous la forme de paires clé-valeur pour l'objet de sortie dans le modèle.
    jQuery.tmpl (modèle, [ données ], [ options ])
    Utilise le modèle spécifié pour produire une sortie formatée des données spécifiées.
    modèle– un modèle de formatage des données, peut être de l'un des types suivants : une chaîne avec balisage, un élément HTML (y compris dans un wrapper jQuery), une chaîne correspondant au nom d'un modèle préalablement compilé.
    données, options– ont la même signification que ci-dessus
    .tmplItem()
    Renvoie une structure (objet) pour le premier élément sélectionné avec les résultats du moteur de modèle. L'objet renvoyé par la méthode donne accès à :

    • Parties HTML qui composent le modèle
    • unité de données transmises associée
    • au modèle parent si le modèle actuel est imbriqué
    • le modèle actuel utilisé pour la sortie
    • extension définie par l'utilisateur (champs et méthodes) passée au paramètre options de la méthode tmpl()

    Cette méthode est utilisée, par exemple, lorsque, après avoir formaté les données, vous devez savoir quelles données ont été utilisées pour former un certain élément de balisage ou mettre à jour un élément de balisage à l'aide de nouvelles données.
    jQuery.tmplItem (élément)
    Semblable à la méthode .tmplItem, seule la structure avec les résultats du moteur de modèle est recherchée pour l'élément élément(Élément HTML, y compris dans le wrapper jQuery).
    .template([ nom ])
    La méthode crée une version compilée du modèle de formatage à partir du contenu du premier élément sélectionné.
    nom– nom du modèle facultatif, si le nom est spécifié, vous pouvez l'utiliser pour accéder à ce modèle dans une méthode jQuery.tmpl (nom, données, options)
    jQuery.template([ nom, ] modèle)
    La méthode est similaire à celle décrite ci-dessus, seulement ici le modèle est passé en paramètre modèle– cela peut être une chaîne, une chaîne avec balisage, un élément HTML (y compris dans un wrapper jQuery).

    Syntaxe du modèle

    Je décrirai brièvement plusieurs des éléments les plus fondamentaux du modèle ; j'espère décrire le reste plus en détail dans le prochain article (s'il y a une réponse positive à cet article)
    $(fieldNameOrExpression) et ((= fieldNameOrExpression))
    Permet d'insérer la valeur d'un champ (propriété) d'un objet de données dans le modèle ; il peut également être utilisé pour insérer le résultat d'une méthode ou d'une expression js. Par exemple, "$(Nom)"– insérera la valeur du champ obj.Name dans le modèle, et étant donné que Languages ​​​​est un champ de l'objet auquel le tableau est affecté, "$(Langues.longueur)"– insérera la longueur de ce tableau dans le modèle, et enfin, si l'objet a une méthode getLanguages ​​avec deux paramètres, alors "$(getLanguages(Langues, '-'))"– insérera le résultat de cette méthode dans le modèle.
    ((Nom du champ HTMLOuExpression))
    L'élément de modèle $(field) (ou ((= field))) insère la valeur du champ spécifié sous forme de texte dans le résultat, c'est-à-dire S'il y a des balises HTML dans la chaîne, elles seront codées plutôt que converties en balisage. Si vous devez insérer des données dans le modèle sous forme de balisage HTML, vous devez utiliser la syntaxe ((html)) .
    Pour débuter avec le plugin, j'en ai déjà assez dit, je peux seulement ajouter que la syntaxe des templates permet d'insérer des templates imbriqués, des instructions conditionnelles, d'accéder à certains objets JS et jQuery et autre chose... Le reste est matériel pour un prochain article.

    Sources

    L'article a été rédigé sur la base de documents trouvés sur le World Wide Web. Il s'agit principalement d'une traduction de documents officiels. Les originaux peuvent être consultés sur les liens suivants :

    • (exemples tirés de là)
    A propos de l'auteur

    Je m'appelle Andrey Zaitsev, profil sur le forum zandroid

    C'est mon premier article sur ce blog, j'espère, et pas le dernier Un grand merci à Gennady pour l'opportunité de publier et pour ses conseils utiles sur la rédaction et la conception du matériel.

    Exemples

    Exemple 1 : changement dynamique du modèle appliqué

    table ( curseur:pointeur; bordure-collapse:collapse; bordure:2px bleu uni; largeur:300px; marge:8px; ) table tr ( bordure:1px bleu uni; couleur:bleu; couleur d'arrière-plan:#f8f8f8; ) table td ( padding:3px; ) table tr:hover ( couleur:rouge; ) .movieDetail ( background-color:jaune; ) .movieDetail.row1 ( border-bottom:none; ) .movieDetail.row2 ( border-top:none; ) $(Nom) $(Nom)$(Année de sortie)Réalisateur : $(Réalisateur) Cliquer pour les détails:

    var films = [ ( Nom : "Le violon rouge", Année de sortie : " 1998 ", Réalisateur : " François Girard " ), ( Nom : " Eyes Wide Shut ", Année de sortie : " 1999 ", Réalisateur : " Stanley Kubrick " ), ( Nom : « L'Héritage », Année de sortie : « 1976 », Réalisateur : « Mauro Bolognini » ) ]; var élément sélectionné = null ; /* Rendre le summaryTemplate avec les données "movies" */ $("#summaryTemplate").tmpl(movies).appendTo("#movieList"); /* Ajout de gestionnaires onclick pour les éléments de modèle de film à l'aide du modèle de résumé ou de détails */ $("#movieList") .delegate(".movieSummary", "click", function () ( if (selectedItem) ( // Définir le modèle sur l'élément précédemment sélectionné // retour au modèle de résumé selectedItem.tmpl = $("#summaryTemplate").template(); selectedItem.update() ) /* Récupère la structure de données de l'élément de modèle auquel appartient cet élément cliqué. , et faites-en l'élément sélectionné */ selectedItem = $.tmplItem(this); /* Définissez le modèle de cet élément sur le modèle de détail */ selectedItem.tmpl = $("#detailTemplate").template(); (); )).delegate(".movieDetail", "click", function () ( /* Définit le modèle de cet élément sur le modèle de résumé */ selectedItem.tmpl = $("#summaryTemplate").template () ; selectedItem.update(); selectedItem = null);

    Assez complexe et volumineux, il utilise plusieurs méthodes de plugin à la fois, tirées de.

    Exemple 2 : insertion de données avec balisage dans un modèle

    .role (poids de la police : gras ; style de police : italique ;) #movieContainer (padding-left : 8px ;) $(Nom)

    ((Résumé HTML))

    /* Le champ de données Synopsis contient un balisage HTML. */ var movie = ( Nom : "Meet Joe Black", Synopsis : "La faucheuse (Brad Pitt) rend visite à Bill Parrish (Anthony Hopkins)..." ); /* Rendu le modèle avec les données du film. Le modèle utilise la balise de modèle ((html)) pour insérer les données de balisage HTML Synopsis. */ $("#movieTemplate").tmpl(movie) .appendTo("#movieContainer");

    Dans cet exemple, les valeurs de champ de chaîne simple et les valeurs avec balisage sont ajoutées au modèle, extraites d'ici.

    P.S.

    Je n'ai pas décrit les exemples, mais si le public soutient mes initiatives, je peux alors décrire étape par étape quoi, comment et pourquoi, et donner quelques exemples supplémentaires.

    Veuillez poser des questions sur le plugin sur le forum, s'il y a des commentaires spécifiquement sur l'article, commentez ci-dessous.

    Plugin pour implémenter des mots changeants avec divers effets animés. L'effet CSS est adapté à la mise en œuvre de sites promotionnels et de bannières animées.

    Implémentation de la division du contenu de la page en onglets à l'aide d'effets CSS3 animés. Quatre options de conception : onglets horizontaux et verticaux avec divers effets animés.

    3. Curseur jQuery adaptatif basé sur le plugin IMPRESS.JS

    Curseur sympa avec simulation d'effet 3D lors du défilement des diapositives. Lorsque vous augmentez/diminuez la taille de l'écran, la taille de la police, des images et de tous les éléments de la diapositive change, ce qui garantit un affichage correct quelle que soit la taille de l'écran. Un défilement automatique est fourni.

    Solution jQuery pour créer une navigation pratique dans les sections du document sans recharger la page. Chaque rubrique est affichée dans un bloc séparé avec défilement vertical, et la transition entre elles peut se faire soit par un clic de souris, soit par l'utilisation du titre (sur les grands écrans, le titre s'affiche sur le côté gauche, lors de la consultation du site sur un petit écran - en haut du document).

    Implémentation de la navigation dans les contenus sous la forme Liste des catégories → Liste des sections → Contenu des sections. La navigation est accompagnée de divers effets JS.

    Le défilement des diapositives s'effectue avec l'effet Parallax (déplacement des calques à différentes vitesses, créant ensemble un effet 3D). La taille du curseur change proportionnellement à la taille de la fenêtre du navigateur.

    Diaporama avec accompagnement musical. Il est possible de mettre en pause ou de sauter une composition musicale.

    11. Un menu unique utilisant jQuery et CSS

    Lorsque vous sélectionnez un élément de menu, la zone avec son contenu s'agrandit en haut.

    Un menu déroulant horizontal avec un effet jQuery intéressant d'éléments imbriqués apparaissant.

    Un superbe plugin CSS jQuery qui sera un ajout très utile au site Web de tout studio Web ou indépendant. Avec son aide, vous pouvez afficher clairement des exemples de travaux réalisés, répartis par temps. La chronologie elle-même est affichée en bas et le travail terminé est affiché en haut. Pour naviguer entre les tâches, vous pouvez utiliser à la fois l'échelle et les flèches gauche/droite.

    14. Galerie « TouchTouch », optimisée pour l'affichage à partir d'appareils mobiles 15. Curseur d'image CSS3 « Cycle Slider »

    Lorsque vous cliquez sur le nom, une image avec une description apparaît. Seul CSS3 est utilisé.
    Leçon sur la création d'une galerie.

    17. Info-bulles jQuery et CSS3 sympas et colorées

    Info-bulles jQuery dans 7 styles. Facile à connecter et à utiliser dans vos projets.

    S'il y a plus de 5 images dans la galerie, des flèches gauche/droite apparaissent pour naviguer parmi les photos.

    Les diapositives peuvent être non seulement des images, mais également d'autres contenus HTML.

    Plugin pour créer des ombres photoréalistes.

    Nouvelle implémentation du curseur.

    26. Envelopper le texte « Bacon »

    Un effet inhabituel de transfert de texte sur une page vers une nouvelle ligne le long d'une courbe ou d'une ligne donnée avec un certain pas de décalage.

    Le plugin calcule automatiquement la taille de la police pour chaque mot afin que tout le texte occupe la même largeur, quel que soit le nombre de mots dans la ligne.

    28. Choisir le type d'affichage des blocs en utilisant CSS3

    Quatre types d'affichage de blocs : image avec une description sur trois colonnes, image avec une description sur une colonne, images uniquement, description textuelle uniquement. Pour changer le type d'affichage des blocs, vous devez utiliser les icônes en haut.

    La meilleure façon de commencer à découvrir les modèles de données est de commencer à travailler avec eux immédiatement. Les fonctionnalités de base des modèles sont affichées. J'ai inclus le document HTML complet dans cette liste en raison de la façon dont nous configurons les modèles à l'aide de l'élément script, mais je vous montrerai les éléments pertinents dans des exemples ultérieurs.

    Listing 12-3 : Premier exemple de modèle de données Exemple $(document).ready(function () ( var data = [ ( nom : "Astor", produit : "astor", niveau de stock : "10", prix : 2,99 ) , ( nom : "Jonquille", produit : "jonquille", niveau de stock : "12", prix : 1,99 ), ( nom : "Rose", produit : "rose", niveau de stock : "2", prix : 4,99 ), ( nom : "Pivoine", produit : "pivoine", niveau de stock : "0", prix : 1,50 ), ( nom : "Primula", produit : "primula", niveau de stock : "1", prix : 3,12 ), ( nom : "Perce-neige ", produit : "perce-neige", niveau de stock : "15", prix : 0,99 ), ] )); $(nom) : Jacqui's Flower Shop Passer la commande

    Dans les sections suivantes, je vais décomposer l'exemple et expliquer chaque partie. Si les données font partie d'un document, on parle de données intégrées. Une alternative est données supprimées, c'est à ce moment-là que vous recevez les données du serveur séparément du document. Nous aborderons les données distantes plus loin dans ce chapitre, mais cela aborde la prise en charge d'Ajax par jQuery, qui fait l'objet des chapitres 14 et 15.

    Définition des données

    Le point de départ de l’exemple sont les données, qui dans ce cas sont un tableau d’objets, dont chacun décrit une unité distincte de production de fleurs. B montre les expressions correspondantes du document.

    Listing 12-4 : Définition des données de couleur var data = [ ( nom : "Astor", produit : "astor", niveau de stock : "10", prix : 2,99 ), ( nom : "Jonquille", produit : "jonquille", niveau de stock : "12", prix : 1,99 ), ( nom : "Rose", produit : "rose", niveau de stock : "2", prix : 4,99 ), ( nom : "Pivoine", produit : "pivoine", niveau de stock : " 0", prix : 1,50 ), ( nom : "Primula", produit : "primula", niveau de stock : "1", prix : 3,12 ), ( nom : "Perce-neige", produit : "perce-neige", niveau de stock : "15 " , prix : 0,99 ), ];

    Vous exprimez vos données sous la forme d'un ou plusieurs objets JavaScript. La bibliothèque de modèles jQuery est très flexible en ce qui concerne le type d'objets pouvant être utilisés comme données, mais le format affiché dans le modèle est le plus souvent utilisé car il suit le format de données JSON, que j'aborderai au chapitre 14.

    Conseil

    JSON est important car il est souvent utilisé avec Ajax, que j'aborderai dans les chapitres 14 et 15.

    Dans cet exemple, le tableau contient six objets, chacun avec un ensemble de propriétés qui décrivent les produits du fleuriste : nom d'affichage, nom du produit, taille du stock (quantité disponible) et prix.

    Définition du modèle

    Comme vous pouvez l'imaginer, le modèle de données est au cœur de la bibliothèque de modèles de données. Il s'agit d'un ensemble d'éléments HTML contenant des espaces réservés qui correspondent aux aspects des objets de données. B montre le modèle pour cet exemple.

    Encart 12-5 : Définir un modèle de données $(produit).png" /> $(nom) :

    La première chose à remarquer à propos du modèle est qu'il est contenu dans un élément de script avec une valeur d'attribut de type text/x-jquery-tmpl . Nous faisons cela pour empêcher le navigateur d'interpréter le contenu du modèle comme du HTML standard. Ce n’est pas entièrement nécessaire, mais c’est une bonne pratique qui permettra d’éviter de nombreux problèmes potentiels.

    Le deuxième point à noter est que lorsque vous définissez un modèle dans un élément de script, vous attribuerez un nom au modèle à l'aide de l'attribut id. Dans notre cas, le modèle s'appelle flowerTmpl. Vous devez connaître le nom du modèle lorsque vous l'appliquez à vos données.

    Le contenu du modèle sera appliqué aux objets du tableau de données pour créer un ensemble d'éléments HTML pour chaque objet individuellement. Vous pouvez voir que la structure du modèle correspond à l'ensemble d'éléments que j'ai utilisé pour les produits floraux dans les chapitres précédents. La principale différence réside bien sûr dans les morceaux de code que j’ai mis en évidence dans la liste. C'est ce que c'est espaces réservés aux données.

    Lorsque la bibliothèque de modèles traite un modèle, elle remplace tous les espaces réservés de données par les valeurs de propriété de l'objet sur lequel elle travaille. Ainsi, par exemple, la bibliothèque de modèles associera le premier objet du tableau au label $(product) et le remplacera par la valeur de la propriété unit product, c'est-à-dire, dans ce cas, astor . Voici la partie du modèle :

    $(produit).png"/>

    transformé en ceci :

    astor .png"/>

    L'insertion de valeurs de données n'est qu'une des choses que vous pouvez faire avec un modèle. J'expliquerai d'autres possibilités plus tard dans ce chapitre.

    Appliquer un modèle

    Nous aplatissons le modèle en utilisant la méthode tmpl. Cela nous permet de préciser les données que nous souhaitons utiliser et le modèle qui doit leur être appliqué. L'utilisation de cette méthode est montrée.

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

    J'utilise la fonction $jQuery pour sélectionner l'élément qui contient le modèle, puis j'appelle la méthode tmpl sur le résultat, en passant en argument les données que vous souhaitez traiter.

    La méthode tmpl renvoie un objet jQuery standard qui contient les éléments obtenus à partir du modèle. Dans notre cas, je termine cela avec un ensemble d'éléments div, chacun contenant un élément img , label et input qui ont été traités pour l'un des objets de mon tableau de données. J'utilise la méthode appendTo pour insérer l'ensemble complet des enfants pour row1 . Le résultat peut être vu sur.

    Figure 12-2 : Utilisation d'un modèle de données Personnalisation du résultat

    Nous n’avons pas obtenu le résultat complet espéré car tous les produits sont situés sur la même ligne. Mais puisque nous travaillons avec un objet jQuery, nous pouvons faire ce que nous faisions auparavant avec les éléments. Il montre comment cela peut être réalisé en utilisant le résultat de la méthode tmpl.

    Listing 12-7 : Traitement des résultats obtenus à partir du modèle $("#flowerTmpl").tmpl(data) .slice(0, 3).appendTo("#row1").end().end().slice( 3 ).appendTo("#ligne2"); )); $(nom) :

    Dans cet exemple, j'utilise les méthodes slice et end pour affiner et étendre la sélection, et la méthode appendTo pour ajouter des sous-ensembles d'éléments générés à partir du modèle à différentes lignes.

    Notez que j'ai dû appeler la méthode end deux fois de suite pour résoudre le rétrécissement de la sélection provoqué par les méthodes slice et appendTo. C'est très fonctionnel et j'aime généralement utiliser la méthode end pour créer des commandes dans une seule instruction, mais je n'aime pas vraiment la séquence end().end(). Au lieu de cela, je sépare généralement ces séquences en commandes distinctes, comme indiqué dans .

    Listing 12-8 : Séparation d'éléments à l'aide de plusieurs expressions var templResult = $("#flowerTmpl").tmpl(data); templResult.slice(0, 3).appendTo("#row1"); templResult.slice(3).appendTo("#row2");

    Dans tous les cas, vous obtenez le même résultat, c'est-à-dire que le produit est divisé en deux rangées contenant chacune trois fleurs, comme indiqué ci-dessous.

    Figure 12-3 : Ajustement des résultats en fonction de la mise en page
    Correction de la saisie des données

    Une autre méthode peut être utilisée pour corriger les données transmises à la méthode tmpl. Cela montre comment cela peut être fait.

    Listing 12-9 : Utilisation des données pour ajuster les résultats du modèle $(document).ready(function () ( var data = [ ( nom : "Astor", produit : "astor", niveau de stock : "10", prix : 2,99 ), ( nom : "Jonquille", produit : "jonquille", niveau de stock : "12", prix : 1,99), ( nom : "Rose", produit : "rose", niveau de stock : "2", prix : 4,99), ( nom : "Pivoine", produit : "pivoine", niveau de stock : "0", prix : 1,50 ), ( nom : "Primula", produit : "primula", niveau de stock : "1", prix : 3,12 ), ( nom : "Perce-neige", produit : "perce-neige", niveau de stock : "15", prix : 0,99 ), ]; var template = $("#flowerTmpl"); template.tmpl(data.slice(0, 3)).appendTo ( "#row1"); template.tmpl(data.slice(3)).appendTo("#row2" )); $(nom) :

    Dans ce script, j'ai résolu le problème du placement des fleurs en rangées en utilisant le modèle deux fois : une fois pour chaque rangée. J'ai utilisé la méthode slice, de cette façon j'ai pu transmettre à chaque fois un ensemble spécifique d'objets de données au modèle. La technique est différente, mais le résultat est le même que ci-dessus.

    Évaluation des expressions

    Nous ne nous limitons pas uniquement aux valeurs de propriété des objets de données. Vous pouvez placer une expression JavaScript entre les accolades et le moteur de modèle effectuera les calculs et insérera la sortie du modèle dans le code HTML. Contient un exemple.

    Inscription 12-10 : $(nom) :

    Dans ce modèle, j'utilise l'opérateur ternaire JavaScript pour définir l'attribut value de l'élément d'entrée en fonction de la propriété stocklevel. Je place cette expression entre accolades, tout comme je l'ai fait lorsque j'ai inséré directement les valeurs de propriété. Si la propriété stocklevel est supérieure à zéro alors l'attribut value sera défini sur 1 , sinon il sera 0 . Le résultat peut être vu sur. Pour toutes les fleurs sauf la pivoine, la valeur du niveau de stock est supérieure à zéro.

    Figure 12-4 : Évaluation d'une expression dans un modèle

    Cet exemple montre brièvement les fonctionnalités de base d'un modèle : vous combinez des données avec un modèle pour produire des objets DOM, que vous ajoutez ensuite au document à l'aide de jQuery de base. Les valeurs des données peuvent ensuite être utilisées directement ou indirectement dans des expressions pour générer du contenu.

    Avec la sortie de jQuery, la vie est devenue beaucoup plus facile pour les développeurs. Par exemple, nous pouvons facilement faire ce qui suit :

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

    Ce code placera tous les descendants de l'élément avec l'identifiant #someElement dans la balise. Il n’y a rien de mal à de telles opérations ; Cette expression est tout à fait correcte et très pratique dans certaines situations. Mais le code HTML placé dans notre script constitue une violation de la logique structurelle du code. Dans cet exemple simple, cette violation n’est pas significative, mais dans les projets réels, elle est très courante. En règle générale, ce code contient de nombreux fragments HTML intégrés au DOM après réception des données des requêtes AJAX. Ce style peut vite se transformer en quelque chose d’extrêmement illisible.

    L'utilisation de modèles nous permettra d'éliminer cet inconvénient en séparant les fragments HTML des scripts, séparant ainsi la logique du contenu des différents types de code. En cours de route, je ne peux m'empêcher de vous montrer quelques nouvelles fonctionnalités AJAX super intéressantes introduites par jQuery 1.5.

    Commencer

    Dans cet exemple, nous allons développer un widget Twitter qui chargera non seulement nos publications les plus récentes, mais également une liste d'amis et de followers. J'ai choisi Twitter pour cet exemple car il interagit avec des données JSON avec lesquelles il est facile et amusant de travailler.

    Commençons; le widget lui-même sera construit sur la base de la structure HTML suivante :

    jQuery, AJAX et modèles Dan Wellman

    Mari, père, développeur front-end et auteur. Écrit pour Nettuts et Packt Publishing. Travaille pour @designhaus | Fanatique de jQuery

    • Tweets
    • Amis
    • Suiveurs
    Ce widget possède des fonctionnalités super géniales qui nécessitent l'utilisation de JavaScript. Veuillez l'activer pour une meilleure expérience Internet

    Dans cet exemple, nous utilisons HTML5. Pour ce faire, nous avons spécifié un DOCTYPE simplifié et un élément méta. Vous remarquerez peut-être également dans le code une connexion aux feuilles de style, qui sera décrite dans quelques minutes. Afin de prendre en charge la version actuelle d'IE8 et inférieure, nous utilisons des commentaires conditionnels sur le plugin spécial html5shiv.

    Utilisation de côté

    Très probablement, ce widget ressemblera à une barre latérale et affichera le contenu de l'utilisateur Twitter spécifié. Dans cette optique, j'ai décidé de mettre le contenu dans un fichier . Afin d'accéder facilement à cet élément, nous lui définirons un identifiant.

    En parlant de marquages. Tous les titres des publications de l'utilisateur de Twitter seront inclus dans la balise, et l'image et tout le reste seront inclus dans la balise

    Vous pouvez modifier cela selon vos préférences lors de l'ingénierie inverse de cet exemple. Nous pourrions obtenir toutes les données requises via JSON, ce que nous ferons, cependant, s'il y a un retard dans le processus de chargement, le visiteur verra de nombreux blocs vides. Il est donc préférable pour nous d'attendre la fin du téléchargement, puis de remplir les blocs.

    Nous aurons également des onglets sur notre page pour basculer entre les listes de messages, d'amis et d'abonnés. Tous seront entourés de balises

    © Copyright 2024, Maîtrise PC - Internet. Skype. Réseaux sociaux. Leçons Windows