当前位置: 首页 > 编程笔记 >

jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

查锦程
2023-03-14
本文向大家介绍jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码),包括了jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)的使用技巧和注意事项,需要的朋友参考一下

上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装

自定义插件jajaxrefresh.js 代码如下:

//闭包限定命名空间
(function ($) {
 $.fn.extend({
 "ajaxrefresh": function (options) {
 //检测用户传进来的参数是否合法
 if (!isValid(options))
 return this;
 var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
 var $this = $(this); //获取当前dom 的 jQuery对象
 $.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));
 }
 });
 }
 });
 
 }
 });
 //默认参数
 var defaluts = {
 template: '',
 url:''
 };
 //私有方法,检测参数是否合法
 function isValid(options) {
 return !options || (options && typeof options === "object") ? true : false;
 }
})(window.jQuery);

调用方法:

$(document).ready(function () {
 $("#list").ajaxrefresh({ template: 'templates/list.html', url: 'data/data.txt' });
 });

预览效果:

源码下载:http://xiazai.jb51.net/201612/yuanma/baiduTemplate-v1.1_jb51.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍jQuery ajax请求struts action实现异步刷新,包括了jQuery ajax请求struts action实现异步刷新的使用技巧和注意事项,需要的朋友参考一下 这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是

  • 本文向大家介绍jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载),包括了jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法。分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 完整实例代码点击此处本站下载

  • 本文向大家介绍php+jQuery+Ajax简单实现页面异步刷新,包括了php+jQuery+Ajax简单实现页面异步刷新的使用技巧和注意事项,需要的朋友参考一下 页面显示如下:  JQueryAjax.html中的代码如下(用的较为简单的$.post)  ajax.php 在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式  例如将JQueryAjax中的代码修改为

  • 本文向大家介绍Android自定义ListView实现下拉刷新,包括了Android自定义ListView实现下拉刷新的使用技巧和注意事项,需要的朋友参考一下 首先呈上效果图 当今APP,哪个没有点滑动刷新功能,简直就太落伍了。正因为需求多,因此自然而然开源的也就多。但是若想引用开源库,则很麻烦,比如PullToRefreshView这个库,如果把开源代码都移植到项目中,这是件很繁琐的事,如果用依

  • 本文向大家介绍Android自定义控件实现下拉刷新效果,包括了Android自定义控件实现下拉刷新效果的使用技巧和注意事项,需要的朋友参考一下 app开发中下拉刷新是最常接触到的一个功能,也有很多开源的框架,封装的非常棒。前段时间了解了一下ViewDragHelper,遂用它实现了下拉刷新的功能。 大概和我之前的ViewDragHelper之拖动加载(类似淘宝)这篇代码类似。只是做了相关改动。具体

  • 本文向大家介绍jQuery CSS3相结合实现时钟插件,包括了jQuery CSS3相结合实现时钟插件的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了。 效果图如下所示:   简洁代码如下: 完整代码如下: