当前位置:Gxlcms > JavaScript > jQuery Collapse1.1.0折叠插件简单使用

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

时间:2021-07-01 10:21:17 帮助过:18人阅读

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

  1. /*!
  2. * jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/
  3. * ------------------------------------------------------------------------------------
  4. *
  5. * @version 1.1.0
  6. * @since 2017.08.28
  7. * @author 夜原生
  8. * @documentation http://www.cnblogs.com/yeyuansheng/
  9. *
  10. * Usage with default values:
  11. * ------------------------------------------------------------------------------------
  12. * {
  13. * panel: '',//默认空为第一个标签
  14. * content: '',//默认空为第二个标签
  15. * active: 'active',//点击样式
  16. * shut: true,//展开的在次点击可闭合
  17. * style: 'y',//x,y,0上下左右滑动展开/无动作展开
  18. * speed: 200,//动作的速度
  19. * event: "click",//动作
  20. * class: 'active',//item 样式
  21. * func: function(){},//增加事件
  22. * open:''//默认打开
  23. * }
  24. */
  25. (function($) {
  26. var collapse = {
  27. version:'1.1.0',
  28. style:{
  29. slideRight: {
  30. width : "hide",
  31. paddingLeft : "hide",
  32. paddingRight : "hide",
  33. marginLeft : "hide",
  34. marginRight : "hide"
  35. },
  36. slideLeft: {
  37. width : "show",
  38. paddingLeft : "show",
  39. paddingRight : "show",
  40. marginLeft : "show",
  41. marginRight : "show"
  42. },
  43. slideUp: {
  44. borderTopWidth: "hide",
  45. borderBottomWidth: "hide",
  46. paddingTop: "hide",
  47. paddingBottom: "hide",
  48. height: "hide"
  49. },
  50. slideDown: {
  51. borderTopWidth: "show",
  52. borderBottomWidth: "show",
  53. paddingTop: "show",
  54. paddingBottom: "show",
  55. height: "show"
  56. }
  57. },
  58. init:function(options){
  59. var opts = $.extend({}, $.fn.collapse.defaults, options);
  60. if(opts.style == 'x' && options.shut == 'undefined'){
  61. opts.shut = false;
  62. }
  63. return opts;
  64. },
  65. clickChange:function(obj,op){
  66. var panel = (op.panel == '')?$(obj).children(':first'):$(obj).find('> '+op.panel);
  67. panel.on(op.event,function(){
  68. var parent = $(this).parent();
  69. var sub = (op.content == '')?parent.children().eq(1):parent.find('> '+op.content);
  70. if($(sub).is(':visible')) {
  71. if(op.shut){
  72. collapse._animate(sub,op,0,function(){
  73. parent.removeClass(op.class);
  74. op.func();
  75. });
  76. }
  77. }else{
  78. parent.siblings().each(function(){
  79. var t = $(this);
  80. if(t.hasClass(op.active)){
  81. var uls = (op.content == '')?t.children().eq(1):t.find('> '+op.content);
  82. if(uls.length == 0){
  83. t.removeClass(op.active);
  84. }else{
  85. collapse._animate(uls,op,0,function(){
  86. t.removeClass(op.active);
  87. });
  88. }
  89. }
  90. });
  91. parent.addClass(op.active);
  92. collapse._animate(sub,op,1,function(){
  93. op.func();
  94. });
  95. }
  96. });
  97. },
  98. itemChange:function(item,op){
  99. var uls = (op.content == '')?$(item).children().eq(1):$(item).children().find('> '+op.content);
  100. uls.children().on(op.event,function(){
  101. $(item).parent().children().each(function(){
  102. if(op.content == ''){
  103. $(this).children().eq(1).children().removeClass(op.class);
  104. }else{
  105. $(this).children().find('> '+op.content).children().removeClass(op.class);
  106. }
  107. });
  108. $(this).addClass(op.class);
  109. });
  110. },
  111. _animate:function(obj,op,bool,callback){
  112. if(op.style){
  113. if(bool){
  114. slide =(op.style == 'x')?collapse.style.slideLeft:collapse.style.slideDown;
  115. }else{
  116. slide =(op.style == 'x')?collapse.style.slideRight:collapse.style.slideUp;
  117. }
  118. obj.animate(slide,op.speed,callback);
  119. }else{
  120. (bool)?obj.show():obj.hide();//可以改用CLASS控制
  121. }
  122. },
  123. open:function(obj,op,open){
  124. var li = $(obj).children().eq(open[0]);
  125. li.addClass(op.active);
  126. var ul = (op.content == '')?li.children().eq(1):li.find('> '+op.content);
  127. ul.show();
  128. ul.children().eq(open[1]).addClass(op.class);
  129. }
  130. }
  131. $.fn.collapse = function(options){
  132. var opts = collapse.init(options);
  133. if(opts.open != '')collapse.open(this,opts,opts.open);
  134. $(this).children().each(function(){
  135. collapse.clickChange(this,opts);
  136. collapse.itemChange(this,opts);
  137. });
  138. }
  139. $.fn.collapse.defaults = {
  140. panel: '',
  141. content: '',
  142. active: 'active',
  143. shut: true,
  144. style: 'y',
  145. speed: 200,
  146. event: "click",
  147. class: 'active',
  148. func: function(){},
  149. open:''
  150. }
  151. })(jQuery);

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

人气教程排行