Jak utworzyć własny szablon HTML za pomocą jQuery?

Ten artykuł dotyczy tworzenia szablonu HTML za pomocą jQuery.

Powiedzmy o jQuery

jQuery to szybka, mała i bogata w funkcje biblioteka JavaScript. Sprawia, że ​​takie rzeczy jak przechodzenie i manipulowanie dokumentami HTML, obsługa zdarzeń, animacja i Ajax są znacznie prostsze dzięki łatwemu w użyciu interfejsowi API, który działa w wielu przeglądarkach. Dzięki połączeniu wszechstronności i rozszerzalności, jQuery zmieniło sposób, w jaki miliony ludzi piszą JavaScript.

Daj nam znać o szablonie jQuery

Szablon jQuery daje nam opcję lub

Podstawowy przykład szablonów jQuery

Teraz tworzymy prostą stronę za pomocą szablonów jQuery. Będziemy używać tylko wtyczki jQuery. W tym przykładzie pokażemy, jak utworzyć szablon i renderować zawartość z JSON.

Wymaganie

Najpierw zrozummy wymagania. Załóżmy, że musimy utworzyć stronę internetową, taką jak strona KnowBand, aby sprzedawać moduły dla platformy e-commerce, takiej jak Opencart, Prestashop itp. Mamy kilka modułów e-commerce lub wtyczek, które chcemy wyświetlić w KnowBand

[{"name": "Zakładki produktu - 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% 20Logoreturn-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”} ]

Mamy dwa sposoby na utworzenie jQuery

  1. Używając znacznika skryptu HTML

    W tej metodzie wypiszemy kod HTML w tagu skryptu. Pełny kod jest podany poniżej:

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

Stworzyliśmy

var temp = $ .trim ($ ('# blog'). html ()); // Załaduje całą zawartość znacznika skryptu #blog w zmiennej tymczasowej. var x = temp.replace (/ {{name}} / ig, obj.name); // Zastąpiono zmienną wieloznaczną {{name}} odpowiednimi danymi z JSON. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Zastąpiono zmienną wieloznaczną {{image_url}} odpowiednimi danymi z JSON. x = x.replace (/ {{price}} / ig, obj.price); // Zastąpiono zmienną wieloznaczną {{price}} odpowiednimi danymi z JSON. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Zastąpiono zmienną wieloznaczną {{module_url}} odpowiednimi danymi z JSON. $ ('. container'). append (x); // dołączono treść do div kontenera.
  1. Używając techniki Placeholder

W tej technice dołączymy treść do HTML po zapełnieniu danych za pomocą techniki zastępczej jQuery. Pełny kod jest podany poniżej:

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

W powyższym przykładzie użyliśmy `(back-tick) jako literału szablonu

Podsumowanie

Aby dowiedzieć się więcej o jQuery Templates, radzę zapoznać się z dokumentacją szablonów jQuery na oficjalnej stronie 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 *