jquery ui 提供了强大的dialog功能,基本能满足开发的功能。
一、先上一个简单的例子:
1、代码如下
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
buttons: { "Ok": function() { $(this).dialog("close"); } }
});
});
</script>
<div id="dialog" title="Basic dialog">
<p>
这是一个弹出窗口---from ifxoxo.com
</p>
</div>
2、效果截图
二、具体用法还是简单的,总结如下:
1、需要加载的js和css
请记住jquery 一定要在jquery-ui之前加载,加载错的会导致意想不到的结果。
(1)jquery
(2)jquery-ui
(3)jquery-ui的css
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
2、页面上的html
页面上需要一个装dialog的容器,需要一个固定ID,控制弹出窗口的内容,而html有两种方式:
(1)事先写在页面上(比如一个table,form)
(2)不同情况的加载内容,可以定义一个空标签,待js加载 (或者ajax加载)
3、触发窗口弹出的js
主要函数如下:$(“dialog_div”).dialog();
dialog函数有一个强大的参数库,如下
【参数】
参数 | 默认值 | 作用 |
autoOpen | true |
是否自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口, 直到.dialog(“open”)的时候才弹出dialog窗口 |
buttons | {} | 显示一个按钮,并写上按钮的文本,设置按钮点击函数 |
closeOnEscpe | true | 是否点击键盘ESC键关闭dialog |
dialogClass | null | 为窗口加上的class属性 |
diaggable resizable |
true | 是否能拖动、缩放 (必须加载相应的js) |
width height |
auto | 窗口的长宽 |
maxWidth maxHeight |
null |
长宽的最大值 |
minWidth minHeight |
150 |
长宽的最小值 |
hide show |
null |
当dialog关闭和打开时候的效果。(必须加载相应的jquery.effects.xx.js) 效果有:blind,bounce,clip,drop,explode,fade,fold, |
modal | false | 是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口 |
title | null | dialog的标题文字 |
position | center |
dialog的显示位置:可以是’center’, ‘left’, ‘right’, |
zIndex | 1000 | dialog的zindex值 |
stack | true | 是否在dialog获得焦点是,dialog将在最上面 |
bgiframe | false | 在IE6下,让后面那个灰屏盖住select(需要调用jquery.bgiframe.js) |
disabled | false | 当为true是,关掉这个dialog |
示例代码如下:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div id="dialog" title="Basic dialog">
<p>这是弹框的内容---ifxoxo.com</p>
</div>
<button id="opener">Open Dialog</button>
4、其他
1、事件
(1) beforeclose 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止
(2) close 关闭dialog的时候此事件将被触发
(3) open 打开dialog的时候此事件将被触发
(4) focus 获得焦点的时候此事件将被触发
(5) dragStart 开始拖动dialog的时候此事件将被触发
(6) drag 拖动dialog过程此事件将被触发
(7) resizeStart 开始缩放dialog的时候此事件将被触发
(8) resize 缩放dialog过程的时候此事件将被触发
(9) resizeStop 缩放结束的时候此事件将被触发
beforeclose: function(event, ui) { ... }
});
2、方法
(1)destroy 摧毁 例:.dialog( ‘destroy’ )
(2)disable dialog不可用,例:.dialog(‘disable’);
(3)enable dialog可用,
(4)close,open 关闭、打开dialog
(5)option 设置和获取dialog属性,
例如:.dialog( ‘option’ , optionName , [value] ) ,如果没有value,将是获取。
(6)isOpen 如果dialog打开则返回true,例如:.dialog(‘isOpen’)
(7)moveToTop 将dialog移到最上层,例如:.dialog( ‘moveToTop’ )。
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
三、其他相关联文章
1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker
相关推荐
jquery漂亮的UI 弹出窗口进行增删改查 DATATABLE数据绑定
jquery-lwd是一款轻量级的基于jQuery UI的模拟windows窗口插件。该插件可以模拟windows窗口,对窗口进行最大化,最小化,拖动等操作。并提供windows2000经典主题效果。
artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它。
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
可指定在元素附近弹出,让操作更便捷;智能给按钮添加焦点;黄金比例垂直居中;超大响应区域特别为ipad等触屏设备优化;预先缓存皮肤图片更快响应…… 跨平台兼容 兼容:IE6+、Firefox、Chrome、Safari、Opera以及...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
基于jQuery的弹出警告对话框美化插件(警告,确认和提示) 这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt()。这个插件有 如下这些特点: 1:这个插件可以使你可以...
网站常用jquery效果 jquery控件 包括 日历控件、tab控件、进度调、对话框、窗口弹出等效果 /jquery-ui-1.8.4.custom/development-bundle/demos/index.html 从这里进入
jquery 弹出窗口插件,包含js中的 alert confirm open 等。
两个小巧的jquery插件jGrowl和Impromptu。一个做出不同效果的alert弹出框。另一个弹出应用窗口。都很实用。
当用户点击时可以弹出模式窗口效果,更好的让用户体验
通过Jquery弹出window窗体,窗体中可以添加一系列的操作,在项目中应用范围很广,稍加修改就能应用到项目中。
jQuery常用开发插件,包含各种比如UI,弹出窗口,提高开发效率
而且每次点击链接就弹出一个淘宝窗口!非常不方便。于是我便手动去掉了我能找到的广告模块. (PS:我承认去掉广告是一种很无耻的行为,但老是弹窗我真的很讨厌!如果侵害到你的利益,请与我联系,我将在得知后第一时间...
在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素。可以看看dialog 的样式,对dialog 的标题背景进行修改。 //无须修改ui 里的CSS,直接用style.css 替代掉 .ui-widget-
1. Lightview Lightview是一个基于Prototype与Script.aculo.us开发,用于创建可以覆盖整个页面的模式对话框。展示的内容不仅可以是图片、文字、网页...风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。程序基于 Jav
解压密码:RJ4587 今天我们要分享一款可以拖拽的小窗口程序,这个窗口特效是利用jQuery UI和CSS3制作而成的,窗口是半透明的,可以用鼠标拖拽,配合大气的山水背景图,显得非常壮观。拖拽功能是jQuery实现的,另外...
(原来已经有弹出框插件和窗口插件了,ligerWindow和ligerMessage,不推荐,暂时保留) 菜单 [增加]增加新插件:菜单、菜单条、工具条,菜单可以自定义图片,可以动态设置项,动态的显示位置。菜单条和是在菜单的...
一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...
它可以内联使用,也可以用作绑定到文本框的弹出窗口。 它带有多个调色板,可以跟踪选择历史并支持“透明”颜色。 它是一个完整的jQuery UI小部件,支持各种配置和主题。 查看中的几个示例。 目录 安装 从下载或派生...