真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

jQueryCollapse1.1.0折疊插件簡(jiǎn)單使用

本文實(shí)例為大家分享了jQuery Collapse1.1.0折疊插件的使用,供大家參考,具體內(nèi)容如下

創(chuàng)新互聯(lián)是專業(yè)的巴彥淖爾網(wǎng)站建設(shè)公司,巴彥淖爾接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行巴彥淖爾網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

/*!
* jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/
* ------------------------------------------------------------------------------------
*
* @version 1.1.0
* @since 2017.08.28
* @author 夜原生
* @documentation http://www.cnblogs.com/yeyuansheng/
*
* Usage with default values:
* ------------------------------------------------------------------------------------
* {
* panel: '',//默認(rèn)空為第一個(gè)標(biāo)簽
* content: '',//默認(rèn)空為第二個(gè)標(biāo)簽
* active: 'active',//點(diǎn)擊樣式
* shut: true,//展開(kāi)的在次點(diǎn)擊可閉合
* style: 'y',//x,y,0上下左右滑動(dòng)展開(kāi)/無(wú)動(dòng)作展開(kāi)
* speed: 200,//動(dòng)作的速度
* event: "click",//動(dòng)作
* class: 'active',//item 樣式
* func: function(){},//增加事件
* open:''//默認(rèn)打開(kāi)
* }
*/

(function($) {
  var collapse = {
    version:'1.1.0',
    style:{
      slideRight: {
        width : "hide", 
        paddingLeft : "hide", 
        paddingRight : "hide", 
        marginLeft : "hide", 
        marginRight : "hide" 
      },
      slideLeft: {
        width : "show",
        paddingLeft : "show",
        paddingRight : "show",
        marginLeft : "show",
        marginRight : "show"
      },
      slideUp: {
        borderTopWidth: "hide",
        borderBottomWidth: "hide",
        paddingTop: "hide",
        paddingBottom: "hide",
        height: "hide"
      },
      slideDown: {
        borderTopWidth: "show",
        borderBottomWidth: "show",
        paddingTop: "show",
        paddingBottom: "show",
        height: "show"
      }
    },
    init:function(options){
      var opts = $.extend({}, $.fn.collapse.defaults, options);
      if(opts.style == 'x' && options.shut == 'undefined'){
        opts.shut = false;
      }
      return opts;
    },
    clickChange:function(obj,op){
      var panel = (op.panel == '')?$(obj).children(':first'):$(obj).find('> '+op.panel);
      panel.on(op.event,function(){ 
        var parent = $(this).parent();
        var sub = (op.content == '')?parent.children().eq(1):parent.find('> '+op.content);
        if($(sub).is(':visible')) {
          if(op.shut){
            collapse._animate(sub,op,0,function(){
              parent.removeClass(op.class);
              op.func();
            });
          }
        }else{
          parent.siblings().each(function(){
            var t = $(this);
            if(t.hasClass(op.active)){
              var uls = (op.content == '')?t.children().eq(1):t.find('> '+op.content);
              if(uls.length == 0){
                t.removeClass(op.active);
              }else{
                collapse._animate(uls,op,0,function(){
                  t.removeClass(op.active);
                });
              } 
            }
          });
          parent.addClass(op.active);
          collapse._animate(sub,op,1,function(){
            op.func();
          });
        }
      });
    },
    itemChange:function(item,op){
      var uls = (op.content == '')?$(item).children().eq(1):$(item).children().find('> '+op.content);
      uls.children().on(op.event,function(){
        $(item).parent().children().each(function(){
          if(op.content == ''){
            $(this).children().eq(1).children().removeClass(op.class);
          }else{
            $(this).children().find('> '+op.content).children().removeClass(op.class);
          }
        });
        $(this).addClass(op.class);
      });
    },
    _animate:function(obj,op,bool,callback){
      if(op.style){
        if(bool){
          slide =(op.style == 'x')?collapse.style.slideLeft:collapse.style.slideDown;
        }else{
          slide =(op.style == 'x')?collapse.style.slideRight:collapse.style.slideUp;
        } 
        obj.animate(slide,op.speed,callback); 
      }else{
        (bool)?obj.show():obj.hide();//可以改用CLASS控制
      }
    },
    open:function(obj,op,open){
      var li = $(obj).children().eq(open[0]);
      li.addClass(op.active);
      var ul = (op.content == '')?li.children().eq(1):li.find('> '+op.content);
      ul.show();
      ul.children().eq(open[1]).addClass(op.class);
    }
  }
  $.fn.collapse = function(options){
    var opts = collapse.init(options);
    if(opts.open != '')collapse.open(this,opts,opts.open);
    $(this).children().each(function(){
      collapse.clickChange(this,opts);
      collapse.itemChange(this,opts);
    }); 
  }
  $.fn.collapse.defaults = { 
    panel: '',
    content: '',
    active: 'active',
    shut: true,
    style: 'y',
    speed: 200,
    event: "click",
    class: 'active',
    func: function(){},
    open:''
  }
})(jQuery);

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


本文名稱:jQueryCollapse1.1.0折疊插件簡(jiǎn)單使用
文章分享:http://weahome.cn/article/gciedi.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部