我有一个aspx页面,其中两个面板具有相同的类,它应该作为对话框.我正在尝试使用对话框("打开")打开对话框,但它似乎不起作用.以下是代码段.
<script type="text/javascript">
$(document).ready(function() {
$(".descPanel").dialog({ autoOpen: false,
open: function() {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
$('.image').mouseover(function() {
$($(this).parent()).children('.descPanel').dialog('open');
});
});
</script>
HTML Strcuture:
<form id="form1" runat="server">
<div>
<table>
<tr id="tr">
<td></td>
<td></td>
<td>
<asp:Image runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
<asp:Panel runat="server" ID="mypanel" CssClass="descPanel">
<asp:Label runat="server" ID="mylabel" CssClass="label" Text="hello"></asp:Label>
</asp:Panel>
</td>
</tr>
</table>
<table>
<tr id="tr">
<td></td>
<td></td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Jquery/Untitled.jpg" CssClass="image" />
<asp:Panel runat="server" ID="Panel1" CssClass="descPanel">
<asp:Label runat="server" ID="Label1" CssClass="label" Text="hello1111"></asp:Label>
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
我已经验证指向对话框的元素已正确引用.任何解决方案,以便我可以使它工作？
总的来说,您的代码应该是这样的:
$('.image').each(function() {
var panel = $(this).siblings('.descPanel');
$(this).mouseover(function() {
panel.dialog('open');
});
});
$(".descPanel").dialog({
autoOpen: false,
open: function() {
$(this).siblings(".ui-dialog-titlebar").addClass("ui-state-error");
}
});
为什么？好吧,当你把.dialog()它称为包装<div>在另一组元素中时,但更重要的是它将这些元素移动到结尾<body>,所以它们不再相对找到了.在上面我们找到了与图像一起使用的面板,并在它们移动之前存储了对它们的引用.
顺便说一句,你应该id="tr"从你的代码中删除它,重复的ID只是麻烦!(和无效的HTML),在这些情况下使用一个类.
刚发现您还可以open通过执行以下操作将函数绑定到事件:
yourDialog.bind("dialogopen", function(event, ui) {
//your code here
});
| 归档时间： |
|
| 查看次数： |
14427 次 |
| 最近记录： |