文章阅读
JSer.modalDialog模态窗口
文章类别: JSer功能扩展  更新日期: 2012-09-24 22:13:54.0  点击次数:5353
  JSer.modalDialog模态窗口是JSer脚本框架的功能扩展,用于在网页中弹出一个小窗,同时网页的其它内容被此窗口灰色背景遮住,在关闭模态窗口之前,用户不能操作页面上的其它内容。
先来看看效果(具体显示方式可由用户定义):
 
使用方法:
 
  1. 首先请点击链接下载JSer.modalDialog.js文件,并嵌入到您的网页。注意,此脚本依赖于JSer.js,请先确保在嵌入这个脚本之前,您已经嵌入了JSer.js,如果没有,请先从本站相关页面下载最新版本的JSer.js并嵌入到您的网页。
  2. 然后根据您的需要,在页面上创建modalDialog要显示的内容,并分别定义其可拖动的区域,关闭区域和内容区域。例如本页的示例,modialDialog的HTML代码如下:
 
<div id="modal" style="display:none;width:360px;height:330px;background-color:white;border:1px gray solid;">
     <div id="jcmTitle" style="float:left;width:100%;line-height:25px;background-color:#eee;">
            <span id="jcmClose" style="float:right;background-color:#ddd">Close</span>
            <strong>:::效果演示,标题行可拖动:::</strong>
     </div>
    <div style="clear:both;padding:8px;">要显示的内容。</div>
</div>
  注意上面的代码中的红色部分,分别代表modalDialog的层名称,可拖动区域(即窗口标题),可关闭区域(即窗口右上角的Close按钮),其中的ID值可以根据您的需要随便设置值,或者不用ID而用其它方式(例如class="..."等代替),只要JSer的选择符可以访问到它们就可以了。整个modalDialog的显示样式均由您随意的设置。
  3.定义弹出modalDialog的元素及触发事件,例如,点击某个按钮弹出,代码如下:
[按钮HTML代码]:
<input type="button" id="btnModal" value="点击按钮弹出"/>
 
[JS事件代码]:
JSer.exec(function(){
      JSer("#btnModal").click(function(){
              JSer("#modal").modalDialog({//显示modalDialog.
                       dragClass:"#jcmTitle",   //选择可拖动区域(可以是任意的JSer选择符)
                       closeClass:"#jcmClose" //选择可关闭区域(可以是任意的JSer选择符)
              });
      });
});
 
  至此,点击按钮时,便可以弹出JSer modalDialog了。从这里可以看出,我们只需要调用扩展的modalDialog方法,并传入一个匿名对象就可以了,调用方法非常简单,下面我们来说明一下,此方法传入的对象的可选属性,如下表:
 
JSer.modalDialog.js用法:
语法: JSer(元素选择符).modalDialog(参数对象);
参数对象可选属性值列表:
 
属性名称 类型 默认值 说明
dragClass JSer选择符 "#jcmTitle" 指定modalDialog可拖动的区域。
closeClass JSer选择符 "#jcmClose" 指定modalDialog可关闭的区域(即点击该区域关闭)
opacity 0-100之间的整数 90 指定modalDialog显示的不透明度。值越大越不透明。
dragOpacity 0-100之间的整数 60 当拖动modalDialog时,显示的不透明度。
maskOpacity 0-100之间的整数 48 modalDialog后面的遮罩层(即灰色区域)显示的不透明度。
maskColor 颜色值字符串 “black” 指定 遮罩层颜色,默认为黑色。
left 整数值或字符串 <自动居中>
 指定modalDialog相对于网页的左边位置
(例如:200, "200px",数字或字符串值均可),
此参数一般不指定,将自动在当前显示屏水平居中显示.
top 整数值或字符串 <自动居中>
指定modalDialog相对于网页的顶边位置
(例如:150, "150px",数字或字符串值均可),
此参数一般不指定,将自动在当前显示屏垂直居中显示.
modal true 或 false true 是否显示为modalDialog,如果显式地设置为false,将不显示遮罩层。
resize true 或 false false (适用版本:2.0+)
是否可以拖动鼠标来改变modalDialog的窗口大小。
minWidth 整数值 <无> (适用版本:2.0+)
当resize设置为true时有效,用于限定可拖动改变的最小宽度。
maxWidth 整数值 <无> (适用版本:2.0+)
当resize设置为true时有效,用于限定可拖动改变的最大宽度。
minHeight 整数值 <无> (适用版本:2.0+)
当resize设置为true时有效,用于限定可拖动改变的最小高度。
maxHeight 整数值 <无> (适用版本:2.0+)
当resize设置为true时有效,用于限定可拖动改变的最大高度。
animate true 或 false true (适用版本:3.0+)
当窗口显示/隐藏时,是否启用淡入/淡出的动画效果,默认显示。
onDrag function(event) <无> 事件处理函数:当modalDialog开始拖动时触发事件,执行此函数。
onMove function(event) <无> 事件处理函数:当modalDialog正在拖动时触发事件,执行此函数。
onRelease function(event) <无> 事件处理函数:当modalDialog释放拖动时触发事件,执行此函数。
onClose function(event) <无> 事件处理函数:当modalDialog被关闭时触发事件,执行此函数。
 
[ 上一篇 JSer.autoComplete自动完成输入控件   下一篇 JSer.ajaxUpload无刷新表单上传扩展 ]
鄂ICP备18006629号-1       鄂公网安备 42050302000160号


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。