原生态水平和垂直拉伸的JQUERY插件

　　项目有个隐藏和显示内容的需求，在网上找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 = { width: Obj.width };
                Obj.openCss = 'xopen';
                Obj.close = { width: 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({ width: 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;
}

 

相关图片：