Wie erstelle ich meine eigene HTML-Vorlage mit jQuery?

In diesem Artikel geht es ausschließlich um das Erstellen von HTML-Vorlagen mit jQuery.

Lassen Sie uns etwas über die jQuery wissen

jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Dinge wie das Durchsuchen und Bearbeiten von HTML-Dokumenten, die Ereignisbehandlung, die Animation und Ajax werden durch eine benutzerfreundliche API, die in einer Vielzahl von Browsern funktioniert, viel einfacher. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise verändert, wie Millionen von Menschen JavaScript schreiben.

Informieren Sie uns über die jQuery-Vorlage

jQuery Template gibt uns eine Option oder

Ein einfaches Beispiel für jQuery-Vorlagen

Jetzt erstellen wir eine einfache Seite mit jQuery-Vorlagen. Wir werden nur das jQuery-Plugin verwenden. In diesem Beispiel zeigen wir Ihnen, wie Sie eine Vorlage erstellen und den Inhalt von JSON rendern.

Anforderung

Lassen Sie uns zuerst die Anforderung verstehen. Angenommen, wir müssen eine Webseite wie die KnowBand-Website erstellen, um die Module für die E-Commerce-Plattform wie Opencart, Prestashop usw. zu verkaufen. Wir haben einige E-Commerce-Module oder Plugins, die wir auf KnowBand auflisten möchten

[{"name": "Produkttabs - PrestashopAddons", "image_url": "https: \ / \ / www.knowband.com \ / image \ / data \ / Plugin% 20Logo \ / Produkttabs-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-Benachrichtigung - 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"} ]

Wir haben zwei Möglichkeiten, um eine jQuery zu erstellen

  1. Mit dem HTML-Skript-Tag

    Bei dieser Methode schreiben wir HTML-Code in das Skript-Tag. Der vollständige Code ist unten angegeben:

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

Wir haben erschaffen

var temp = $ .trim ($ ('# blog'). html ()); // Der gesamte Inhalt des #blog-Skript-Tags wird in eine temporäre Variable geladen. var x = temp.replace (/ {{name}} / ig, obj.name); // Die Platzhaltervariable {{name}} wurde durch die entsprechenden Daten aus dem JSON ersetzt. x = x.replace (/ {{image_url}} / ig, obj.image_url); // Ersetzte die Platzhaltervariable {{image_url}} durch entsprechende Daten aus dem JSON. x = x.replace (/ {{price}} / ig, obj.price); // Die Platzhaltervariable {{price}} wurde durch die entsprechenden Daten aus dem JSON ersetzt. x = x.replace (/ {{module_url}} / ig, obj.module_url); // Ersetzte die Platzhaltervariable {{module_url}} durch entsprechende Daten aus dem JSON. $ ('. container'). append (x); // Hängte den Inhalt an den Container div an.
  1. Mit der Placeholder-Technik

In dieser Technik werden wir den Inhalt im HTML anhängen, nachdem wir die Daten mit der jQuery-Platzhaltertechnik aufgefüllt haben. Der vollständige Code ist unten angegeben:

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

Im obigen Beispiel haben wir `(Back-Tick) als Template-Literal verwendet

Zusammenfassung

Um mehr über jQuery-Vorlagen zu erfahren, empfehle ich, die Dokumentation für jQuery-Vorlagen auf der offiziellen jQuery-Website zu lesen.


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 *