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

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のソリューションでビンを作成しました

于 2012-07-03T11:41:35.590 に答える