ddaccordion 可以实现多种折叠式菜单，或者又叫手风琴式菜单，必须引入jquery.js ddaccordion={ |
002 | ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //当在手风琴展开的时候，如果内容ajax请求的结果，在结果返回之前，应该在内容区显示的东东。 |
003 |
004 | headergroup: {}, //用来存储标题对象 |
005 | contentgroup: {}, //用来存储内容对象 |
006 |
007 | //提供一个方法，该方法可以用来加载图片。 |
008 | preloadimages:function($images){ |
009 | $images.each(function(){ |
010 | var preloadimage=new Image() |
011 | preloadimage.src=this.src |
012 | }) |
013 | }, |
014 |
015 | //公共方法，用来展开一个内容区。 |
016 | expandone:function(headerclass, selected, scrolltoheader){ |
017 | this.toggleone(headerclass, selected, "expand", scrolltoheader) |
018 | }, |
019 |
020 | //公共方法，用来闭合一个内容区。 |
021 | collapseone:function(headerclass, selected){ |
022 | this.toggleone(headerclass, selected, "collapse") |
023 | }, |
024 |
025 | //公共方法，用来展开所有的内容区。 |
026 | expandall:function(headerclass){ |
027 | var $headers=this.headergroup[headerclass] |
028 | this.contentgroup[headerclass].filter(':hidden').each(function(){//找到所有的未展开的标题元素，然后程序触发他们的手风琴事件。 |
029 | $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") |
030 | }) |
031 | }, |
032 |
033 | //公共方法，用来闭合所有的内容区。 |
034 | collapseall:function(headerclass){ |
035 | var $headers=this.headergroup[headerclass] |
036 | this.contentgroup[headerclass].filter(':visible').each(function(){//找到所有未闭合的内容元素，然后根据内容元素的索引找到它对应的标题元素，然后触发手风琴事件。 |
037 | $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion") |
038 | }) |
039 | }, |
040 |
041 | //公共方法，转换一个内容区的状态，如果打开着就关闭它，如果关闭着就打开它。 |
042 | toggleone:function(headerclass, selected, optstate, scrolltoheader){ |
043 | var $targetHeader=this.headergroup[headerclass].eq(selected) |
044 | var $subcontent=this.contentgroup[headerclass].eq(selected) |
045 | if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible")) |
046 | $targetHeader.trigger("evt_accordion", [false, scrolltoheader]) |
047 | }, |
048 |
049 | //通过ajax动态加载内容区。 |
050 | ajaxloadcontent:function($targetHeader, $targetContent, config, callback){ |
051 | var ajaxinfo=$targetHeader.data('ajaxinfo')//获取该标题对应的ajaxinfo，该信息会在init方法中初始化。 |
052 |
053 | //一个内部私有方法，用来处理ajax的返回结果，并且维护内容加载的状态。 |
054 | function handlecontent(content){ |
055 | if (content){ //如果已经动态加载到内容区 |
056 | ajaxinfo.cacheddata=content //把内容存储到标题对应的ajaxinfo中。 |
057 | ajaxinfo.status="cached" //设置ajaxinfo的状态为已存储。 |
058 | if ($targetContent.queue("fx").length==0){ //判断与该标题相对应的内容区是不是还有事件要处理（有可能在执行动画），如果没有，就进入if。 |
059 | $targetContent.hide().html(content) //隐藏Loading动画，将内容区的内容设置为刚刚加载来的content。 |
060 | ajaxinfo.status="complete" //设置ajaxinfo的状态为已完成。 |
061 | callback() //执行传入该方法的回调函数。 |
062 | } |
063 | } |
064 | if (ajaxinfo.status!="complete"){ //如果动态加载还没有完成 |
065 | setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //每0.1秒嵌套调用一次自己，用来等待动画的执行。 |
066 | } |
067 | } |
068 |
069 | if (ajaxinfo.status=="none"){ //如果ajaxinfo的信息还是初始化时候的状态，即该内容区还没有加载过。 |
070 | $targetContent.html(this.ajaxloadingmsg) //把加载动画暂时设置为内容区的内容。 |
071 | $targetContent.slideDown(config.animatespeed) //将加载动画按照用户配置的速度滑动下来。 |
072 | ajaxinfo.status="loading" //设置ajaxinfo的状态为正在加载。 |
073 | $.ajax({ |
074 | url: ajaxinfo.url, //传入ajax请求的url |
075 | error:function(ajaxrequest){ //如果失败，将内容区的内容设置为'Error fetching content. Server Response: '+ajaxrequest.responseText |
076 | handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText) |
077 | }, |
078 | success:function(content){ //如果成功，将内容区的内容设置为返回的content |
079 | content=(content=="")? " " : content //在成功的情况下也有可能content是空，而是否已经加载到内容是判断 if (content)，所以这里将他改为" "。 |
080 | handlecontent(content) |
081 | } |
082 | }) |
083 | } |
084 | else if (ajaxinfo.status=="loading") //如果该内容区正在加载 |
085 | handlecontent(ajaxinfo.cacheddata) //处理ajaxinfo.cacheddata，个人认为这里有bug，应该改为return。因为loading状态表明之前已经出发加载事件了只是结果还没返回来，所以在返回之前应该屏蔽掉再次加载的事件。这里直接用上一次的缓存结果来处理分两种情况：如果上一次缓存结果为空，那么它将一直在handlecontent的循环中，直到ajax请求的结果返回才会进入回调函数，而本身请求处理完之后会调用回调，所有回调会被调用两次；如果上一次缓存结果不为空，那么相当于把内容区先设置为上一次的内容，直到ajax返回结果回来，内容才被更新到最新，回调函数依旧被调用了两次。 |
086 | }, |
087 |
088 | expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation, scrolltoheader){ |
089 | var ajaxinfo=$targetHeader.data('ajaxinfo') //获取该标题对应的ajaxinfo |
090 | if (ajaxinfo){ //如果该标题的ajaxinfo不为空，即该内容区应该通过ajax加载。 |
091 | if (ajaxinfo.status=="none" || ajaxinfo.status=="loading") //如果内容区的内容还没有得到就动态加载它 |
092 | this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)}) |
093 | else if (ajaxinfo.status=="cached"){ //如果动态加载的内容已经得到了但是还没跟新到内容区，就把它更新到内容区并且将缓存清空。 |
094 | $targetContent.html(ajaxinfo.cacheddata) |
095 | ajaxinfo.cacheddata=null |
096 | ajaxinfo.status="complete" |
097 | } |
098 | } |
099 | this.transformHeader($targetHeader, config, "expand") //执行标题的展开动画 |
100 | $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){//根据用户的设置，将内容区滑下，完成之后执行用户注入的onopenclose方法。 |
101 | config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated) |
102 | if (scrolltoheader){//如果加载完之后要滚动到被展开的标题处 |
103 | var sthdelay=(config["collapseprev"])? 20 : 0 //如果用户设置展开一个的时候要把其他的先关闭，就设置延迟为20ms，否则立即执行。 |
104 | clearTimeout(config.sthtimer) |
105 | config.sthtimer=setTimeout(function(){ddaccordion.scrollToHeader($targetHeader)}, sthdelay) //滚动到该标题。 |
106 | } |
107 | if (config.postreveal=="gotourl" && directclick){ //如果绑定额事件名叫做gotourl并且是click事件触发的 |
108 | var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)//找到该标题中的链接的地址。 |
109 | if (targetLink) //如果找到一个链接,就把当前页面定位到链接页面。 |
110 | setTimeout(function(){location=targetLink.href}, 200 + (scrolltoheader? 400+sthdelay : 0) ) |
111 | } |
112 | }) |
113 | }, |
114 |
115 | //一个实现将页面滚动到指定元素处的方法。 |
116 | scrollToHeader:function($targetHeader){ |
117 | ddaccordion.$docbody.stop().animate({scrollTop: $targetHeader.offset().top}, 400) |
118 | }, |
119 |
120 | //闭合一个内容区 |
121 | collapseit:function($targetHeader, $targetContent, config, isuseractivated){ |
122 | this.transformHeader($targetHeader, config, "collapse") //执行标题的闭合动画 |
123 | $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})//将内容区划上去，完成之后调用用户嵌入的onopenclose方法。 |
124 | }, |
125 |
126 | //标题在打开或者闭合的时候执行的动画 |
127 | transformHeader:function($targetHeader, config, state){ |
128 | $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) |
129 | .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)//将标题的css设置为对应状态的css。 |
130 | if (config.htmlsetting.location=='src'){ //如果location是src |
131 | $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //将标题中找到的图片资源换成配置中的资源。 |
132 | $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) |
133 | } |
134 | else if (config.htmlsetting.location=="prefix") //如果是prefix或者suffix，就把配置文件中的内容添加到指定位置。 |
135 | $targetHeader.find('.accordprefix').empty().append((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) |
136 | else if (config.htmlsetting.location=="suffix") |
137 | $targetHeader.find('.accordsuffix').empty().append((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) |
138 | }, |
139 |
140 | //找到url中要打开的header的索引。 |
141 | urlparamselect:function(headerclass){ |
142 | var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL |
143 | if (result!=null) |
144 | result=RegExp.$1.split(',') |
145 | return result |
146 | }, |
147 |
148 | //获取Cookie |
149 | getCookie:function(Name){ |
150 | var re=new RegExp(Name+"=[^;]+", "i") |
151 | if (document.cookie.match(re)) |
152 | return document.cookie.match(re)[0].split("=")[1] |
153 | return null |
154 | }, |
155 |
156 | //设置Cookie |
157 | setCookie:function(name, value){ |
158 | document.cookie = name + "=" + value + "; path=/" |
159 | }, |
160 |
161 | //初始化方法 |
162 | init:function(config){ |
163 | //隐藏所有的标记要动态加载内容区的a标签 |
164 | document.write('<style type="text/css">\n') |
165 | document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents |
166 | document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link |
167 | document.write('<\/style>') |
168 | |
169 | jQuery(document).ready(function($){ |
170 | var persistedheaders=ddaccordion.getCookie(config.headerclass) |
171 | ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //存入headers对象 |
172 | ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //存入contents对象 |
173 | ddaccordion.$docbody=(window.opera)? (document.compatMode=="CSS1Compat"? jQuery('html') : jQuery('body')) : jQuery('html,body') //得到一个$docbody对象，在scrollTo方法中要用到。 |
174 | var $headers=ddaccordion.headergroup[config.headerclass] //创建headers变量 |
175 | var $subcontents=ddaccordion.contentgroup[config.headerclass] //创建contents变量 |
176 | config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //存储开合状态下标题的css |
177 | config.revealtype=config.revealtype || "click" //存储触发开合事件的时间类型，默认为click |
178 | config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter") //如果事件类型为mouseover，就把它改为mouseenter |
179 | if (config.revealtype=="clickgo"){ //如果用户传入的事件类型是clickgo，那么将事件类型改为click，并且设置postreveal为gotourl，在展开的时候会用到该标记。 |
180 | config.postreveal="gotourl" |
181 | config.revealtype="click" |
182 | } |
183 | |
184 | //设置标题在开合时候的html信息 |
185 | if (typeof config.togglehtml=="undefined") |
186 | config.htmlsetting={location: "none"} |
187 | else |
188 | config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} |
189 | |
190 | config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //嵌入oninit方法 |
191 | config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //嵌入onopenclose方法 |
192 | var lastexpanded={} //初始化上次打开的headers索引 |
193 | var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)//优先使用url中的heads索引，其次是历史记录里的，最后用default。 |
194 | if (typeof expandedindices=='string') |
195 | expandedindices=expandedindices.replace(/c/ig, '').split(',') //处理url传入的特殊参数，有可能不是数字，而是c1,c2,c3 |
196 | if (expandedindices.length==1 && expandedindices[0]=="-1") //如果索引只有一个并且是-1，那所有的head都关闭。 |
197 | expandedindices=[] |
198 | if (config["collapseprev"] && expandedindices.length>1) //如果最多只允许一个内容区是打开的，并且expandedindices的header索引不止一个，就用最后一个索引。 |
199 | expandedindices=[expandedindices.pop()] |
200 | if (config["onemustopen"] && expandedindices.length==0) //如果最多只允许一个内容区是打开的，并且expandedindices的header索引没有，就默认打开第一个。 |
201 | expandedindices=[0] |
202 | |
203 | //把需要打开的内容区全部打开 |
204 | $headers.each(function(index){ |
205 | var $header=$(this) |
206 | //处理header |
207 | if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag |
208 | $('<span class="accordprefix"></span>').prependTo(this) |
209 | $('<span class="accordsuffix"></span>').appendTo(this) |
210 | } |
211 | |
212 | $header.attr('headerindex', index+'h') //给元素添加索引属性 |
213 | $subcontents.eq(index).attr('contentindex', index+'c') //给元素添加索引属性 |
214 | var $subcontent=$subcontents.eq(index) |
215 | var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //检查subcontent中是否有hiddenajaxlink，如果有，认为该内容区应该显示ajax请求的内容，创建一个ajaxinfo，绑定到header上。 |
216 | if ($hiddenajaxlink.length==1){ |
217 | $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) |
218 | } |
219 | |
220 | var needle=(typeof expandedindices[0]=="number")? index : index+''//检查指针索引的数据格式，将needle也设置为该格式。 |
221 | |
222 | //打开应该展开的，闭合应该闭合的。 |
223 | if (jQuery.inArray(needle, expandedindices)!=-1){ |
224 | ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) |
225 | lastexpanded={$header:$header, $content:$subcontent} |
226 | } |
227 | else{ |
228 | $subcontent.hide() |
229 | config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) |
230 | ddaccordion.transformHeader($header, config, "collapse") |
231 | } |
232 | }) |
233 | |
234 | //绑定evt_accordion事件 |
235 | $headers.bind("evt_accordion", function(e, isdirectclick, scrolltoheader){ |
236 | var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) |
237 | if ($subcontent.css('display')=="none"){ |
238 | ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick, false, scrolltoheader) |
239 | if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ |
240 | ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) |
241 | } |
242 | lastexpanded={$header:$(this), $content:$subcontent} |
243 | } |
244 | else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ |
245 | ddaccordion.collapseit($(this), $subcontent, config, true) |
246 | } |
247 | }) |
248 | |
249 | //绑定用户配置的事件，如果是mouseenter，就在用户配置的延时之后执行手风琴动画，否则触发evt_accordion事件。 |
250 | $headers.bind(config.revealtype, function(){ |
251 | if (config.revealtype=="mouseenter"){ |
252 | clearTimeout(config.revealdelay) |
253 | var headerindex=parseInt($(this).attr("headerindex")) |
254 | config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex, config.scrolltoheader)}, config.mouseoverdelay || 0) |
255 | } |
256 | else{ |
257 | $(this).trigger("evt_accordion", [true, config.scrolltoheader]) |
258 | return false |
259 | } |
260 | }) |
261 | |
262 | //如果用户的mouseleave了，就清除即将要运行的手风琴动画 |
263 | $headers.bind("mouseleave", function(){ |
264 | clearTimeout(config.revealdelay) |
265 | }) |
266 | |
267 | //执行oninit方法 |
268 | config.oninit($headers.get(), expandedindices) |
269 | |
270 | //页面在退出时候记录下用户离开前打开的headers |
271 | $(window).bind('unload', function(){ |
272 | $headers.unbind() |
273 | var expandedindices=[] |
274 | $subcontents.filter(':visible').each(function(index){ |
275 | expandedindices.push($(this).attr('contentindex')) |
276 | }) |
277 | if (config.persiststate==true && $headers.length>0){ |
278 | expandedindices=(expandedindices.length==0)? '-1c' : expandedindices |
279 | ddaccordion.setCookie(config.headerclass, expandedindices) |
280 | } |
281 | }) |
282 | }) |
283 | } |
284 | } |
285 |
286 | //把默认配置的loading动画需要的图片加载到客户端 |
287 | ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img')) |
初始化参数：
（更多内容：http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm ）
| Option | Description | |||
| headerclass | Shared CSS class name of headers containers. | |||
| contentclass | Shared CSS class name of contents containers. | |||
| revealtype | Reveal content when user clicks or onmouseover the header? Valid values are: "click", "clickgo", or "mouseover". The difference between " | |||
| mouseoverdelay | If revealtype above is set to "mouseover", set delay in milliseconds before header expands onMouseover. | |||
| collapseprev | Collapse previous content (so only one open at any time)? true/false. | |||
| defaultexpanded | Index(es) of content(s) that should be open by default in the format [index1, index2, etc], where 0=1st content, 1=2nd content etc. [] denotes no content should be open by default. | |||
| scrolltoheader v2.0 option | If set to true will scroll to the expanded header after its content has been revealed. It is only triggered when the user explicitly expands a header (either by clicking on a header or calling the expandone() method), and NOT when the page initially loads. Defaults to false. | |||
| onemustopen | Collapse previous content (so only one open at any time)? true/false. | |||
| animatedefault | Should contents that are open by default be animated into view? true/false. | |||
| persiststate | Persist state of opened contents within a browser session, so returning to the page recalls the saved states? true/false. | |||
| toggleclass | Specifies two CSS classes to be applied to the header when it's collapsed and expanded, respectively, in the form["class1", "class2"]. Enter a blank string inside either of the two to denote no CSS class, for example: ["", "class2"]. | |||
| togglehtml | This option lets you optionally add additional HTML to each header when it's expanded and collapsed, respectively. It accepts 3 parameters:
togglehtml: ["none", "", ""], For the first parameter, 4 possible values supported: "
Set the first parameter to "
In the above example, instead of using regular container headers like a H1 tag, I'm using images instead. In other words, clicking on the images will expand/collapse content. In such a case, I can get the script to dynamically update the image shown by setting " | |||
| animatespeed | Speed of sliding animation. Value should be an integer in milliseconds (ie: 200), or one of the keywords "fast", "normal", or "slow". | |||
| oninit | Event handler that fires when the headers have initailized for the first time on the page. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers." | |||
| onopenclose | Event handler that fires whenever a header is expanded or contracted. For more info, see: "Taking advantage of the oninit() and onopenclose() event handlers." |
外部可用方法：
（更多内容：http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm ）
| Method | Description |
|---|---|
ddaccordion.expandone('header_class', index) | Expands a particular header's content. Parameters:
Example: <a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> |
iddaccordion.collapseone('header_class', index) | Collapses a particular header's content. Parameters:
|
ddaccordion.toggleone('header_class', index) | Toggle's the state of a particular header's content. If the content was previously collapsed, it will expand it, and visa versa. Parameters:
<a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a> |
ddaccordion.expandall('header_class') | Expands all headers within a group (one with the same shared CSS class name). Parameters:
Example: <a href="#" onClick="ddaccordion.expandall('mypets'); return false">Expand all headers</a> Note: If you call this method on a group of contents that's been set to allow only one open at any given time, only the very last content will expand as a result due to this stipulation. |
ddaccordion.collapseall('header_class') | Collapses all headers within a group (one with the same shared CSS class name). Parameters:
|
代码示例：
- <script type="text/javascript">
- //Initialize first demo:
- ddaccordion.init({
- headerclass: "mypetsA", //Shared CSS class name of headers group
- contentclass: "thepetA", //Shared CSS class name of contents group
- revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
- collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
- defaultexpanded: [1], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
- onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
- animatedefault: false, //Should contents open by default be animated into view?
- persiststate: false, //persist state of opened contents within browser session?
- toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
- togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
- animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
- oninit:function(headers, expandedindices){ //custom code to run when headers have initialized
- for (var i=0; i<expandedindices.length; i++){
- var expandedindex=expandedindices[i] //index of current expanded header index within array
- headers[expandedindex].style.backgroundColor='black'
- headers[expandedindex].style.color='white'
- }
- }
- })
- </script>
2539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
