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

转载 2012年03月26日 21:57:45

 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就是打开之前我们要执行这个函数

相关文章推荐

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...

JQueryUI插件----手风琴效果(10级学员 赵成举课堂笔记)

JQueryUI插件----手风琴效果 今天我们介绍一下JQuery中UI插件中的手风琴效果,效果图如下: 像这种能够展开和折叠的div在我们项目的开发中经常需要用到,这样能够使界面更加绚...

jQuery插件应用之--- 选项卡插件的使用(10级学员 韩晓爽课堂笔记)

jQuery插件应用之 --- 选项卡插件的使用 一  首先来介绍一下选项卡插件的作用 jQuery UI插件折叠板可以实现页面中指定区域的折叠效果,即通过单击某个面板中的标题栏,就会展开相应的内...

oracle面试题整理二(10级学员 乔宇整理)

Oracle面试题整理二(10级学员 乔宇整理) 1.查询工资最高的3 名员工信息 select * from (select * from emp order by sal desc) ...

spring的注解使用和分散配置(10级 学员张帅鹏课堂总结)

spring的注解使用和分散配置 一、spring的注解 简介:在 Spring 2.5中已经可以用注解的方式去驱动 Spring 的依赖注射了,@Autowired注解提供了更细致的控制与更好...

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)(10级学员 林常禹总结)

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)     使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚...

jQuery插件autoComplete介绍(10级学员 张帅鹏总结)

jQuery插件autoComplete介绍 概述:AutoComplete为自动填充,展示之意。用户在使用文本框搜索信息时,使用插件的autoplete方法绑定文本框。当在文本框中输入某个字符时,...

WebService入门介绍及案例分析(10级学员 庞丽课堂总结)

WebService入门介绍及案例分析 一、WebService入门概述: 1、什么是WebService? WebService,就是基于Web的服务。它使用Web(HTTP)方式,接收和响应...

Oracl中PL/SQL编程(10级学员 张帅鹏课堂总结)

Oracl中PL/SQL编程 概述: PL/SQL是oracle的专用语言,它对标准的SQL语言的扩展.SQL语句可以嵌套在PL/SQL语言中,并结合处理语句。举例,一般在银行系统中,都是事先写好的...

Extjs继承机制和窗体创建(10级学员 刘根鹏课堂总结)

在extJs中,define方法是用来实现窗体自定义的 以下就是一个define方法的使用,相信看过些方法后,会有更深刻的理解 首先利用create方法创建窗口对象,在4.0中create与new...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JqueryUI插件---对话框的使用(10级学员 乔宇课堂总结)
举报原因:
原因补充:

(最多只允许输入30个字)