可以实现实现水平拉伸和垂直拉伸的JQUERY插件

　　项目有个隐藏和显示内容的需求，在网上找JQUERY插件很久。没发现合适的。然后干脆自己写一个。实现的效果如下：

代码如下：

//功能：实现HTML控件隐藏和显示，自动在控件上附加拉伸箭头，可实现水平拉伸和垂直拉伸。WUZHU
//参数：xy:配置拉伸方向。‘x‘表示水平方向拉伸。‘y‘表示垂直方向拉伸。
//      speed:配置速度，数值越小，拉伸速度越快。
//      zindex:配置图层显示层次。默认为0。
//引用：需引用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 Method = {
        init: function (options) {
             return this.each(function () {
            var $this = $(this);
            var settings = $this.data("itoggle");
            if (typeof settings === "undefined") {
                //默认配置
                var defaults = {
                    xy: ‘x‘,
                    speed: 1000,
                    zindex:0
                };
                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});
            $(‘body‘).append($container);
            $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);
                    });
                } 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();
                    });
                }
            });
            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)

　　需要引用的CSS：

.icons
{
    cursor:pointer;
 }
 .container
 {
    z-index:10
     }
 .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;
}

相关图片：