十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天看了一下 Jquery权威指南这本书的插件,提到Jquery插件分为两种 1 对象级别插件 是给Jquery添加对象方法 调用方法是 $.fn.方法名 2 类级别插件 即给Jquery添加新的全局函数 相当于给Jquery类本生添加方法,典型的是 $.AJAX(); 今天也写了一个tab插件 支持鼠标移动和 点击 当然目前常见的只有这两种 当然如果有其他的事件 你可以自定义事件!我用的是对象级别写插件的 对象级别插件 调用的方式是:$("#ID名称"或者"类名称").插件名称({switchingMode:"click"}); 或者 mouseover , 我引用结构还是以前的tab选显卡的结构 样式也是一样的!
成都创新互联主要从事网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务姑苏,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
下面是HTML结构及CSS
无标题文档
- 选项卡1
- 选项卡2
- 选项卡3
1111 222 3333
调用的方式 如上图所示:
JS
- // JavaScript Document
- /**
- 用法:$("#ID名称").tabsPlug({switchingMode:"click"});
- 参数解释:switchingMode是面板切换的模式,如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。
- 整体tabs骨架不变,依然是常用的结构如下:
- 选项卡1
- 选项卡2
- 选项卡3
1111 222 3333- 样式:此样式为默认无任何效果样式,可根据需要修改插件样式
- 插件分为 1 对象级别插件 2 类别插件
- 对象级别插件 调用的方式是:$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover
- 类别插件 : $.定义的方法();
- 下面是对象级别插件
- */
- ;(function($){
- $.fn.extend({
- "tabsPlug" : function(options){
- var defaults = {switchingMode : "click"}; //定义默认切换模式 为click 也可以自定义mouseover
- var opts = $.extend({},defaults,options); // 将defaults 和 options 参数合并到{}
- var obj = $(this);
- var currentIndex = 0;
- $(".tab li:first",obj).addClass("on");
- /* obj对象为当前调用该插件方法的对象。而后面bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。 */
- $(".tab li").bind(opts.switchingMode,function(){
- if(currentIndex != $(".tab li",obj).index($(this))){
- currentIndex = $(".tab li",obj).index($(this));
- $(".tab li",obj).removeClass("on")
- $(this).addClass("on");
- $(".p-content",obj).eq(currentIndex).show().siblings().hide();
- }
- });
- return $(this);
- }
- })
- })(jQuery);
在页面上这样调用 是:$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover 默认情况下 $("#ID名称").插件名称() 即调用点击 当要调用鼠标移上去时候 这样调用就可以了 $("#ID名称").插件名称({switchingMode:"mouseover"}); 其实对象级别插件的写法是 ;(function($){$.fn.extend({})})(jQuery) 这样的结构 当然还有一种写法 是 $.fn.插件名称!代码里面都有注释:下面我们来分析下这个插件代码:
1 ;(function($){$.fn.extend({})})(jQuery) 这样的固定结构 不用说啊 不明白的地方可以google下 然后定义一个函数 并且带了一个参数 目地是为了自定义事件类型!
2 var defaults = {switchingMode : "click"};这句话意思是 定义默认类型是点击事件 $("#ID名称").插件名称() 这样调用 默认情况下是点击 如果想要其他事件 可以这样调用 是:$("#ID名称").插件名称({switchingMode:"mouseover或者其他事件类型"});
3 var opts = $.extend({},defaults,options); 这句话代码的意思是 将defaults和options参数合并到{}这里面来 然后赋值给一个变量 同时改变了{}这里面的 结构.
4 $(".tab li").bind(opts.switchingMode,function(){
if(currentIndex != $(".tab li",obj).index($(this))){
currentIndex = $(".tab li",obj).index($(this));
$(".tab li",obj).removeClass("on")
$(this).addClass("on");
$(".p-content",obj).eq(currentIndex).show().siblings().hide();
}
}); 这样一段代码 bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。接下来代码就不用多说啊!