2

一般的な考え方は、Windows 環境のように見えるサイトを作成することです。そのため、たとえば 2 つのアイコンを追加し、誰かがそれらをクリックすると、2 つの異なるダイアログ ボックスが表示されます。

私のサイトのインデックス ページに、これを head タグ内に追加しました。

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

また、インデックスページに含まれる2つの個別の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>

2番

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

2 番目のものを含めない場合、ダイアログは正常に機能します。両方を配置すると、どれも機能しません! 同じページの複数のダイアログに 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>

2番目：

<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 を持っています。2番目のダイアログを作成して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 に答える