index.php中的多个jquery对话框
Multiple jquery dialogs in index.php
一般的想法是制作一个看起来像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文件,它们被iclude到我的索引页面中,它们包含。。。
第一个:
<div id="rl_module_dialog" class="rl_module_dialog" title=""><?php include '**/**/something.php'; ?></div>
<div class="nm_icon" id="opener"><div class="icon"> </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"> </div></div>
如果我不包括第二个,对话框工作正常。如果我把它们都放在那里,没有一个有效!有什么方法可以将我的jquery对话框脚本用于同一页面中的多个对话框?
请记住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/
对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"> </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"> </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>
这两个对话框都有相同的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");
});
对话框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.
首先。不要在同一页上使用多个ID。
也就是说,我已经重新编写了您的代码,以便使用jQueryUI对话框的多个实例。
FIDDLE演示
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');
});
希望这对你有用。
- 使用jquery对话框中的箭头键
- 获取打开jquery对话框的button的id
- 我怎么能让jQuery对话框表现得像Javascript警报
- 无法在其他调用上设置jQuery对话框选项
- 如何在jQuery对话框标题栏中添加额外的按钮
- 从jquery对话框恢复原始数据,脚本不起作用
- Jquery对话框('打开')不工作
- 通过Rails中的自定义Jquery对话框处理链接的确认
- 阻止Jquery对话框内容的CSS应用于主窗口
- jquery对话框内容仅针对第一个请求进行对齐
- 在鼠标悬停时保持 JQuery 对话框打开
- 带有 iframe 的 jquery 对话框
- 单击函数生成的 jQuery 对话框中的元素
- 在jquery对话框中加载html页面
- JQuery对话框中的Bootstrap Pills
- JQUERY对话框未捕获错误:初始化之前无法调用对话框上的方法
- Jquery对话框的大小调整只发生在它的第一次's已打开
- 打开对话框后,JQuery对话框的条件调整大小为内容高度
- jquery对话框会记住以前的输入
- Jquery.对话框未从表中的图像输入打开