0

我试图在对话框小部件中粘贴一个选项卡 jQuery UI 小部件，但它对我不起作用。我有一堆数据正在从数据库中检索并呈现在屏幕上。当用户单击 (+) 按钮时，应打开一个对话框，其中的内容为选项卡。由于某种原因，这不起作用。这是我的代码：

HTML结构如下：

<div id="tabs-{index}">
<ul>
<li><a href="#some-id-{index}">title1</a></li>
<li><a href="#another-id-{index}">title2</a></li>
</ul>

<div id="some-id-{index}>content</div>
<div id="another-id-{index}">content</div>
</div>

这是我的 jQuery 代码：

    $('#disease-read-more-dialog').dialog({
        dialogClass: 'disease-read-more',
        autoOpen: false,
        modal: false,
        draggable: false,
        width: '500px',
        open: function () {
            $('#ui-dialog-title-disease-read-more-dialog').html($('#disease-read-more-dialog').attr('title'));
            var content = $('#disease-read-more-dialog').find('.hidden-disease-info').first();
            if (content.length > 0) {
                var index = content.data('index');
                var selector = '#read-more-tabs-' + index;
                $(selector).tabs();
            }
        }
    });

请注意，仅使用索引是因为我在页面加载时在屏幕上输出了所有数据而不是执行 AJAX 请求（因为数据量相对较小），然后当用户单击（+）时我加载将 HTML 内容添加到对话框中。因此，索引用于防止弄乱标签 ID。

更新：

它不起作用，因为调用$(selector).tabs()不做它应该做的事情。所以实际呈现的是无序列表而不是选项卡控件。

任何想法为什么这不起作用？

4

1 回答 1

1

使用 jQuery UI 在对话小部件中显示选项卡小部件的完整解决方案如下：

HTML：

    <div id="dialgue" title="Tabs with Dialogue">
    <div id="tabs">
      <ul>
        <li>
        <a href="#tabs-1">
          Tab-1
        </a>
      </li>
      <li>
        <a href="#tabs-2">
          Tab-2
        </a>
      </li>
      <li>
        <a href="#tabs-3">
          Tab-3
        </a>
      </li>
    </ul>
    <div id="tabs-1">
      <p>
        Contents of Tab-1 has been displayed here...!
      </p>
    </div>
    <div id="tabs-2">
      <p>
        Contents of Tab-2 has been displayed here...!
      </p>
    </div>
    <div id="tabs-3">
      <p>
        Contents of Tab-3 has been displayed here...!
      </p>
    </div>
     </div>
   </div>
<input type="button" id="btndialogue" value="Show Dialogue with Tabs" />

CSS：

.ui-widget{
  font-size:14px !important;
}
.ui-dialog-title{
  font-weight:bold;
}
.ui-tabs .ui-tabs-nav{
  font-size:13px;
}
.ui-tabs-panel{
  font-size:12px;
}

查询：

$(function() {
    $("#dialgue").dialog({
        autoOpen: false,
        modal: false,
        draggable: false,
        title: 'Tabs with Dialogue',
        show: 'slide',
        hide: 'slide',
        width: '500',
        open: function(event, ui) {
            $("#tabs").tabs();
        }
    });
    $("#btndialogue").click(function() {
        $("#dialgue").dialog('open');
    });
});

注意：在测试/运行上述脚本之前，需要包含最新的 jquery.js、jquery-ui.js 和 jquery-ui.css 文件。

我用http://codebins.com/codes/home/4ldqpbx上的解决方案创建了一个 bin

于 2012-07-03T11:41:35.590 回答