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

最新推荐文章于 2024-09-24 15:55:35 发布

redarmychen

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量2.8k

点赞数

分类专栏：前端技术课程系列文章标签： function dialog stylesheet jquery div css

前端技术课程系列专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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');}