[JQ权威指南]页面遮盖插件LoadMask
2016-11-21 10:08
330 查看
(1)插件文件jquery.loadmask.js/jquery.loadmask.css
(2)功能描述:在页面中新增三个按钮,开始,结束,延迟。
(3)代码:
(2)功能描述:在页面中新增三个按钮,开始,结束,延迟。
(3)代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mask</title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> </script> <script type="text/javascript" src="Jscript/jquery-1.4.2.js"> </script> <script type="text/javascript" src="Js-7-1/jquery.loadmask.js"> </script> <link href="Js-7-1/jquery.loadmask.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body{font-size:13px} span{color:Red;font-size:12px} .divFrame{width:280px;border:solid 1px #666} .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold} .divFrame .divContent{padding:8px;line-height:1.6em} .divFrame .divBtn{padding-bottom:8px;padding-left:8px} .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} .btn {border:#666 1px solid;padding:2px;width:80px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} </style> <script type="text/javascript"> $(function () { var $cnt = $("#Content"); $("#btnStart").click(function () { //执行页面加载遮盖提示 $cnt.mask("正在加载中"); }); $("#btnEnd").click(function () { //关闭页面加载遮盖提示 if ($cnt.isMasked()) { $cnt.unmask(); } }); $("#btnDelay").click(function () { //延迟页面加载提示 $cnt.mask("正在加载中...",1000); }); }) </script> </head> <body> <div class="divFrame"> <div id="Title"> <input type="button" id="btnStart" value="开始" class="btn" /> <input type="button" id="btnEnd" value="结束" class="btn" /> <input type="button" id="btnDelay" value="延迟" class="btn" /> </div> <div id="Content"> <div> 用户名:<br /> <input id="username" name="username" type="text" class="txt" /> <font color="red">*</font><br /> <span></span> </div> <div> 邮箱:<br /> <input id="email" name="email" type="text" class="txt" /> <font color="red">*</font><br /> <span></span> </div> <input id="sbtUser" type="submit" value="提交" class="btn" /> </div> </div> </body> </html>
相关文章推荐
- [JQ权威指南]搜索插件AutoComplete
- [JQ权威指南]jQuery Pagination分页插件
- [JQ权威指南]NotesForLightBox插件的使用
- [JQ权威指南]datepocker插件实现分段时间的选择
- [JQ权威指南]图片放大镜插件jqzoom
- [JQ权威指南]jQuery上传插件Uploadify使用详解
- [JQ权威指南]Active插件的使用
- [JQ权威指南]表单插件form
- [JQ权威指南]动画表格排序插件TableSort
- [JQ权威指南]对象级别插件的开发
- [JQ权威指南]类级别插件开发
- [JQ权威指南]自定义JQuery插件
- [JQ权威指南]第八天:删除页面元素
- [JQ权威指南]右键菜单插件ContextMenu
- [JQ权威指南]表单插件form
- [JQ权威指南]validate验证插件
- [JQ权威指南]折叠面板插件accordion
- JQ权威指南:网页选项卡的运用
- [JQ权威指南]第十一天:使用trigger方法触发指定类型事件
- [JQ权威指南]第十五天:网页选项卡的运用