English
资源说明：No longer maintaining - Manage multiple collapsibles with cookie support
----------------No longer being Maintained-------------------- Collapsible, jQuery Plugin Overview: ================================================================================ This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site. If you find any errors or have suggested changes, please post a comment on the github project: http://github.com/juven14/Collapsible Very Basic demos can be found here: http://www.snyderplace.com/demos/collapsible.html To enable cookie support you'll need the Cookie plugin here: https://github.com/carhartl/jquery-cookie ________________________________________________________________________________ ================================================================================ Adding a collapsible panel to your html: ================================================================================ You have to create your own html for the collapsible. You need a header element (div or etc) that gets the "collapsible" class assigned and a body element. However, the slide effect will be choppy if you have margins and padding for the container, so here we just use a div. Here I've used "collapsible" but you can choose any other selector. Here is an example: ---HTML code-------------------------------------------------------------------- ---end HTML code---------------------------------------------------------------- ________________________________________________________________________________ ================================================================================ Adding the Javascript to your file: ================================================================================ JavaScript which belongs in the head of the html document, using the cookie plugin is optional. Please note that our default open / config is only an example as related to the above HTML. ---JavaScript code-------------------------------------------------------------- ---end JavaScript code---------------------------------------------------------- The plugin default options are as follows: ---JavaScript code-------------------------------------------------------------- { cssClose: 'collapse-close', cssOpen: 'collapse-open', cookieName: 'collapsible', cookieOptions: { path: '/', expires: 7, domain: '', secure: '' }, defaultOpen: '', speed: 300, bind: 'click', animateOpen: function (elem, opts) { elem.next().slideUp(opts.speed); }, animateClose: function (elem, opts) { elem.next().slideDown(opts.speed); }, loadOpen: function (elem, opts) { elem.next().show(); }, loadClose: function (elem, opts) { elem.next().hide(); } } ---end JavaScript code---------------------------------------------------------- Option details: * cssClose - This is the class you want assigned when it is closed. * cssOpen - This is the class you want assigned when it is opened. * cookieName - This is the name of the cookie that will store which collapsibles should be open. * cookieOptions - See the jquery.cookie plugin for more information. * defaultOpen - This is comma separated list of collapsible header ids. * speed - This is the animation speed for the slide up/down. * bind - This is the event that you want the collapsibles to function on. only 4 are supported: click, dblclick, mouseenter, and mouseover. * animateOpen - This is a custom callback to alter the way that an element is opened. * animateClose - This is a custom callback to alter the way that an element is closed. * loadOpen = This is a custom callback to override the default open state * loadClose = This is a custom callback to override the default close state Methods: You can call following methods on collapsible elements: * collapsed - returns 'true' if element is collapsed * toggle - toggle collapsible state * open - open a collapsible * close - close a collapsible * openAll - open all closed collapsibles * closeAll - close all open collapsibles Call them using jquery-ui style: $(selector).collapsible('method', [arg]); Examples: if ( $('#nav-block').collapsible('collapsed') ) { ... } or appendToLog('Error: service is down!'); $('#nav-logs').collapsible('open'); ________________________________________________________________________________ ================================================================================ Styling ================================================================================ In the above example HTML you will see a span, this is useful if you wish to assign an open/close image. This plugin will append a user defined (or default, see options above) class to header of the collapsible. You can use this to swap out the images or style the different states of your collapsible. ---CSS code--------------------------------------------------------------------- .collapsible div.collapse-open {} .collapsible div.collapse-close {} .collapsible div.collapse-open span {} .collapsible div.collapse-close span {} ---end CSS code----------------------------------------------------------------- ________________________________________________________________________________ ================================================================================
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
