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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现日历效果
Sep 11 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js倒计时小程序
2013/11/05 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python实现红包裂变算法
2016/02/16 Python
一道python走迷宫算法题
2018/01/22 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
django 多数据库及分库实现方式
2020/04/01 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
数据库连接池的工作原理
2012/09/26 面试题
酒店副总经理岗位职责范本
2014/02/04 职场文书
运动会入场解说词
2014/02/07 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
百万英镑观后感
2015/06/09 职场文书