JQuery UI 弹出窗口(Dialog)

JQuery UI 弹出窗口(Dialog)


从官方网站下载最新的 http://jqueryui.com/download 的Jquery-ui build.

解压文件到, 比如 D:\jquery-ui-1.8.21.custom\

在D:\ 建个目录如 D:\my_web_app

在该目录下建个html文件, test.html

test.html 内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Button Demos</title>
	<link rel="stylesheet" href="../jquery-ui-1.8.21.custom/development-bundle/themes/base/jquery.ui.all.css">
	<script src="../jquery-ui-1.8.21.custom/development-bundle/jquery-1.7.2.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.mouse.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.draggable.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.position.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.resizable.js"></script>
	<script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.dialog.js"></script>
	<link rel="stylesheet" href="../jquery-ui-1.8.21.custom/development-bundle/demos/demos.css">
	<script>
	$(function() {
		$( "#dialog" ).dialog();
	});
	</script>
</head>
<body>

<div id="dialog" title="Basic dialog">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>


下面是运行之后的效果图:

JQuery UI 弹出窗口(Dialog)_第1张图片


你可能感兴趣的:(jquery,UI,basic,dialog,button,stylesheet)