Question

我正在使用JQuery对话框并希望在其中集成一些标签，但标签不起作用。在具有打开对话框链接的页面上，我加载了JQuery。 JQuery doe似乎没有在对话框中加载。

我是否需要再次添加内联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>

Answer 1

对我来说似乎工作正常，如果您需要进一步的帮助，则需要发布您的代码。我唯一要做的就是为对话框指定增加的高度和宽度，以便更好地显示内容。

我能想到的唯一复杂因素是如果你通过AJAX加载对话框的内容，那么$(document).ready()可能不会正确地初始化标签。

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

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

动态加载对话框内容

这是根据您提供的其他信息进行的修改。

所以你的基本想法是做这样的事情：

点击链接/按钮，这将触发您的代码以获取对话框的内容
希望您拥有的代码允许您传递所谓的callback function。您可以在此处指定在内容加载完成后（或任何其他任务）自动调用的函数。
在回调函数中，您可以初始化选项卡并显示对话框。

这样的事情：

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

Answer 2

我这样做了：

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

index.html：

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

view.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>

Jquery选项卡不在对话框内工作

2 个答案:

动态加载对话框内容