JqueryUI插件---对话框的使用（10级学员 乔宇课堂总结）
Jquery 中的对话框的设置以及使用
对话框:首先,我们知道我们这个jquery中的对话框,我们必须使用jquery的js和css,那么我们必须引入必须的js和css了.
步骤一:引入js库和css,我们要引入的js有jquery-1.7.1.min.js和jquery-ui-1.8.18.custom.min.js和 jquery-ui-1.8.18.custom.css
步骤二:既然知道是一个对话框,就是弹出来的窗口,我们要定义一个按钮如:dialog_link
我们还是看一个例子子例子中我们详细解释:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
<base href="<%=basePath%>">
<title>My JSP 'accordion.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<%--
引入相应的jquery的类库文件
--%>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js"></script>
<link type="text/css" rel="stylesheet"
href="${pageContext.request.contextPath}/js/css/ui-lightness/jquery-ui-1.8.18.custom.css">
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog_link").click(function() {
$("#dialog").dialog('open');
return false;
});
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover');},
function() { $(this).removeClass('ui-state-hover');}
);
$("#dialog").dialog({
autoOpen : false,//是否打开页面自动打开对话框
width : 600,
buttons : {
"确定" : function() {
$(this).dialog("close");
//alert("窗体确定");
},
"取消" : function() {
$("dialog").dialog("open");
//alert("窗体关闭");
},
"哎" : function() {
$(this).dialog("close");
//alert("窗体关闭");
}
},
closeOnEscape:false, //按esc键不关闭
draggable:true,//是否可以拖拽,true可以 false不可以
hide:"toggle",//是关闭指动画效果
modal:true, //是否可以操作下面的内容,默认为false,true是不能操作的
position:"center", //对话框弹出的位置默认为center top left right buttom
show:"slide", //打开的时候的效果
title:"add User",
open:function(event,ui){alter("kkkkkkkk");}
});
});
</script>
<body>
<div>
<p>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span
class="ui-icon ui-icon-newwin"></span>显示</a>
</p>
<div id="dialog" title="对话框窗口">
<p>我爱你</p>
</div>
</div>
</body>
</html>
我们看到这个代码:
首先我们解释一下我们这个div里面的内容,我们定义了一个<p>标签其中定义了一个超链接,其中定义的样式即css是jquery中内置定义的我们在jquery-ui-1.8.18.custom.css中可以找到,意思为添加了一个图标,
然后我们在定义一个dialog对话框的div就是我们一会儿要弹出来就是里面的内容了,下面我们来一个一个解释这个script中的函数
$("#dialog_link").click(function() {
$("#dialog").dialog('open');
return false;
});
第一个函数:就是在dialog_link的div中添加一个click的事件, $("#dialog").dialog('open');就是打开一个对话框,这个对话框的div为dialog,后面的return false就是不在打开那个超链接。
第二个函数：
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover');},
function() { $(this).removeClass('ui-state-hover');}
);
其实这个函数没有什么大的用途，就是在你的那个按钮上添加了一点样式
第三个函数：
$("#dialog").dialog({
autoOpen :false,//是否打开页面自动打开对话框
width : 600,
buttons : {
"确定" :function() {
$(this).dialog("close");
//alert("窗体确定");
},
"取消" :function() {
$("dialog").dialog("open");
//alert("窗体关闭");
},
"哎" :function() {
$(this).dialog("close");
//alert("窗体关闭");
}
},
closeOnEscape:false, //按esc键不关闭
draggable:true,//是否可以拖拽,true可以 false不可以
hide:"toggle",//是关闭指动画效果
modal:true, //是否可以操作下面的内容,默认为false,true是不能操作的
position:"center", //对话框弹出的位置默认为center top left right buttom
show:"slide", //打开的时候的效果
title:"add User",
open:function(event,ui){alter("kkkkkkkk");}
});
这个好好解释一下，其中这个就是重点了。
第一行:autoOpen:true/false 如果是true,那么我们在页面打开的时候就直接打开,不用按按钮,如果为false,就是按按钮后打开
第三行 buttons : {
"确定" :function() {
$(this).dialog("close");
//alert("窗体确定");
},
"取消" :function() {
$("dialog").dialog("open");
//alert("窗体关闭");
},
"哎" :function() {
$(this).dialog("close");
//alert("窗体关闭");
}
},
其中buttons是一个内置的名字,
第一个参数 ”确定”就是第一个按钮的名字,就是在对话框中显示出来,我们看图我们就能明白,然后运行函数就是关闭这个窗体
再看下面的参数
closeOnEscape:false, //按esc键不关闭
draggable:true,//是否可以拖拽,true可以 false不可以
hide:"toggle",//是关闭指动画效果
modal:true, //是否可以操作下面的内容,默认为false,true是不能操作的
position:"center", //对话框弹出的位置默认为center top left right buttom
show:"slide", //打开的时候的效果
title:"add User",
open:function(event,ui){alter("kkkkkkkk");}
哦!这里都有解释了,title 这个属性了就是把你那个标题改变了,open就是打开之前我们要执行这个函数