Несколько диалогов jquery в index.php

Question

Основная идея состоит в том, чтобы создать сайт, который похож на среду 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, которые icluded на моей странице индекса, и они содержат это ...

Первое:

<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 для более чем одного диалога на одной странице?

Answer 1

Помните, что идентификаторы должны быть уникальными на этой странице.

Таким образом, вы должны просто указать разные идентификаторы для своих диалогов.Что-то вроде #rl_module_dialog_1 и #rl_module_dialog_2

Позже вы можете инициализировать эти диалоги как:

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

И, конечно же, чтобы открыть диалоговые окна, вам нужно будет указать соответствующий идентификатор:

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

Смотреть значок дивы теперь data-dialog="" - это указать идентификатор диалога, который должен быть открыт, когда значок кнопки.

И один щелчок обработчик для всех диалогов:

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

$(this).data("dialog") принимает data-dialog значения. Демо: http://jsfiddle.net/X6qhH/3/

Answer 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"); 
}); 

Answer 3

Прежде всего. Не используйте несколько идентификаторов на одной странице.

При этом я переделал код для работы с несколькими экземплярами диалогового окна интерфейса jQuery.

FIDDLE DEMO

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

Будем надеяться, что это работает для вас.

Answer 4

использовать разные идентификатор для DIV, то он может фиксированной

первый:

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

Answer 5

диалоговые идентификаторы должны нравится этот

rl_module_dialog_1

rl_module_dialog_2

короткий код

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

открыть можно использовать

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

attribute-equals-selector

^attribute-starts-with-selector

Description: Selects elements that have the specified attribute with 
a value beginning exactly with a given string.