git.sur5r.net Git - contagged/blob - scripts/interface/accordion.js

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Accordion\r
   4  * \r
   5  * http://interface.eyecon.ro\r
   6  * \r
   7  * Copyright (c) 2006 Stefan Petre\r
   8  * Dual licensed under the MIT (MIT-LICENSE.txt) \r
   9  * and GPL (GPL-LICENSE.txt) licenses.\r
  10  *\r
  11  */\r
  12 \r
  13 /**\r
  14  * Create an accordion from a HTML structure\r
  15  *\r
  16  * @example $('#myAccordion').Accordion(\r
  17  *                              {\r
  18  *                                      headerSelector  : 'dt',\r
  19  *                                      panelSelector   : 'dd',\r
  20  *                                      activeClass             : 'myAccordionActive',\r
  21  *                                      hoverClass              : 'myAccordionHover',\r
  22  *                                      panelHeight             : 200,\r
  23  *                                      speed                   : 300\r
  24  *                              }\r
  25  *                      );\r
  26  * @desc Converts definition list with id 'myAccordion' into an accordion width dt tags as headers and dd tags as panels\r
  27  * \r
  28  * @name Accordion\r
  29  * @description Create an accordion from a HTML structure\r
  30  * @param Hash hash A hash of parameters\r
  31  * @option Integer panelHeight the pannels' height\r
  32  * @option String headerSelector selector for header elements\r
  33  * @option String panelSelector selector for panel elements\r
  34  * @option String activeClass (optional) CSS Class for active header\r
  35  * @option String hoverClass (optional) CSS Class for hovered header\r
  36  * @option Function onShow (optional) callback called whenever an pannel gets active\r
  37  * @option Function onHide (optional) callback called whenever an pannel gets incative\r
  38  * @option Function onClick (optional) callback called just before an panel gets active\r
  39  * @option Mixed speed (optional) animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  40  * @option Integer crrentPanel (otional) the active panel on initialisation\r
  41  *\r
  42  * @type jQuery\r
  43  * @cat Plugins/Interface\r
  44  * @author Stefan Petre\r
  45  */\r
  46 jQuery.iAccordion = {\r
  47         build : function(options)\r
  48         {\r
  49                 return this.each(\r
  50                         function()\r
  51                         {\r
  52                                 if (!options.headerSelector || !options.panelSelector)\r
  53                                         return;\r
  54                                 var el = this;\r
  55                                 el.accordionCfg = {\r
  56                                         panelHeight                     : options.panelHeight||300,\r
  57                                         headerSelector          : options.headerSelector,\r
  58                                         panelSelector           : options.panelSelector,\r
  59                                         activeClass                     : options.activeClass||'fakeAccordionClass',\r
  60                                         hoverClass                      : options.hoverClass||'fakeAccordionClass',\r
  61                                         onShow                          : options.onShow && typeof options.onShow == 'function' ? options.onShow : false,\r
  62                                         onHide                          : options.onShow && typeof options.onHide == 'function' ? options.onHide : false,\r
  63                                         onClick                         : options.onClick && typeof options.onClick == 'function' ? options.onClick : false,\r
  64                                         headers                         : jQuery(options.headerSelector, this),\r
  65                                         panels                          : jQuery(options.panelSelector, this),\r
  66                                         speed                           : options.speed||400,\r
  67                                         currentPanel            : options.currentPanel||0\r
  68                                 };\r
  69                                 el.accordionCfg.panels\r
  70                                         .hide()\r
  71                                         .css('height', '1px')\r
  72                                         .eq(0)\r
  73                                         .css(\r
  74                                                 {\r
  75                                                         height: el.accordionCfg.panelHeight + 'px',\r
  76                                                         display: 'block'\r
  77                                                 }\r
  78                                         )\r
  79                                         .end();\r
  80                                         \r
  81                                 el.accordionCfg.headers\r
  82                                 .each(\r
  83                                         function(nr)\r
  84                                         {\r
  85                                                 this.accordionPos = nr;\r
  86                                         }\r
  87                                 )\r
  88                                 .hover(\r
  89                                         function()\r
  90                                         {\r
  91                                                 jQuery(this).addClass(el.accordionCfg.hoverClass);\r
  92                                         },\r
  93                                         function()\r
  94                                         {\r
  95                                                 jQuery(this).removeClass(el.accordionCfg.hoverClass);\r
  96                                         }\r
  97                                 )\r
  98                                 .bind(\r
  99                                         'click',\r
 100                                         function(e)\r
 101                                         {\r
 102                                                 if (el.accordionCfg.currentPanel == this.accordionPos)\r
 103                                                         return;\r
 104                                                 el.accordionCfg.headers\r
 105                                                         .eq(el.accordionCfg.currentPanel)\r
 106                                                         .removeClass(el.accordionCfg.activeClass)\r
 107                                                         .end()\r
 108                                                         .eq(this.accordionPos)\r
 109                                                         .addClass(el.accordionCfg.activeClass)\r
 110                                                         .end();\r
 111                                                 el.accordionCfg.panels\r
 112                                                 .eq(el.accordionCfg.currentPanel)\r
 113                                                         .animate(\r
 114                                                                 {height:0},\r
 115                                                                 el.accordionCfg.speed,\r
 116                                                                 function()\r
 117                                                                 {\r
 118                                                                         this.style.display = 'none';\r
 119                                                                         if (el.accordionCfg.onHide) {\r
 120                                                                                 el.accordionCfg.onHide.apply(el, [this]);\r
 121                                                                         }\r
 122                                                                 }\r
 123                                                         )\r
 124                                                 .end()\r
 125                                                 .eq(this.accordionPos)\r
 126                                                         .show()\r
 127                                                         .animate (\r
 128                                                                 {height:el.accordionCfg.panelHeight},\r
 129                                                                 el.accordionCfg.speed,\r
 130                                                                 function()\r
 131                                                                 {\r
 132                                                                         this.style.display = 'block';\r
 133                                                                         if (el.accordionCfg.onShow) {\r
 134                                                                                 el.accordionCfg.onShow.apply(el, [this]);\r
 135                                                                         }\r
 136                                                                 }\r
 137                                                         )\r
 138                                                 .end();\r
 139                                                 \r
 140                                                 if (el.accordionCfg.onClick) {\r
 141                                                         el.accordionCfg.onClick.apply(\r
 142                                                                 el, \r
 143                                                                 [\r
 144                                                                         this, \r
 145                                                                         el.accordionCfg.panels.get(this.accordionPos),\r
 146                                                                         el.accordionCfg.headers.get(el.accordionCfg.currentPanel),\r
 147                                                                         el.accordionCfg.panels.get(el.accordionCfg.currentPanel)\r
 148                                                                 ]\r
 149                                                         );\r
 150                                                 }\r
 151                                                 el.accordionCfg.currentPanel = this.accordionPos;\r
 152                                         }\r
 153                                 )\r
 154                                 .eq(0)\r
 155                                 .addClass(el.accordionCfg.activeClass)\r
 156                                 .end();\r
 157                                 jQuery(this)\r
 158                                         .css('height', jQuery(this).css('height'))\r
 159                                         .css('overflow', 'hidden');\r
 160                         }\r
 161                 );\r
 162         }\r
 163 };\r
 164 \r
 165 jQuery.fn.Accordion = jQuery.iAccordion.build;