项目有个隐藏和显示内容的需求，在网上找JQUERY插件很久。没发现合适的。然后干脆自己写一个，支持cookie。实现的效果如下：
代码如下：
//功能：实现HTML控件隐藏和显示，自动在控件上附加拉伸箭头，可实现水平拉伸和垂直拉伸。WUZHU //参数：xy:配置拉伸方向。'x'表示水平方向拉伸。'y'表示垂直方向拉伸。 // speed:配置速度，数值越小，拉伸速度越快。 // zindex:配置图层显示层次。默认为0。 // position:css的position属性，可以用relative、absolute、fixed。默认是relative。可设置该属性与周边控件显示相符合 // cookie:设置是否启用cookie,默认为true。启用后刷新页面控件的隐藏和显示不会恢复初始状态 // copycss:是否复制对象CSS，其中的宽和高会被忽略掉。默认为FALSE //引用：需引用itoggle.css样式文件,本插件文件，当然还有必须的JQUERY。 //例子： // $("#test").itoggle({ // xy:'x', // speed:50 // }); //备注：未全方面测试过。 (function ($) { var Obj = {}; Obj.open = {}; Obj.close = {}; Obj.openCss = ''; Obj.closeCss = ''; Obj.width = 0; Obj.height = 0; var position = {}; //当前元素位置上下文 position.pre = false; //当前元素前同级元素 position.next = false; //当前元素后同级元素 position.parent = false; //当前元素父元素 position.enable = true; //是否起作用。 position.css = ''; //当前元素样式 position.style = ''; //COOKIE对象 var Cookie = { getCookie: function (c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf(c_name + "="); if (c_start != -1) { c_start = c_start + c_name.length + 1; c_end = document.cookie.indexOf(";", c_start); if (c_end == -1) c_end = document.cookie.length; return unescape(document.cookie.substring(c_start, c_end)); } } return false; }, setCookie: function (c_name, value, expiredays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); }, deleteCookie: function (c_name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(c_name); document.cookie = c_name + "=" + cval + "; expires=" + exp.toGMTString(); } }; var Serialize = function (obj) { switch (obj.constructor) { case Object: var str = "{"; for (var o in obj) { str += """ + o + "":" + Serialize(obj[o]) + ","; } if (str.substr(str.length - 1) == ",") str = str.substr(0, str.length - 1); return str + "}"; break; case Array: var str = "["; for (var o in obj) { str += Serialize(obj[o]) + ","; } if (str.substr(str.length - 1) == ",") str = str.substr(0, str.length - 1); return str + "]"; break; case Boolean: return """ + obj.toString() + """; break; case Date: return """ + obj.toString() + """; break; case Function: break; case Number: return """ + obj.toString() + """; break; case String: return """ + obj.toString() + """; break; } } var Method = { init: function (options) { // return this.each(function () { debugger var $this = $(this); position.pre = $(this).prev(); position.next = $(this).next(); position.parent = $(this).parent(); position.css = $(this).attr('class'); position.style = $(this).attr('style'); var settings = $this.data("itoggle"); if (typeof settings === "undefined") { //默认配置 var defaults = { xy: 'x', speed: 1000, zindex: 0, position: 'absolute', cookie: false, copycss: false }; settings = $.extend({}, defaults, options[0]); $this.data("itoggle", settings); } else { settings = $.extend({}, settings, options[0]); } Obj.width = $this.width(); Obj.height = $this.height(); var $container = $("<div class='container'></div>"); var $icons = $("<div class='icons'></div>"); var $iconscontainer = $("<div class='iconscontainer'></div>"); $iconscontainer.append($icons); if (settings.xy == 'x') {//水平拉伸 Obj.open = { Obj.width }; Obj.openCss = 'xopen'; Obj.close = { 0 }; Obj.closeCss = 'xclose'; $iconscontainer.css({ height: Obj.height / 2 - 2, 'padding-top': Obj.height / 2 }); //小图标垂直居中 $this.css({ 'float': 'left' }); //小图标和对象元素水平并排 $iconscontainer.css({ 'float': 'left' }); $container.append($this); //水平拉伸时候小图标在对象元素右边 $container.append($iconscontainer); } if (settings.xy == 'y') {//垂直拉伸 Obj.open = { height: Obj.height }; Obj.openCss = 'yopen'; Obj.close = { height: 0 }; Obj.closeCss = 'yclose'; $iconscontainer.css({ Obj.width / 2 - 2, 'padding-left': Obj.width / 2 }); //小图标水平居中 $container.append($iconscontainer); $container.append($this); //垂直拉伸时候小图标在对象元素上边 } $icons.addClass(Obj.openCss); $this.addClass('this'); $this.css({ 'white-space': 'nowrap' }); $container.css({ 'z-index': settings.zindex, 'position': settings.position }); // delete position.css.width; // delete position.css.height; //复制样式到新的容器中，去除宽高 if (settings.copycss) { if (position.css != undefined) { $container.attr("class", position.css); } if (position.style != undefined) { $container.attr("style", position.style); $container.css('width', ''); $container.css('height', ''); } } //判断原来元素所在位置，然后将新的元素插入容器中 if (position.pre.length > 0 && position.enable) { position.pre.after($container); position.enable = false; } if (position.next.length > 0 && position.enable) { position.next.before($container); position.enable = false; } if (position.parent.length > 0 && position.enable) { position.parent.append($container); position.enable = false; } if (position.enable) { $('body').append($container); position.enable = false; } if (settings.cookie) {//获取cookie记录结果 var this_style = Cookie.getCookie($this.id + '_this_style'); var icons_css = Cookie.getCookie($this.id + '_icons_css'); if (this_style) $this.css(eval("(" + this_style + ")")); if (icons_css) $icons.addClass(icons_css); if ($icons.hasClass('xclose') || $icons.hasClass('yclose'))//判断是否为关闭状态 $this.addClass('closed') } $icons.bind("click", function (e) { if ($this.hasClass('closed')) { //有closed类，表示已关闭，现在展开 $this.removeClass('closed').show().animate(Obj.open, settings.speed, function () { if ($icons.hasClass(Obj.closeCss)) $icons.removeClass(Obj.closeCss); $icons.addClass(Obj.openCss); if (settings.cookie) {//cookie记录操作后结果 Cookie.setCookie($this.id + '_this_style', Serialize(Obj.open)); Cookie.setCookie($this.id + '_icons_css', Obj.openCss); } }); } else { $this.addClass('closed').animate(Obj.close, settings.speed, function () { if ($icons.hasClass(Obj.openCss)) $icons.removeClass(Obj.openCss); $icons.addClass(Obj.closeCss); $this.hide(); if (settings.cookie) {//cookie记录操作后结果 Cookie.setCookie($this.id + '_this_style', Serialize(Obj.close)); Cookie.setCookie($this.id + '_icons_css', Obj.closeCss); } }); } }); return this; // }); } }; $.fn.itoggle = function () { var m = arguments[0]; if (Method[m]) { m = Method[m]; arguments = Array.prototype.slice.call(arguments, 1); } else if (typeof m === "object" || !m) { m = Method.init; } else { $.error("方法" + m + "不存在"); return this; } return m.call(this, arguments); } })(jQuery)
样式如下：
.icons { cursor:pointer; } .container { } .iconscontainer { position:relative; border: 1px solid #95B8E7; background-color:#E9F2FF; } .this { position:relative; } .xopen { background:url('layout_arrows.png') no-repeat 0 0; width:16px; height:16px; } .xclose { background:url('layout_arrows.png') no-repeat 0 -16px; width:16px; height:16px; } .yopen { background:url('layout_arrows.png') no-repeat -16px -16px; width:16px; height:16px; } .yclose { background:url('layout_arrows.png') no-repeat -16px 0; width:16px; height:16px; } .closed { display: none; }
相关图片：
