From 6b96513ce11f1b0f91856a218c0e26fe2a6741f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maxime=20Fran=C3=A7ois?= Date: Mon, 23 Dec 2013 10:55:42 +0100 Subject: [PATCH] Change readme to readme.md Change the txt file by markdown for use markdown power into github. Have a nice day. --- README | 180 -------------------------------------------------- README.md | 193 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 193 insertions(+), 180 deletions(-) delete mode 100644 README create mode 100644 README.md diff --git a/README b/README deleted file mode 100644 index 84c3356..0000000 --- a/README +++ /dev/null @@ -1,180 +0,0 @@ -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----------------------------------------------------------------- - -________________________________________________________________________________ -================================================================================ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..96d0b99 --- /dev/null +++ b/README.md @@ -0,0 +1,193 @@ +# 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](http://www.snyderplace.com/demos/collapsible.html) + +To enable cookie support you'll need the Cookie plugin here: +[https://github.com/carhartl/jquery-cookie](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 +```html + + +
+ +
+ +
+ +
+ +
+ +
+``` + + + + +## 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 + +```js + + + +``` + + +### The plugin default options are as follows: + +```js + { + 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(); + } + } +``` + + +### 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: + +```js + $(selector).collapsible('method', [arg]); +``` + + +Examples: + +```js + if ( $('#nav-block').collapsible('collapsed') ) { ... } +``` +or + +```js + 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 + + .collapsible div.collapse-open {} + .collapsible div.collapse-close {} + + .collapsible div.collapse-open span {} + .collapsible div.collapse-close span {} + +```