乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • 用Jquery写tab插件(支持点击和移动及其他事件)

    今天看了一下 Jquery权威指南这本书的插件，提到Jquery插件分为两种 1 对象级别插件 是给Jquery添加对象方法 调用方法是 $.fn.方法名 2 类级别插件 即给Jquery添加新的全局函数 相当于给Jquery类本生添加方法，典型的是 $.AJAX(); 今天也写了一个tab插件 支持鼠标移动和 点击 当然目前常见的只有这两种 当然如果有其他的事件  你可以自定义事件！我用的是对象级别写插件的 对象级别插件 调用的方式是：$("#ID名称"或者"类名称").插件名称({switchingMode:"click"}); 或者 mouseover , 我引用结构还是以前的tab选显卡的结构 样式也是一样的！

    成都创新互联主要从事网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务姑苏,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

    下面是HTML结构及CSS

     

    1.  
    2.  
    3.  
    4.  
    5. 无标题文档 
    6.  
    7.  
    8. ul,li,div{ margin:0; padding:0;}    
    9. ul,li{ list-style:none;}    
    10. .tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}    
    11. .tab{ background:#F93; overflow:hidden; width:450px;}    
    12. .tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}    
    13. .tab li.on{background:#F60;}    
    14. .tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }    
    15. .tabContent .hide{ display:none;}  
    16.  
    17.  
    18.  
    19.  
    20.  
    21.        
    22.            
    23.             
    24. 选项卡1
      25.    
    25.             
    26. 选项卡2
      27.    
    27.             
    28. 选项卡3
      29.    
    29.            
    30.            
    31.             1111
       
  •             222
    •    
  •             3333
    •    
  •            
  •        
  •   
  •     $("#tabWrap").tabsPlug({switchingMode : "mouseover"});  
  •   
  •  
  •  

    • 调用的方式 如上图所示：

    JS

     

    1. // JavaScript Document 
    2. /**   
    3. 用法：$("#ID名称").tabsPlug({switchingMode:"click"}); 
    4. 参数解释：switchingMode是面板切换的模式，如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。 
    5.  
    6. 整体tabs骨架不变，依然是常用的结构如下： 
    7.   
    8.           
    9.             
    10. 选项卡1
      11.   
    11.             
    12. 选项卡2
      13.   
    13.             
    14. 选项卡3
      15.   
    15.           
    16.           
    17.             1111  
    18.             222  
    19.             3333  
    20.           
    21.       
    22. 样式：此样式为默认无任何效果样式，可根据需要修改插件样式 
    23. 插件分为 1 对象级别插件 2 类别插件  
    24. 对象级别插件 调用的方式是：$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover 
    25. 类别插件 ： $.定义的方法(); 
    26. 下面是对象级别插件  
    27. */ 
    28. ;(function($){  
    29.     $.fn.extend({  
    30.         "tabsPlug" : function(options){  
    31.             var defaults = {switchingMode : "click"}; //定义默认切换模式 为click 也可以自定义mouseover 
    32.             var opts = $.extend({},defaults,options); // 将defaults 和 options 参数合并到{}  
    33.             var obj = $(this);  
    34.             var currentIndex = 0;  
    35.             $(".tab li:first",obj).addClass("on");  
    36.             /* obj对象为当前调用该插件方法的对象。而后面bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。 */ 
    37.             $(".tab li").bind(opts.switchingMode,function(){  
    38.                 if(currentIndex != $(".tab li",obj).index($(this))){  
    39.                     currentIndex = $(".tab li",obj).index($(this));   
    40.                     $(".tab li",obj).removeClass("on")  
    41.                     $(this).addClass("on");  
    42.                     $(".p-content",obj).eq(currentIndex).show().siblings().hide();  
    43.                 }     
    44.             });  
    45.             return $(this);   
    46.         }     
    47.     })  
    48. })(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元素的索引。接下来代码就不用多说啊！

    附件：http://down.51cto.com/data/2359396

    新闻标题：用Jquery写tab插件(支持点击和移动及其他事件)
    分享网址：http://lszwz.com/article/ipdepj.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    川银永信   网站优化排名   成都网站建设   新都四新网站建设   品牌官网设计   成都圣月制冷   网站优化公司   企业网站建设   网站SEO优化   雅安托管服务器   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25