关闭

JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)

标签: functiondialogstylesheetjquerydivcss
2548人阅读 评论(0) 收藏 举报
分类:

 Jquery 中的对话框的设置以及使用

         对话框:首先,我们知道我们这个jquery中的对话框,我们必须使用jqueryjscss,那么我们必须引入必须的jscss.

         步骤一:引入js库和css,我们要引入的jsjquery-1.7.1.min.jsjquery-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>标签其中定义了一个超链接,其中定义的样式即cssjquery中内置定义的我们在jquery-ui-1.8.18.custom.css中可以找到,意思为添加了一个图标,

然后我们在定义一个dialog对话框的div就是我们一会儿要弹出来就是里面的内容了,下面我们来一个一个解释这个script中的函数

         $("#dialog_link").click(function() {

              $("#dialog").dialog('open');

              return false;

         });

第一个函数:就是在dialog_linkdiv中添加一个click的事件, $("#dialog").dialog('open');就是打开一个对话框,这个对话框的divdialog,后面的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就是打开之前我们要执行这个函数

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1933983次
    • 积分:16809
    • 等级:
    • 排名:第613名
    • 原创:209篇
    • 转载:76篇
    • 译文:0篇
    • 评论:705条