关闭

jQuery插件之对话框插件

标签: jquery插件functiondialogjavascriptstylesheet语言
1728人阅读 评论(0) 收藏 举报
在页面开发过程中,经常要与用户进行交互,例如在提交表单时,如果文本框(text)中内容为空,需要提醒用户输入内容,一般的做法是使用传统的javascript语言中的alert()函数弹出一个信息窗口;另外,在删除某项记录时,也需要告知用户确定,可用javascript语言中的confirm()函数,虽然这两个函数都可以实现相应的功能,但没有动画效果,功能单一,用户体验差。在jQuery UI中,通过dialog(对话)插件,不仅完成可以实现传统javascript语言中alert()函数与confirm()函数的功能,而且界面优雅,功能丰富,操作简单。该插件导入页面后,其调用语法格式代码如下:
$(“.selector”).dialog(options)
其中.selector表示DOM元素,一般指定一个<div>标记,用于显示弹出对话框的内容和设置按钮,选项options是一个对象,它常用的参数如下
1、	autoOpen  设置一个布尔值,如果为false,则不显示对话框,默认为true
2、	bgiframe  设置一个布尔值,如果为true,则表示如果在IE6下,弹出的对话框可以遮盖住页面中类似于<select>标记的下拉列表框,默认值为false
3、	buttons   设置对话框中的按钮
4、	closeOnEscape  设置一个布尔值,如果为false。则表示不适应esc快捷键的方式关闭对话框,默认值为true
5、	draggable  设置一个布尔值,表示是否可以拖动对话框,默认为true
6、	hide  设置对话框关闭时的动画效果,可以设置为slide等各种动画效果,默认值为null
7、	model   设置对话框是否以模式的方式显示,模式指的是页面背景变灰,不允许操作,焦点锁定对话框的效果,默认值为center
8、	position   设置对话框弹出时,在页面中的位置,可以设置为top,left,right,bottom,默认值为center
9、	show  设置对话框显示时的动画效果,相关说明与hide参数一样
10、	title  设置对话框中主题部分的文字,默认值为空
实例
<head>
		<!-- 引入相应的jQueryUI的类库文件 -->
		<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}/css/ui-lightness/jquery-ui-1.8.18.custom.css">
		<script type="text/javascript">
//页面加载完毕 触发匿名函数
$(document).ready(function() {
//点击事件处理打开dialog对话框
      $("#dialog_link").click(function(){
           //打开窗口事件
          $("#dialog").dialog("open");
          return false;//返回值false 不去执行<a href="#">连接的操作
      });
        $("#dialog").dialog({  //当你把$("#dialog")对象注册为对话框时,  $("#dialog")的内容 也将被隐藏掉
         autoOpen: false,//设置对话是否打开,false则隐藏,true打开 默认值为true  
         width:600,//宽度的设置
         buttons:{
            "确定":function(){
               $(this).dialog("close");
            },
            "取消":function(){
               $(this).dialog("close");
            }
         }, 
         bgiframe:false,
         closeOnEscape:false, //当按下esc键的时候关闭窗体
         draggable:true, //拖拽的效果    默认是true   可以拖
         hide:"toggle", // 关闭窗体时的效果
         show:"slide", //动画效果    展开的时候的效果
         modal:true, //遮罩效果    默认false不遮罩
         position:"top", //对话框弹出的位置    top     left     right    
         title:"这里是标题", //设置对话框的标题
         open:function(event,ui){
         	alert("打开的时候触发该事件");
         }
        });
        //添加事件
        $("#dialog_link,ul#cons li").hover(
        	function(){$(this).addClass("ui-state-hover");},
        	function(){$(this).removeClass("ui-state-hover");}
        );
    });
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
#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;}
</style>
  </head>
  <body>
      <a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
      <!-- ui-dialog -->
		<div id="dialog" title="添加用户">
			<p>这里可以添加用户啊 </p>
		</div>
  </body>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:397299次
    • 积分:5888
    • 等级:
    • 排名:第4323名
    • 原创:210篇
    • 转载:15篇
    • 译文:0篇
    • 评论:38条
    文章分类
    最新评论