Comment créer votre propre modèle HTML avec jQuery?

Cet article concerne la création d'un modèle HTML à l'aide de jQuery.

Connaissons le jQuery

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Il simplifie considérablement la navigation et la manipulation de documents HTML, la gestion d'événements, l'animation et Ajax grâce à une API simple à utiliser qui fonctionne sur une multitude de navigateurs. Avec une combinaison de polyvalence et d'extensibilité, jQuery a changé la façon dont des millions de personnes écrivent JavaScript.

Connaissons le modèle jQuery

jQuery Template nous donne une option ou

Un exemple de base de modèles jQuery

Maintenant, nous créons une page simple en utilisant des modèles jQuery. Nous n'utiliserons que le plugin jQuery. Dans cet exemple, nous allons vous montrer comment créer un modèle et restituer le contenu à partir du fichier JSON.

Exigence

Nous allons d'abord comprendre l'exigence. Supposons que nous devions créer une page Web telle que KnowBand pour vendre les modules de la plate-forme de commerce électronique tels que Opencart, Prestashop, etc. Nous avons quelques modules de commerce électronique ou plugins que nous souhaitons répertorier sur KnowBand.

[{"name": "Onglets de produit - PrestashopAddons", "image_url": "https: \ / \ / www.knowband.com \ / image \ / data \ / Plugin% 20Logo \ / Produit-Tabs-logo-1000- x-1000.jpg "," module_url ":" https: \ / \ / www.knowband.com \ / prestashop-product-tabs "," price ":" $ 25 "}, {" name ":" Prestashop Mobile Générateur d'applications "," image_url ":" https: \ / \ / www.knowband.com \ / image \ / data \ / Plugin% 20Logo \ /Mobile-app-prestashop-plugin-500-X-500.jpg ", "module_url": "https: \ / \ / www.knowband.com \ / prestashop-mobile-app-builder", "price": "$ 30"}, {"name": "Gestionnaire de retours - Extensions Magento", "image_url": "https: \ / \ / www.knowband.com \ / image \ / data \ / Plugin% 20Logo \ /return-manager.png", "module_url": "https: \ / \ / www.knowband .com \ / magento-return-manager "," price ":" $ 50 "}, {" name ":" Notification Web Push - PrestashopAddons "," image_url ":" https: \ / \ / www.knowband.com \ / image \ / data \ / Plugin% 20Logo \ /Web-Push-Notification-plugin.jpg "," module_url ":" https: \ / \ / www.knowband.com \ / prestashop-web-push-notifications " , "prix": "$ 43"} ]

Nous avons deux façons de faire un jQuery

  1. En utilisant la balise de script HTML

    Dans cette méthode, nous écrirons du code HTML dans la balise script. Le code complet est donné ci-dessous:

<html>
    <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
        </head>
        <body>
            <div class="container">
                <script id="blog" type="template">
                    <div class="col-md-3">
                        <a href="{{module_url}}">
                            <div class="thumbnail">
                                <imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">{{price}}</p>
                                    <p>{{name}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </script>
            </div>
            <script>
            $(function () {
                varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
                var temp = $.trim($('#blog').html());
                $.each(knoband_data, function (index, obj) {
                    var x = temp.replace(/{{name}}/ig, obj.name);
                    x = x.replace(/{{image_url}}/ig, obj.image_url);
                    x = x.replace(/{{price}}/ig, obj.price);
                    x = x.replace(/{{module_url}}/ig, obj.module_url);
                    $('.container').append(x);
                });
            });
        </script>
        </body>
    </html>

Nous avons créé

var temp = $ .trim ($ ('# blog'). html ()); // Il va charger tout le contenu de la balise #blog script dans une variable temporaire. var x = temp.replace (/ {{name}} / ig, obj.name); // Remplacement de la variable générique {{name}} par les données correspondantes du fichier JSON. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Remplacement de la variable générique {{image_url}} par les données correspondantes du fichier JSON. x = x.replace (/ {{price}} / ig, obj.price); // Remplacement de la variable générique {{price}} par les données correspondantes du fichier JSON. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Remplacement de la variable générique {{module_url}} par les données correspondantes du fichier JSON. $ ('. conteneur'). append (x); // a ajouté le contenu au conteneur div.
  1. En utilisant la technique Placeholder

Dans cette technique, nous allons ajouter le contenu dans le code HTML après avoir renseigné les données à l'aide de la technique de paramètre fictif jQuery. Le code complet est donné ci-dessous:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
    </head>
    <body>
        <div class="container"></div>
        <script>
         $(function() {
             varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
             $.each(knoband_data, function(index, obj) {
                $('.container').append(
                    `<div class="col-md-3">
                        <a href="${obj.module_url}">
                            <div class="thumbnail">
                                <imgsrc="${obj.image_url}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">${obj.price}</p>
                                    <p>${obj.name}</p>
                                </div>
                            </div>
                        </a>
                    </div>`
                );
            });
         });
        </script>
    </body>
</html>

Dans l'exemple ci-dessus, nous avons utilisé `(back-tick) en tant que modèle littéral

Résumé

Pour en savoir plus sur les modèles jQuery, je vous recommande de consulter la documentation relative aux modèles jQuery sur le site Web officiel de jQuery.


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *