1

JQuery ダイアログを使用していて、内部にいくつかのタブを統合したいのですが、タブが機能しません。ダイアログを開くためのリンクがあるページで、JQuery をロードしました。ただし、JQueryはダイアログ内にロードされていないようです。

インライン JavaScript スクリプト タグを再度含める必要がありますか? ダイアログは、その下のページから JQuery ライブラリを継承していませんか?

編集：

ダイアログにロードしているものは次のとおりです。

<script type="text/javascript">
  $(function() {
    $("#admin").tabs();
  });
</script>
<div id="admin">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>

  <div id="tab1">
    tab1
  </div>

  <div id="tab2">
    tab2
  </div>

  <div id="tab3">
    tab3
  </div>
</div>
4

2 に答える 2

2

さらに支援が必要な場合は、コードを投稿する必要があります。私がしなければならなかった唯一のことは、ダイアログの高さと幅を大きく指定して、内容がよりよく表示されるようにすることでした.

私が考えることができる唯一の複雑さは、AJAX を介してダイアログの内容を読み込んでいる場合、$(document).ready()おそらくタブを適切に初期化しないことです。

JSFiddle の例: http://jsfiddle.net/geekman/9WBJt/3/

$(document).ready(function() {
    $('#tabs').tabs();
    $('#modal').dialog({
        height: 500,
        width: 600,
    });
});

ダイアログの内容を動的にロードする

これは、提供された追加情報に基づく編集です。

したがって、あなたの基本的なアイデアは、次のようなことです。

  1. リンク/ボタンをクリックすると、コードが起動され、ダイアログのコンテンツが取得されます
  2. あなたが持っているコードで、コールバック関数として知られているものを渡すことができれば幸いです。ここで、コンテンツの読み込み (またはその他のタスク) が完了すると自動的に呼び出される関数を指定できます。
  3. コールバック関数で、タブを初期化し、ダイアログを表示できます。

だから、このようなもの：

<button type="button" id="my-link">Load Me!</button>
<div id="dialog">
    <div id="dialog-content">
    </div>
</div>


$(document).ready(function() {
    $('#my-link').click(function () {
        //Begin loading your content however you do it.
        //In this case I'm using AJAX because it's one of the most common ways to dynamically load content in JavaScript
        $.get('http://url-to-your-content.com/my-template', '',
            //We can use an anonymous function as our callback function, or define it seperately then call it here.
            //$.get() will call it, and put the contents of my-template in the result variable for us to use.
            function (result) {
                //Insert the result into the div ID dialog-content (I'm assuming the fetched data is HTML).
                var dialog_content = $('#dialog-content');
                dialog_content.html(result);
                //Now, render the HTML in dialog-content as JUI tabs
                dialog_content.tabs();
                //How display your dialog box
                $('#dialog').dialog();
            }, 'html');
    });

    $('#tabs').tabs();
    $('#modal').dialog({
        height: 500,
        width: 600,
    });
});
于 2013-10-07T19:15:10.677 に答える