2

一般的想法是制作一个看起来像 windows 环境的网站，所以我添加了两个图标，例如当有人点击它们时，会出现两个不同的对话框。

在我网站的索引页面中，我在头标签中添加了这个：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!-- JQUERY DIALOG SCRIPT -->
<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog").dialog("open");
        });
    });
</script>

我还有两个单独的 php 文件，它们包含在我的索引页面中，它们包含这个......

第一的：

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

第二

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>

如果我不包括第二个，对话框工作正常。如果我把它们都放在，没有一个工作！有什么方法可以将我的 jquery 对话框脚本用于同一页面中的多个对话框？

4

5 回答 5

1

请记住，ID 在页面上必须是唯一的。

因此，您应该简单地为您的对话框提供不同的 ID。像#rl_module_dialog_1和 #rl_module_dialog_2

稍后您可以初始化这些对话框，例如：

$JQ_("#rl_module_dialog_1,#rl_module_dialog_2").dialog({...});

当然，要打开对话框，您需要指定相应的 id：

$JQ_("#rl_module_dialog_1").dialog("open");

编辑：

为了不为每个图标放置大量点击处理程序，您可以执行以下操作：

<div class="rl_module_dialog" id="dialog1" title="">Dialog 1</div>
<div class="nm_icon opener" data-dialog="dialog1"><div class="icon">Open 1</div></div>
<div class="rl_module_dialog" id="dialog2" title="">Dialog 2</div>
<div class="nm_icon opener" data-dialog="dialog2"><div class="icon">Open 2</div></div>

查看图标 div 现在有data-dialog=""- 即指定单击图标时应打开的对话框的 ID。

所有对话框的单击处理程序： 

$(".opener").click(function () {            
     $("#" + $(this).data("dialog")).dialog("open");
});

$(this).data("dialog")取值data-dialog。演示：http: //jsfiddle.net/X6qhH/3/

于 2013-08-28T08:07:38.207 回答
0

对话 id 应该是这样的

rl_module_dialog_1

rl_module_dialog_2

最短代码

$JQ_('[id^="rl_module_dialog"]').dialog({...});

打开你可以使用

$JQ_("#rl_module_dialog_1").dialog("open");

属性等于选择器

^ 属性以选择器开始

Description: Selects elements that have the specified attribute with 
a value beginning exactly with a given string.
于 2013-08-28T08:22:12.290 回答
0

对 div 使用不同的 id 然后它可能会修复

第一的 ：

<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon">&nbsp;</div></div>

第二：

<div id="rl_module_dialog_two" class="rl_module_dialog" title=""><?php include '**/**/something_else.php'; ?></div>
<div class="vath_icon" id="opener"><div class="icon">&nbsp;</div></div>



<script>
    var $JQ_ = jQuery.noConflict();
    $JQ_(function () {
        $JQ_("#rl_module_dialog").dialog({
            autoOpen: false,
            width: 'auto',
            resizable: false,
            show: {
                effect: "fade",
                duration: 250
            },
            hide: {
                effect: "fade",
                duration: 250
            }
        });
        $JQ_("#opener").click(function () {
            $JQ_("#rl_module_dialog_two").dialog("open");
        });
    });
</script>
于 2013-08-28T08:06:17.927 回答
0

这两个对话框都具有相同的 ID。使第二个对话框具有id="rl_module_dialog2"并初始化它

$JQ_("#rl_module_dialog2").dialog({
    autoOpen: false,
    width: 'auto',
    resizable: false,
    show: {
        effect: "fade",
        duration: 250
    },
    hide: {
        effect: "fade",
        duration: 250
    }
});

只需打开你的开启按钮，就像

$JQ_("#opener").click(function(){
    $JQ_("#rl_module_dialog").dialog("open");
    $JQ_("#rl_module_dialog2").dialog("open");
});
于 2013-08-28T08:03:55.333 回答
0

首先。不要在同一页面上使用多个 ID。

也就是说，我已经重做您的代码以处理 jQuery UI 对话框的多个实例。

小提琴演示

var $JQ_ = jQuery.noConflict();

$JQ_('.rl_module_dialog').hide();

$JQ_('.opener').each( function() {
    $JQ_.data(this, 'dialog',
           $JQ_(this).prev('.rl_module_dialog').dialog({
               autoOpen: false,
               width: 'auto',
               resizable: false,
               show: {
                   effect: 'fade',
                   duration: 250
               },
               hide: {
                   effect: 'fade',
                   duration: 250
               }
           })
     );
}).click( function() {
    $JQ_.data(this, 'dialog').dialog('open');
});

希望这对你有用。

于 2013-08-28T08:04:06.990 回答