¿Cómo crear tu propia plantilla HTML usando jQuery?

Este artículo trata sobre la creación de plantillas HTML usando jQuery.

Vamos a saber sobre la jQuery.

jQuery es una biblioteca de JavaScript rápida, pequeña y con muchas funciones. Hace que cosas como la manipulación y manipulación de documentos HTML, el manejo de eventos, la animación y Ajax sean mucho más simples con una API fácil de usar que funciona en una gran cantidad de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.

Vamos a conocer la plantilla jQuery.

La plantilla jQuery nos da una opción o

Un ejemplo básico de plantillas jQuery.

Ahora creamos una página simple usando plantillas jQuery. Solo usaremos el plugin jQuery. En este ejemplo, le mostraremos cómo crear una plantilla y representar el contenido desde el JSON.

Requisito

Entendamos el requisito primero. Supongamos que tenemos que crear una página web como el sitio web de KnowBand para vender los módulos para la plataforma de comercio electrónico como Opencart, Prestashop, etc. Tenemos algunos módulos o complementos de comercio electrónico que queremos enumerar en 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 \ / prestashop-product-tabs "," price ":" $ 25 "}, {" name ":" Prestashop Mobile Generador de aplicaciones "," 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 " , "precio": "$ 43"} ]

Tenemos dos formas de hacer una jQuery.

  1. Usando la etiqueta de script HTML

    En este método, escribiremos código HTML en la etiqueta de script. El código completo se da a continuación:

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

Hemos creado

var temp = $ .trim ($ ('# blog'). html ()); // Cargará todo el contenido de la etiqueta de script #blog en una variable temporal. var x = temp.replace (/ {{name}} / ig, obj.name); // Reemplazó la variable de comodín {{nombre}} con los datos correspondientes del JSON. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Se reemplazó la variable comodín {{image_url}} con los datos correspondientes del JSON. x = x.replace (/ {{price}} / ig, obj.price); // Reemplazó la variable comodín {{precio}} con los datos correspondientes del JSON. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Reemplazó la variable comodín {{module_url}} con los datos correspondientes del JSON. $ ('. contenedor'). anexar (x); // anexó el contenido al contenedor div.
  1. Usando la técnica de marcador de posición.

En esta técnica, agregaremos el contenido en el HTML después de completar los datos utilizando la técnica de marcador de posición jQuery. El código completo se da a continuación:

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

En el ejemplo anterior, hemos usado `(back-tick) como literal de plantilla

Resumen

Para obtener más información sobre las plantillas de jQuery, le recomiendo que consulte la documentación de las plantillas de jQuery en el sitio web oficial 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 *