我是JQuery的新手,我无法创建可重用的对话框。这是我的代码
$(function () {
$("#baseDialog").dialog({
autoOpen: false,
modal: true,
width: 520,
show: "blind",
hide: "explode"
});
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
我使用这个对话框:
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<!-- here goes some ASP .NET MVC 2 code -->
</div>
问题是我想在很多页面中多次重复使用这个对话框,但是html内容不同,我不知道怎么做,因为我不能使用class属性因为我需要使用的样式。我不能在同一页面上使用具有相同值的id attrubutes。
而我无法像这样使用它?也许使用另一个属性而不是id(类为css保留)?
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<form>...</form>
</div>
<input id="baseDialogOpener" type="button" value="Update 2" />
<div id="baseDialog" title="Test Dialog 2" class="divClass">
<form>...</form>
</div>
期待您的回答。
更新:我使用类属性执行上面的代码,但是当我点击按钮时,所有对话框都会立即出现。有什么方法可以解决这个问题吗?
答案 0 :(得分:3)
该对话框可以在服务器打开时从服务器加载.htm文件中的内容。
您可以使用以下内容:
$("#baseDialogOpener").click(function () {
$("#baseDialog").load('content.htm');
return false;
});
更新:此代码显示了如何让相同的.click()根据按钮显示不同的内容。
$("dialogButton.").click(function () {
$("#baseDialog").load($(this).data('content'));
return false;
});
<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />
答案 1 :(得分:1)
您可以使用多个class
代替id
。
例如,而不是:
<div id="baseDialog" title="Test Dialog" class="divClass">
使用
<div title="Test Dialog" class="divClass baseDialog">
然后你可以在你的javascript中引用它:
你在哪里
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
尝试
$(".baseDialogOpener").click(function () {
$(this).children(".baseDialog").dialog("open");
return false;
});
$(this)
只抓取点击的内容,这样你就可以拥有多个同类的类。