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

本文实例为大家分享了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);

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

(0)

相关推荐

  • jQuery内容折叠效果插件用法实例分析(附demo源码)

    本文实例讲述了jQuery内容折叠效果插件用法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>jQuery Collapsible Fieldset</title> <script src=&

  • jquery插件orbit.js实现图片折叠轮换特效

    jQuery图片折叠轮换代码,可以点击左右箭头按钮切换图片,漂亮简洁.兼容主流浏览器,phplearn初学者推荐下载! 使用方法: 1.head区域引用文件 jquery.min.js,chuxz.css 2.在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3.在页面底部引用jq.orbit.js.js, orbit.js 4.复制images文件夹里的图片到相应的路径 <div class="orbit-wrapper"&g

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

    本文实例为大家分享了jQuery Collapse1.1.0折叠插件的使用,供大家参考,具体内容如下 /*! * jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/ * ------------------------------------------------------------------------------------ * * @version 1.1.0 * @since 2017.0

  • ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

    简单来说,jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则,如果不满足,可以给出用户自定义的提示信息.该插件不仅默认有一些校验规则,如校验内容是否为空,内容的长度是否符合给定的值,还可以根据用户自定义业务规则,而且错误提示信息,也可以根据用户的要求自定义显示.看来这个插件的功能确实很强大,是不是迫不及待想使用了.好的,那我们就开始简介如何使用它. jQuery validation 插件下载地址:http://plugins.jquery.com/p

  • Bootstrap3.0学习教程之JS折叠插件

    过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可.如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了. What's inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟.它被其它插件用来检测当前浏览器对CSS过渡效果是否支持. 折叠 对为支持折叠功能的组件,例如accordions和导航,赋予

  • jQuery插件简单实现方法

    本文实例讲述了jQuery插件简单实现方法.分享给大家供大家参考.具体如下: (function($){ $.fn.extend({ myFunk: function() { // 此处必须返回jQuery对象 return $(); }, myPunk: function() { return this.addClass('punked') .bind('click', function(){ alert('You were punked!'); }); } }); })(jQuery); 使

  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    后来朋友推荐了一个这个叫uploadify的上传插件,似乎挺好,就到官方下了个示例运行,感觉挺好,自己再稍加美化一下就OK 了..! 接下来就讲讲使用过程吧: 1. 下载 官方网站:http://www.uploadify.com/ 直接下载:jquery.uploadify-v2.1.0.rar 我的Demo: MyUpload.rar                官方网站也有demo 下载解压后: 说明:它里面有demo  但是是PHP的,还有一个帮助文档:uploadify v2.1.0

  • jQuery.Validate表单验证插件的使用示例详解

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • jquery实现的Accordion折叠面板效果代码

    本文实例讲述了jquery实现的Accordion折叠面板效果代码.分享给大家供大家参考.具体如下: 这是一款Accordion折叠面板,折叠菜单代码,简单Accordion效果,采用CSS与jQuery实现,鼠标点击后展开,再次点击后折叠起来.是网上很常用的手风琴效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-Simple-Accordion-style-codes/ 具体代码如下: <!DOCTYPE html PUBL

  • 基于jQuery实现的QQ表情插件

    不废话了,先给大家展示效果图: 查看演示 下载源码 我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您可以轻松将其应用到你的项目中. HTML 首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件. <script type="text/javascript" src="j

  • 基于jQuery图片平滑连续滚动插件

    * 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术

  • jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT

随机推荐