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 对话框(Dialog)插件

jQuery 对话框(Dialog) - 模态
  • z991876960
  • z991876960
  • 2016年09月22日 12:57
  • 2131

JQuery插件使用小结

在前台对数据的验证处理,Jquery起着非常强大的作用。首先Jquery是对JS的代码的封装,相当于我们前台的框架,但是它只是一个基础的js框架,能够实现一些简单的功能,而对于一些比较复杂的功能,我们...
  • liujiahan629629
  • liujiahan629629
  • 2014年04月03日 23:40
  • 15371

常用Jquery插件整理大全

常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使...
  • u014632116
  • u014632116
  • 2016年01月08日 10:49
  • 692

怎么写一个jquery插件

创建插件 看来 jQuery 你已经用得很爽了,想学习如何自己编写插件。非常好,这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大,把最聪明的功能封装到插件中可以为你及团队节省大量开发...
  • caiwanxia1
  • caiwanxia1
  • 2016年11月08日 10:10
  • 2406

JQuery插件机制

前言在实际的项目开发中,很多时候会用一些特殊的处理手段,很多时候会在现有jQuery的基础上进行扩展一些方法或者制作一些插件。下面介绍如何利用jQuery扩展新的方法及如何使用。帮助文档API介绍jQ...
  • u010989191
  • u010989191
  • 2016年05月03日 21:42
  • 922

jQuery插件的写法以及使用

如今做web开发,jquery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (f...
  • qq_18661257
  • qq_18661257
  • 2015年12月30日 15:22
  • 7648

开发自己的带参数的jQuery插件

1.在JQuery命名空间内声明一个特定的命名$.fn.hilight = function() {     //在这里输入你的插件执行代码  };    我们可以这样调用:     $(#myDiv...
  • netpet
  • netpet
  • 2010年01月21日 13:38
  • 4997

使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义,而每种级别的插件都可以传参和不传参。 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascript] vie...
  • xygg0801
  • xygg0801
  • 2016年12月06日 09:30
  • 1807

基于jQuery插件之初探

有段时间没更博客了,最近换了份工作,从之前的编写H5移动端页面项目到现在的PC端单页面项目,进项目组之后主要做的事情就是编写前端插件,1个多月来的工作,把自己在这个项目中编写插件的一些体会做个小结。 ...
  • this_ITBoy
  • this_ITBoy
  • 2017年04月08日 15:28
  • 499

Jquery前端常用插件整理记录.(个人用)

发现自己的浏览器标签夹各种乱,各种曾经工作时需要的资料全集中一时,有的可能用一次就没在用过,躺在某个角落,此时资料的想法应该是 为了改变自己一下习惯做做整理记录。 前端实用插件 ...
  • dcb_ripple
  • dcb_ripple
  • 2017年03月28日 17:27
  • 1288
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery插件之对话框插件
举报原因:
原因补充:

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