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

2024-03-30 09:00:25

上一篇记录了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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

BaiduTemplate模板引擎使用示例（附源码）

1.新建项目,asp.net 空Web应用程序添加data,js,styles,templates文件夹,添加baiduTemplate.js,jquery.js,bootstrap.css 2.添加list.js脚本,代码如下 var data = { "list": [ { "col1": "行1", "col2": "数据2", "col3": "数据3",
jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { $.fn.extend({ "ajaxrefresh": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, optio
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><
基于jQuery实现select下拉选择可输入附源码下载

我们知道,一般select下拉框是只能选择的,不能用来输入内容的.而有时我们会遇到下拉框中没有要选择的信息项或者下拉选项特别多时,我们可以让select变成text,允许用户输入想要的内容,同时还可以在输入的时候将包含关键字的项也列出来,供快速选择. 查看演示效果源码下载本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果.我们来看下如何使用.
基于Jquery制作图片文字排版预览效果附源码下载

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree
基于Jquery实现仿百度百科右侧导航代码附源码下载

先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示源码下载代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
基于jquery实现一个滚动的分步注册向导-附源码

先给大家展示效果图,需要的朋友可以下载源码哦- 查看演示下载源码 HTML 首先要载入jquery库和滚动插件scrollable.js <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="scrollable.js"></script&
基于jquery实现的tab选项卡功能示例【附源码下载】

本文实例讲述了基于jquery实现的tab选项卡功能.分享给大家供大家参考,具体如下: jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到.今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了.用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中.很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕.这一款基于jquery 的
jQuery实现的下雪动画效果示例【附源码下载】

本文实例讲述了jQuery实现的下雪动画效果.分享给大家供大家参考,具体如下: html部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width
jQuery 行级解析读取XML文件（附源码）

最近在做一个项目,因为页面使用了Cookie,所以要判断用户的浏览器是否支持Cookie,并提示用户如何开启浏览器的Cookie功能.同时,整个项目要配置多语言支持,包括中文.越南语.日语和英语,所以必须有语言配置文件.项目中应用jQuery解析读取XML语言配置文件来实现语言的调度.这是jQuery解析读取XML文件功能的测试源码,现拿出来分享.目录结构: main.css文件代码: 复制代码代码如下: @CHARSET "UTF-8"; * { margin: 0px; padd
jQuery实现为控件添加水印文字效果(附源码)

本文实例讲述了jQuery实现为控件添加水印文字效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-text-add-txt-style-codes/ 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>WaterMark

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

相关推荐

随机推荐