jquery自定義插件結(jié)合baiduTemplate.js實(shí)現(xiàn)異步刷新(附源碼)
上一篇記錄了BaiduTemplate模板引擎使用示例(附源碼),在此基礎(chǔ)上對(duì)使用方法進(jìn)行了封裝
自定義插件jajaxrefresh.js 代碼如下:
//閉包限定命名空間 (function ($) { $.fn.extend({ "ajaxrefresh": function (options) { //檢測(cè)用戶(hù)傳進(jìn)來(lái)的參數(shù)是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認(rèn)參數(shù) var $this = $(this); //獲取當(dāng)前dom 的 jQuery對(duì)象 $.ajax({ url: opts.url, dataType: "json", success: function (data) { var template = opts.template; $.ajax({ url: template, dataType: "html", success: function (val) { $this.html(baidu.template(val, data)); } }); } }); } }); //默認(rèn)參數(shù) var defaluts = { template: '', url:'' }; //私有方法,檢測(cè)參數(shù)是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; } })(window.jQuery);
調(diào)用方法:
$(document).ready(function () { $("#list").ajaxrefresh({ template: 'templates/list.html', url: 'data/data.txt' }); });
預(yù)覽效果:
源碼下載:http://xiazai.jb51.net/201612/yuanma/baiduTemplate-v1.1_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
基于JavaScript實(shí)現(xiàn)活動(dòng)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)活動(dòng)倒計(jì)時(shí)效果,距離活動(dòng)時(shí)間還剩多少,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JS實(shí)現(xiàn)的檢驗(yàn)身份證格式并輸出出生日期,年齡,性別,出生地示例
這篇文章主要介紹了JS實(shí)現(xiàn)的檢驗(yàn)身份證格式并輸出出生日期,年齡,性別,出生地,涉及javascript字符串遍歷、運(yùn)算、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05javascript輸入CD-KEY自動(dòng)分割的代碼
開(kāi)發(fā)過(guò)程中用寫(xiě)的一個(gè)腳本,記錄下來(lái)以備后用與他用,其中attributes["max"].nodeValue是取HTML自定義的 max屬性(兼容Firefox和IE)2010-10-10深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
這篇文章主要介紹了深入探討JavaScript、JQuery屏蔽網(wǎng)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制,需要的朋友可以參考下2014-06-06Typescript中extends關(guān)鍵字的基本使用
extends表示具體的泛型類(lèi)型只能是object類(lèi)型,某個(gè)變量如果能斷言成object類(lèi)型[變量as object],那么這個(gè)變量的類(lèi)型符合T extends object,下面這篇文章主要給大家介紹了關(guān)于Typescript中extends關(guān)鍵字基本使用的相關(guān)資料,需要的朋友可以參考下2022-08-08vue 自定義指令directive的使用場(chǎng)景
這篇文章主要詳細(xì)介紹了vue 自定義指令directive的使用場(chǎng)景,文中有詳細(xì)的代碼示例,感興趣的小伙伴歡迎閱讀2023-04-04JavaScript實(shí)現(xiàn)酷炫的鼠標(biāo)拖尾特效
這篇文章主要為大家介紹了通過(guò)JavaScript實(shí)現(xiàn)的一個(gè)超級(jí)好看的鼠標(biāo)拖尾特效,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JavaScript有一定的幫助,感興趣的可以學(xué)習(xí)一下2021-12-12關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解
下面小編就為大家?guī)?lái)一篇關(guān)于javascript中限定時(shí)間內(nèi)防止按鈕重復(fù)點(diǎn)擊的思路詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)數(shù)字時(shí)鐘效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02