没有合适的资源?快使用搜索试试~ 我知道了~
tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大的话不如用ui.tabs,文档和代码规范上都是可靠的因此,自制一个简洁的tabs插件还是有必要的在设
资源推荐
资源详情
资源评论
一步一步制作一步一步制作jquery插件插件Tabs实现过程实现过程
tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么
只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs
发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,
不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大的话不如用
ui.tabs,文档和代码规范上都是可靠的因此,自制一个简洁的tabs插件还是有必要的在设计之前,先整理好思路,实现tabs,
自动轮换,ajax等主要功能,然后是dom的排列形式,这里采用传统的
<div id=”tabs”>
<ul>
<li><a href=”#tabs1″>tabs1</a></li>
<li><a href=”#tabs2″ rel=”ajax.htm”>tabs2</a></li>
</ul>
<div id=”tabs1″>Hello World!</div>
<div id=”tabs2″></div>
</div>
一个li对应一个div的方式,当ajax时,添加一个a的rel属性,并将内容写入对应的div中,再去掉rel属性,这样就只请求服务器
一次,接下来都是div已经写入的内容了
我这里没有使用cookie,可以结合jquery.cookie插件,这样即使用户关闭网页下次再打开,也不用请求服务器了
一,首先写个jquery插件的闭包,园子里这两天有个朋友写了javascript的闭包概念,挺好的,有兴趣的朋友去看看
代码如下:
(function ($) {
//code here
})(jQuery);
二,插件命名,这里命名为aTabs,这样绑定的时候可以用$(…).aTabs(),本人英文名Allen,所以用a字头命名了~
代码如下:
$.fn.aTabs = function (options) {
//api
//main function
}
三,把想好的功能写成API,供外部修改
代码如下:
$.fn.aTabs.defaults = {
firstOn: 0,
className: ‘selected’,
eventName: ‘all’, //click,mouserover,all
loadName: ‘加载中…’, //ajax等待字符串
fadeIn: ‘normal’,
autoFade: false,
autoFadeTime: 3
};
var opts = $.extend({}, $.fn.aTabs.defaults, options); //这里可以将外部输入的代替掉默认的值,$.extend作用详见 <A
href=”http://api.jquery.com/jQuery.extend/”>http://api.jquery.com/jQuery.extend/</A>,看不懂英文的直接看其中的例子就行
四,编写主体功能,说明在代码中看注释
代码如下:
return this.each(function () { //这里为每个绑定dom插件
var target = $(this);
var div = target.children().not(“ul,span”); //所有的tabs显示体div
var tabs = target.find(‘ul:eq(0) li’); //所有的tabs头部索引
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//自动轮换用
if (typeof (index) == “number”) {
if (li.find(“a”).attr(“rel”)) ajax(div, li);
$(div[index]).stop(true,true).fadeIn(opts.fadeIn);
tabs.stop(true, true).removeClass(opts.className);
$(tabs[index]).stop(true, true).addClass(opts.className);
资源评论
weixin_38550146
- 粉丝: 0
- 资源: 882
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功