我正在尝试使用Jquery对话框,但我得到的对象并不支持属性或方法对话框'错误。将不胜感激任何指导。对话框功能现在是否已弃用。我使用的是jquery-1.5.2.min.js。这是我的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
body {
font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
border-width: 0 8px 8px 8px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("#Button1");
var Button2 = $("#Button2");
var Panel1 = $("#Panel1");
var dil = $("#dialog");
Button1.click(function (e) {
//Panel1.slideDown();
e.preventDefault();
$("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function () {
$(this).dialog("close");
}
}
})
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br />
<br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</div>
<div id="dialog" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
<br />
<br />
Our hotel will reopen at 11th of January 2011.<br />
<br />
Another line which demonstrates the auto height adjustment of the dialog component.
</p>
</div>
</div>
</form>
</body>
</html>
答案 0 :(得分:2)
你可能在这里犯了一个小错误:
<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
我希望你的意思是包含jQuery,然后是包含dialog
扩展名的脚本(可能是jQuery UI,或者是打包的子集)。
因此,请将脚本标记更改为...
<script src="Scripts/jquery-v.v.v.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-v.v.v.min.js" type="text/javascript"></script>
答案 1 :(得分:0)
您在同一页面上包含两个版本的jquery,而您忘记包含jquery-ui:)