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

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

Faisons connaissance avec jQuery

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Cela simplifie considérablement la navigation et la manipulation de documents HTML, la gestion des événements, l’animation et Ajax avec une API facile à 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.

Faisons connaissance avec le modèle jQuery

jQuery Template nous donne une option ou un support pour afficher et manipuler le contenu sur le navigateur. En utilisant le modèle jQuery, nous pouvons restituer la chaîne JSON aux éléments HTML. Prenons un exemple simple, nous pouvons utiliser jQuery Template pour afficher un ensemble d’enregistrements que nous avons obtenus à partir d’une requête Ajax.

Un exemple de base de modèles jQuery

Nous créons maintenant une page simple à l’aide de 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 JSON.

Exigence

Comprenons d’abord l’exigence. Supposons que nous devions créer une page Web comme le site Web KnowBand pour vendre les modules de la plate-forme de commerce électronique comme Opencart, Prestashop, etc. Nous avons des modules ou plugins de commerce électronique que nous voulons répertorier sur le site KnowBand. Ainsi, sur la page de liste, nous afficherons le nom, l’image et le prix du module. Nous utiliserons la chaîne JSON ci-dessous pour répertorier les données :

[ { "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": "Application mobile Prestashop constructeur", "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 - 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": "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", "prix ": "$43" } ]

Nous avons deux manières de créer un jQuery�Template :

  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éé une vignette à l’intérieur de la balise de script, c’est-à-dire la balise de script #blog, et elle a été utilisée comme modèle. Dans le code ci-dessus, nous avons utilisé {{ }} pour les variables génériques. Comprenons en fait ce que nous avons fait dans le code ci-dessus :

var temp = $.trim($('#blog').html()); // Il chargera tout le contenu de la balise de script #blog 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 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 JSON. x = x.replace(/{{prix}}/ig, obj.prix); // Remplacement de la variable générique {{price}} par les données correspondantes du 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 JSON. $('.container').append(x); // a ajouté le contenu au conteneur div.
  1. En utilisant la technique Placeholder

Dans cette technique, nous ajouterons le contenu dans le HTML après avoir rempli les données à l’aide de la technique d’espace réservé jQuery. Le code complet est donné ci-dessous :

    
        
        
    
    
        
        
         $(function() {
             varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%3.3.7Logo\/Product-Tabs-logo-3.2.1-x-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$1000"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%1000Logo\/Mobile-app-prestashop-plugin-25-X-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$500"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%500Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$30"
                        },
                        {
                            "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": "$50"
                        }
                    ];
             $.each(knoband_data, function(index, obj) {
                $('.container').append(
                    `
                        
                            
                                
                                
                                    ${obj.price}
                                    ${obj.name}
                                
                            
                        
                    `
                );
            });
         });
        
    

Dans l’exemple ci-dessus, nous avons utilisé ` (back-tick) comme littéral de modèle et ${ } comme espace réservé. Lorsque nous comparons la méthode 1 à la méthode 2, nous pouvons facilement dire que le modèle littéral et l’espace réservé facilitent notre tâche. Dans cet exemple, nous avons écrit le code du modèle dans une boucle et remplacé nos espaces réservés par ses données correspondantes.

Récapitulatif

Pour en savoir plus sur les modèles jQuery, je vous recommande de consulter la documentation des 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 *