jQuery Collapse1.1.0折叠插件简单使用


Posted in jQuery onAugust 28, 2017

本文实例为大家分享了jQuery Collapse1.1.0折叠插件的使用,供大家参考,具体内容如下

/*!
* 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: '',//默认空为第一个标签
* content: '',//默认空为第二个标签
* active: 'active',//点击样式
* shut: true,//展开的在次点击可闭合
* style: 'y',//x,y,0上下左右滑动展开/无动作展开
* speed: 200,//动作的速度
* event: "click",//动作
* class: 'active',//item 样式
* func: function(){},//增加事件
* open:''//默认打开
* }
*/

(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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
如何编写jquery插件
Mar 29 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery实现下载图片功能
Jul 18 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
You might like
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php随机显示图片的简单示例
2014/02/15 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
use jscript List Installed Software
2007/06/11 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
python处理csv数据的方法
2015/03/11 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
如何在python中使用selenium的示例
2017/12/26 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
django 控制页面跳转的例子
2019/08/06 Python
自定义django admin model表单提交的例子
2019/08/23 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
如何用SQL语句进行模糊查找
2015/09/25 面试题
村干部承诺书
2014/03/28 职场文书
节约用水标语
2014/06/11 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
党员个人自我评价
2015/03/03 职场文书
硕士学位申请报告
2015/05/15 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python