zepto.js按需載入模板對象

版權聲明：本文爲博主原創文章，未經博主贊成不得轉載。 https://blog.csdn.net/Joyhen/article/details/34412103

Zepto.js 是支持移動WebKit瀏覽器的JavaScript框架，具備與jQuery兼容的語法。

2-5k的庫。經過不錯的API處理絕大多數的基本工做。這裏要說說它的load方法，原型是：

load(url, function(data, status, xhr){ ... })  ⇒ self

其描寫敘述這樣說道：

Set the html contents of the current collection to the result of a GET Ajax call to the given URL. Optionally, a CSS selector can be specified in the URL, like so, to use only the HTML content matching the selector for updating the collection:

$('#some_element').load('/foo.html #bar')

If no CSS selector is given, the complete response text is used instead.

Note that any JavaScript blocks found are only executed in case no selector is given.

如下舉個樣例看小下效果：

先爆個照:
給左側的list一個click事件。載入模板到右側的請求設置中

$(".sideNav a").click(function (event) {
        event.preventDefault();
        $(this).addClass('active').parent().siblings().find('a').removeClass('active');
        $('.jNice fieldset').load('html/' + $(this).attr('href').replace('#', '') + '.html');
    });

個人html目錄中demo模板例如如下：

<p><label>請求地址:</label><input type="text" class="text-long"
    value="http://192.168.1.200:5088/yykapp.ashx" style=" width:600px;" id="txturl" /></p>
<p><label>方法類型:</label><input type="text" class="text-medium" id="txttype" /></p>
<p><label>請求參數:</label><textarea rows="1" cols="1" style=" width:600px;" id="txtxml"></textarea></p>
<input type="button" id="btnSend" value="提交請求" />

好的，效果例如如下：

注意，請求的地址後面可以加入id對象，這個id對象是指，相應的請求url頁面的dom對象。比方我要改動下demo的模板內容

如下咱們更改下載入對象的代碼，在地址後面加入一個id對象：

$('.jNice fieldset').load('html/' + $(this).attr('href').replace('#', '') + '.html #kkk');

注意中間有一個逗號。效果例如如下：

這個時候載入進來的也是整個的demo頁面代碼。僅僅只是填充到咱們的選擇器對象的內容是 url地址後面的標籤對象。注意，包含id對象自己：