jquery模板_创建jQuery模板–使用实践

cuketao5066

于 2020-08-03 09:59:43 发布

阅读量1.2k

点赞数

文章标签： js html css jquery python ViewUI

原文链接：https://www.script-tutorials.com/jquery-templates-practice-of-using/

版权

本文介绍了如何使用jQuery模板来格式化Ajax获取的数据或预定义数据。通过一个包含照片和文章示例，展示了如何创建HTML、CSS和jQuery代码，并演示了如何在运行时切换模板。

摘要由CSDN通过智能技术生成

jquery模板

jQuery Templates – practice of using. Today we will talk about jQuery. I going to provide you with basic information to start working with jQuery templates. jQuery templates can help you with formatting data retrieved with an Ajax call (as example). Or, we can use already predefined data. Our example will consist of 2 parts. First one will wrap data as set of photos. Second one – at set of articles. Also, today I will show you (in our example) how to change templates on-fly.

jQuery模板–使用实践。今天我们将讨论jQuery。我将向您提供基本信息，以开始使用jQuery模板。 jQuery模板可以帮助您格式化通过Ajax调用检索的数据(例如)。或者，我们可以使用已经预定义的数据。我们的示例将包括2部分。第一个将数据包装为照片集。第二篇–文章集。另外，今天，我将向您展示(在我们的示例中)如何即时更改模板。

现场演示

[sociallocker]

[社交储物柜]

下载结果

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are full html code of our result gallery. Here are you can see 2 main DIV objects with ID`s: gallery and articles. First one will transformed into gallery, second one – into list of articles.

这是结果库的完整html代码。在这里，您可以看到ID为s的2个主要DIV对象：图库和文章。第一个将转换为画廊，第二个将转换为文章列表。

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>jQuery Templates | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <h2>Photo gallery example</h2>
            <div class="gallery" id="gallery"></div>
            <hr />
            <h2>Articles</h2>
            <div class="articles" id="articles"></div>
        </div>
        <footer>
            <h2>jQuery Templates (article)</h2>
            <a href="https://www.script-tutorials.com/jquery-templates-practice-of-using/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>jQuery Templates | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">&l