jQuery插件之对话框插件

原创 2012年03月26日 21:59:48
在页面开发过程中,经常要与用户进行交互,例如在提交表单时,如果文本框(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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery插件 案例:弹出对话框 插入表格

通过对话框table添加tr $(document).ready(function (){ $("#dialog").dialog({ autoOpe...

jquery插件封装:消息对话框

封装了一个消息对话框,用于替换浏览器原生的alert和confirm,兼容浏览器差异,同时支持良好的扩展性。效果图见下方调用方式举例:    使用步骤: 一、必须包括样式haiwiMsg.css...

jQuery插件2(拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示)

1、拖曳插件——draggable 通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options...

jQuery插件ccdialog 功能齐全的对话框效果【原创】

ccdialog是一个jQuery插件,实现弹出层模式的对话框效果,由于不满足于jQuery本身的dialog插件功能和效果,所有参考了众多dialog插件的效果和实现方式写了ccdialog,功能和...

标签云的实现(使用jQuery插件jqcloud)

jqcloud 是jQuery的一个插件,用于生成标签云。本网站侧边栏的标签云就是用这个实现的。github地址:https://github.com/lucaong/jQCloud用法1.确保引入j...

jQuery插件

  • 2016-07-01 01:43
  • 3.02MB
  • 下载

w3cschool教程 - jQuery插件总结

w3cschool教程 jQuery插件总结 http://www.w3cschool.cc/jquery/jquery-plugin-validate.html 一 jQuery Validat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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