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 回答
0

我这样做了：

$("#try").dialog({
      autoOpen: false,
      open: function (){
            var url = "view.html";
            $("#try").load(url, function(){
                $("#tabs").tabs();
            }); 
      },
});
$("#open_tab").click(function() {
     $("#try").dialog('open');
     }
);

索引.html：

<div id="try" title="Tabs On Dialog">
</div><input type="submit" id="open_tab" value="Open">

视图.html：

<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">
    test 1
</div>

<div id="tabs-2">
    test 2
</div>

<div id="tabs-3">
    test 3
</div>

于 2014-03-20T05:01:11.143 回答