JQuery Accordion:如何将它嵌入到对话框中?

时间:2010-05-08 00:28:49

标签: jquery jquery-dialog jquery-ui-accordion

我想设计一个包含3个部分手风琴的对话框,有谁知道如何实现这个目标?我正在尝试使用JQuery手风琴示例,但仍然没有成功。我很感激你的想法。

3 个答案:

答案 0 :(得分:1)

查看此link,大约一半的页面是一个很好的例子

答案 1 :(得分:1)

如果您尝试将其嵌入弹出式alert()框中,则无法执行此操作。你最好的选择是创建自己的模态弹出窗口。

使用jQuery UI的对话框http://jqueryui.com/demos/dialog/是一个很好的基础,有很多在线文档和使用,但您可能只想自己创建一个叠加层。这只是意味着使用jQuery创建一个绝对放置的DIV。

$("body").append("<div id='modal'>All of your markup</div>");

使用CSS作为样式表中的模态窗口,如

#modal {
  position:absolute; /* could be 'fixed', but then you have to deal with browsers */
  top:10%;
  left:25%;
  width:50%;
  height:500px;
  overflow:auto;
}

等等。

答案 2 :(得分:1)

简单方法

$('#someDiv').accordion().dialog();

所以对于三个部分

<div id="someDiv">
  <h3><a href="#">Section 1</a></h3>
  <div>Section 1 content</div>
  <h3><a href="#">Section 2</a></h3>
  <div>Section 2 content</div>
  <h3><a href="#">Section 3</a></h3>
  <div>Section 3 content</div>
</div>

您可能想要自定义。

$('#someDiv')
  .accordion({
    active: 2,
    collapsible: true
  })
  .dialog({
    width: 500,
    height: 350,
    title: 'Some title'
  });

祝你好运!