Question

我正在尝试在对话框小部件中添加一个标签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()的调用没有做它应该做的事情。所以实际渲染的是一个无序列表，而不是一个制表符控件。

有什么想法，为什么这不起作用？

Answer 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;
}

JQuery的：

$(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

选项卡控件内部对话框控件

1 个答案: