Como criar seu próprio template HTML usando jQuery?

Este artigo é sobre como criar um modelo HTML usando jQuery.

Vamos saber sobre o jQuery

O jQuery é uma biblioteca JavaScript rápida, pequena e rica em recursos. Ele torna as coisas como passagem e manipulação de documentos HTML, manipulação de eventos, animação e Ajax muito mais simples, com uma API fácil de usar que funciona em vários navegadores. Com uma combinação de versatilidade e extensibilidade, a jQuery mudou a maneira como milhões de pessoas escrevem JavaScript.

Vamos conhecer o template da jQuery

jQuery Template nos dá uma opção ou

Um exemplo básico de modelos jQuery

Agora criamos uma página simples usando modelos jQuery. Nós só usaremos o plugin jQuery. Neste exemplo, mostraremos como criar um modelo e renderizar o conteúdo do JSON.

Exigência

Vamos nos entender o requisito primeiro. Suponha que temos que criar uma página da Web como o site KnowBand para vender os módulos para a plataforma de e-commerce como Opencart, Prestashop, etc. Temos alguns módulos de e-commerce ou plug-in que queremos listar na KnowBand.

[{"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 \ / guia-de-produto-prestashop "," preço ":" $ 25 "}, {" nome ":" Prestashop Mobile App builder "," image_url ":" https: \ / \ / www.knowband.com \ / imagem \ / data \ / Plugin% 20Logo \ /Mobile-app-prestashop-plugin-500-X-500.jpg ", "module_url": "https: \ / \ / www.knowband.com \ / prestashop-mobile-app-builder", "price": "$ 30"}, {"nome": "Gerenciador de Devoluções - Extensões do Magento", "image_url": "https: \ / \ / www.knowband.com \ / imagem \ / data \ / Plugin% 20Logo \ /return-manager.png", "module_url": "https: \ / \ / www.knowband .com \ / magento-return-manager "," preço ":" $ 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-notifications " , "price": "$ 43"} ]

Nós temos dois caminhos para fazer um jQuery

  1. Usando a tag de script HTML

    Neste método, escreveremos código HTML na tag de script. O código completo é dado abaixo:

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

Nós criamos

var temp = $ .trim ($ ('# blog'). html ()); // Carregará todo o conteúdo da tag de script #blog em uma variável temporária. var x = temp.replace (/ {{nome}} / ig, obj.name); // Substituiu a variável curinga {{name}} pelos dados correspondentes do JSON. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Substituiu a variável curinga {{image_url}} pelos dados correspondentes do JSON. x = x.replace (/ {{price}} / ig, obj.price); // Substituiu a variável curinga {{price}} pelos dados correspondentes do JSON. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Substituiu a variável curinga {{module_url}} pelos dados correspondentes do JSON. $ ('. container'). append (x); // anexou o conteúdo ao contêiner div.
  1. Usando a técnica Placeholder

Nesta técnica, vamos anexar o conteúdo no HTML depois de preencher os dados usando a técnica do marcador de posição do jQuery. O código completo é dado abaixo:

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

No exemplo acima, usamos `(back-tick) como literal de modelo

Resumo

Para saber mais sobre os Templates do jQuery, recomendo que você consulte a documentação dos Templates do jQuery no site oficial do 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 *