我希望有一个类似于JQUERY Accordian插件提供的UI元素,但允许用户一次打开多个部分。
文档有以下说明,并提出了一个代码片段的替代方法(见下文)。这是伟大的,所有的,他们提供的代码基本上有效,但我发现自己重新创建了很多东西内置到插件,如切换类和手动应用在XHTML中的主题。
我的问题:
>在我走得太远之前
手动路线,有谁知道a
类似的插件,或mod到这个
以允许多个面板打开
立刻?
>是否有另一个通用名称
手风琴般的控制
允许多个打开的面板我
可以用于谷歌的其他
选项?
以下是我从文档中引用的部分,如果重要。
NOTE: If you want multiple sections open at once,don’t use an accordion
An accordion doesn’t allow more than
one content panel to be open at the
same time,and it takes a lot of
effort to do that. If you are looking
for a widget that allows more than one
content panel to be open,don’t use
this. Usually it can be written with a
few lines of jQuery instead,something
like this:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); }); Or animated: jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
解决方法
感谢大家的建议,但我终于找到了一些我自己正在寻找的东西。我把它作为一个需要类似东西的人的答案。
解决方案
使用代码和示例XHTML here,您可以扩展JQuery Accordion plug-in,以便同时打开多个面板,并保留插件提供的主题和其他功能,而无需重新创建样式。
看到上面链接的网站一个完整的例子,但这里是使手风琴控制允许多个面板打开所需的代码的肉。使用相同的HTML来定义标题和内容,如插件文档中所述
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script> <script type="text/javascript"> $(function() { $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons") .find("h3") .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom") .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>') .click(function() { $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active") .toggleClass("ui-state-default").toggleClass("ui-corner-bottom") .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s") .end().next().toggleClass("ui-accordion-content-active").toggle(); return false; }) .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide(); }) </script>