jquery plug-ins for horizontal and vertical stretching can be implemented

The project has a need to hide and display content, looking for jquery plugins online for a long time. Didn't find the right. Then simply write one yourself. The effect of the implementation is as follows:

The code is as follows:

Features: Enables HTML controls to be hidden and displayed, and automatically attaches an extrude arrow to the control for horizontal and vertical stretching. wuzhu//parameter: XY: Configure the extrusion direction. ' x ' indicates a horizontal stretch. ' Y ' means stretching vertically. Speed: The smaller the number, the faster the stretching speed. ZIndex: Configure layer display hierarchy. The default is 0. Reference: Need to reference itoggle.css style file, this plugin file, of course, there must be jquery. Example://$ ("#test"). Itoggle ({//XY: ' x ',//speed:50//});//Note: not fully tested.    (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") {//default configuration 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 ') {//horizontal stretch 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}); Small icons are centered vertically $this. css ({' float ': ' Left '});                Small icons and object elements are horizontally side-by $iconscontainer. CSS ({' float ': ' Left '}); $container. Append ($this);            Horizontal stretching when the small icon is $container to the right of the object element. Append ($iconscontainer);     } if (Settings.xy = = ' Y ') {//Vertical stretch           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});                Small icons are centered horizontally $container. Append ($iconscontainer); $container. Append ($this);            Vertical stretch when small icons are on top of object elements} $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 ')) {//have closed class, which means closed, now expand $this. Removeclass (' closed '). Show (). Animate (Obj.open, settings.speed, function () {if ($icons. ha                        Sclass (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 ("method" + M + "does not exist");        return this;    } return M.call (this, arguments); }}) (JQuery)

CSS that needs to be referenced:

. Icons{cursor:Pointer; }. Container{Z-index:Ten}. 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;}

Related pictures:

jquery plug-ins for horizontal and vertical stretching can be implemented