使用jquery将项目添加到jQuery Accordion
我正在使用jQuery手风琴插件来制作一些数据的手风琴。 那么我希望用户能够给手风琴添加更多的数据。 我已经设置了手风琴正常工作,然后我做了一个函数,将手风琴语义相匹配的手风琴的“列表项”。
是否有可能“手动更新”手风琴,使其与新添加的元素一起工作,而不将新数据保存到数据库并刷新页面?
像这样的东西:
.accordion('refresh')
或者像jQuery 1.3中添加的现场活动,任何人都有线索?
我没有testing过,但是这可能是有效的:假设你的手风琴号是#accordion
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>') .accordion('destroy').accordion();
基本上,只要摧毁和重build手风琴。
更新:
由于这个答案是写了一个refresh()方法已经添加到手风琴部件。 它可以通过调用:
$( ".selector" ).accordion( "refresh" );
你可以在这里阅读更多关于这个方法
要添加一个新的部分,并保持旧的活动:
var active = $('#accordion').accordion('option', 'active'); $('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>') .accordion('destroy').accordion({ active: active});
正如上面Shahzad所提到的,jQuery UI 1.10让这个变得简单了。 请参阅文档 。
你可能想看看LiveQuery插件: http ://plugins.jquery.com/project/livequery
它允许您在加载DOM后添加事件和绑定。
因为我需要一个工作添加/编辑/删除vor手风琴项目我砍了这个小javascript函数为此目的
H3和DIV需要一个唯一的ID按照以下惯例
<h3 id="divname_hitm_<uniquenumber>"><h3>
相应的div需要以下内容
<div id="divname_ditm_<samenumber as h3"></div>
样品手风琴代码块
<div id="divname"> <h3 id="divname_hitm_1><a href="#">Section 1</h3> <div id="divname_ditm_1> <p>Section 1 Payload</p> </div> <h3 id="divname_hitm_2><a href="#">Section 2</h3> <div id="divname_ditm_2> <p>Section 2 Payload</p> </div> </div>
玩得开心也许它有助于一些脂肪酶在那里!