Come creare il tuo modello HTML utilizzando jQuery?

Questo articolo è interamente dedicato alla creazione di template HTML usando jQuery.

Conosciamo il jQuery

jQuery è una libreria JavaScript veloce, piccola e ricca di funzionalità. Rende molto più semplici le operazioni di attraversamento e manipolazione dei documenti HTML, la gestione degli eventi, l'animazione e Ajax con un'API facile da usare che funziona su una moltitudine di browser. Con una combinazione di versatilità ed estensibilità, jQuery ha cambiato il modo in cui milioni di persone scrivono JavaScript.

Conosciamo il modello jQuery

jQuery Template ci offre un'opzione o

Un esempio di base di modelli jQuery

Ora creiamo una pagina semplice usando i template jQuery. Useremo solo il plugin jQuery. In questo esempio, ti mostreremo come creare un modello e renderizzare il contenuto da JSON.

Requisito

Vediamo prima il requisito. Supponiamo di dover creare una pagina web come il sito Web di KnowBand per vendere i moduli per la piattaforma di e-commerce come Opencart, Prestashop, ecc. Abbiamo alcuni moduli di e-commerce o plug-in che vogliamo elencare su KnowBand

[{"nome": "Schede prodotto- 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 "}, {" nome ":" Prestashop Mobile Generatore di app "," 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", "prezzo": "$ 30"}, {"nome": "Gestore resi - Estensioni 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 "}, {" nome ":" 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-notifiche " , "prezzo": "$ 43"} ]

Abbiamo due modi per creare un jQuery

  1. Usando il tag Script HTML

    In questo metodo, scriveremo il codice HTML nel tag dello script. Il codice completo è riportato di seguito:

<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>

Abbiamo creato

var temp = $ .trim ($ ('# blog'). html ()); // Carica tutto il contenuto del tag script #blog in una variabile temporanea. var x = temp.replace (/ {{nome}} / ig, nome_oggetto); // Sostituita la variabile jolly {{nome}} con i dati corrispondenti dal JSON. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Sostituita la variabile jolly {{image_url}} con i dati corrispondenti dal JSON. x = x.replace (/ {{price}} / ig, obj.price); // Sostituita la variabile jolly {{price}} con i dati corrispondenti dal JSON. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Sostituita la variabile jolly {{module_url}} con i dati corrispondenti da JSON. . $ ( 'Contenitore') append (x); // aggiunto il contenuto al contenitore div.
  1. Usando la tecnica segnaposto

In questa tecnica, aggiungeremo il contenuto nell'HTML dopo aver popolato i dati usando la tecnica segnaposto jQuery. Il codice completo è riportato di seguito:

<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>

Nell'esempio precedente, abbiamo usato `(back-tick) come template letterale

sommario

Per ulteriori informazioni su jQuery Templates, ti consiglio di consultare la documentazione di jQuery Templates sul sito Web ufficiale di jQuery.


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as expert as a PHP developer. He has also expert in database design, server maintenance and their security. He has achieved this goal only in the short span of 2yrs and still looking forward to achieve 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 *