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
-
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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.
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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.
