jquery dialog

最新推荐文章于 2023-04-10 08:53:48 发布

langga跳跃

最新推荐文章于 2023-04-10 08:53:48 发布

阅读量1.5k

点赞数

文章标签： jquery dialog stylesheet function xhtml 测试

首先要实现dialog的功能需要导入一下几个基本包：

1.jquery的核心包

2.jquery.ui.core.js为ui类的核心包

3.jquery.ui.widget.js为ui的小窗体

4.jquery.ui.dialog.js为对话框的专用js

同时还要导入

jquery.ui.all.css这个层叠样式表

一下几个包是与dialog常用在一起的。

jquery.ui.mouse.js用于当鼠标放在dialog的头部时出现十字架，同时也与其他包配合

jquery.ui.draggable.js用于拖动，同时与mouse包配合一起使用。

jquery.ui.position.js用于dialog出现时居中显示

jquery.ui.resizable.js用于调整dialog的长宽，若没有，无法调整。

最简单的对话框例子

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="development-bundle/themes/base/jquery.ui.all.css"/>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src="development-bundle/ui/jquery.ui.widget.js"></script>
<script src="development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="development-bundle/ui/jquery.ui.dialog.js"></script>
<script src="development-bundle/ui/jquery.ui.position.js"></script>
<script src="development-bundle/ui/jquery.ui.resizable.js"></script>

<script>
$(document).ready(function(){
　　//这里是调用的方法   
　　$("#dialgo").dialog();
    
});
</script>
<title>Untitled Document</title>
</head>

<body>

<div id="dialgo" title="这是测试这是测试">
    <p>你好啊</p>
</div>
</body>
</html>

隐藏dialog

$(document).ready(function(){
    //默认为关闭，只有属性为"open"的时候才会打开
    $("#dialgo").dialog({autoOpen:false});
    $("#commit").click(function(){
        
        $("#dialgo").dialog("open");
    });
    
})

= =发现有人写了。