站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery Collapse1.1.0折叠插件简单使用
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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){

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -