拖放式手风琴面板? (ASP.Net)
我有一套Accordion控件中包含的一组手风琴窗口(动态创建)。基本上,我想是让用户能够拖动这些手风琴面板,使代替拖放式手风琴面板? (ASP.Net)
A pane B pane C pane
他们可以将它拖放到是像
B pane A pane C pane
或什么的。另外,更重要的是,我需要能够检测到他们已经改变了顺序。当他们“删除”它可以更新隐藏字段或其他东西的窗格时,是否有办法获得它?我不需要在每次拖放时进行回发,但是我希望当他们点击保存按钮时,服务器应用程序检测窗格的顺序,以便它可以保存此订单。
我宁愿远离JavaScript库,但如果它是最简单的方法,那么我会考虑它。
基于petersendidit's answer但没有“消失手风琴”错误的响应...
<div id="accordion">
<div id="section_1">
<h3>Section 1</h3>
<p>
Body 1
</p>
</div>
<div id="section_2">
<h3>Section 2</h3>
<p>
Body 2
</p>
</div>
<div id="section_3">
<h3>Section 3</h3>
<p>
Body 3
</p>
</div>
<div id="section_4">
<h3>Section 4</h3>
<p>
Body 4
</p>
</div>
</div>
和
$("#accordion").accordion({
header:'h3'
}).sortable({
items:'>div'
});
- 这widget可能是诸如此类的事情,你是后。
您可以添加链接到JavaScript中的头
<link rel="stylesheet" type="text/css" href="accordion.css">
<script type="text/javascript" src="Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="Ext.ux.Accordion.js"></script>
标记是那么只是一系列的div。随着一点点努力,你应该能够配合这成手风琴控制或创建用户控制听从你的命令
<div id="acc-ct" style="width:200px;height:300px">
<div id="panel-1">
<div>My first panel</div>
<div>
<div class="text-content">My first panel content</div>
</div>
</div>
<div id="panel-2">
<div>My second panel</div>
<div>
<div class="text-content">My second panel content</div>
</div>
</div>
</div>
它的一个预览可用here
希望这有助于
你可以做这样的事情与jQuery UI:
$("#accordion").accordion()
.sortable({
items:'>.ui-accordion-header',
change: function(event, ui) {
$content = ui.item.next();
},
stop: function(event, ui) {
ui.item.after($content);
}
});
它设置$内容到内容DIV为头呃变化。然后停止将该内容移动到标题的新位置之后。
HTML会是这样的:
<div id="accordion">
<h3 id="section_1"><a href="#">Section 1</a></h3>
<div>
<p>
Body 1
</p>
</div>
<h3 id="section_2"><a href="#">Section 2</a></h3>
<div>
<p>
Body 2
</p>
</div>
<h3 id="section_3"><a href="#">Section 3</a></h3>
<div>
<p>
Body 3
</p>
</div>
<h3 id="section_4"><a href="#">Section 4</a></h3>
<div>
<p>
Body 4
</p>
</div>
</div>
当用户点击 “保存” 按钮,你可以致电:
$('#accordion').sortable('serialize');
,这将给你是这样的:
section[]=2§ion[]=1§ion[]=3§ion[]=4
我试过这个,它不允许我拖放手风琴窗格,以便诉诸他们。代码,它不允许拖放。我从来没有使用过jQuery,所以可能会有一些微不足道的错误,您的代码我没有看到 – Earlz 2009-12-03 14:26:37
http://jsbin.com/akoki – PetersenDidIt 2009-12-03 15:08:51
好吧,我没有包括jqueryui文件(只是jquery)无论如何,这看起来不错jQuery的目的是为了做到这一点?因为我发现一个非常糟糕的错误,你可以在其他窗格中放置窗格,以便它们消失(很容易打算也) – Earlz 2009-12-03 15:18:33
推荐使用> div。[ACCORDION PANE CLASS] – Earlz 2009-12-08 22:12:48
也许我做错了,但这个演示根本不适用于我 – 2014-09-15 13:03:18
@daveL不,你说得对 - 它看起来像是在最后一次停止工作5年... – Stobor 2014-09-16 00:11:24