[JQ权威指南]页面遮盖插件LoadMask

(1)插件文件jquery.loadmask.js/jquery.loadmask.css

(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>
时间: 2024-08-24 09:53:41

[JQ权威指南]页面遮盖插件LoadMask的相关文章

[JQ权威指南]第十八天:使用show()与hide()方法动画显示和隐藏图片

(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

[JQ权威指南]第十六天:删除记录时的提示效果

1.当用户单击"删除"按钮时候,整个页面背景类似关机效果,"删除"提示框突出显示,用户可以选择"关闭"按钮,或单击"确定"或"取消"操作 2.删除提示框一直居中显示,无论页面大小如何变化 3.如果对某条记录打勾,当用户单击提示框中的确定按钮时候,将在页面中删除该记录,同时关闭提示框,页面背景恢复正常. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

[JQ权威指南]第十七天:show()与hide()方法

(1)功能描述 在显示大量文本内容时,为了能显示更多的段落内容,有时仅显示一部分的提要,隐藏另一部分的内容. (2)代码 <!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/xh

Struts2权威指南笔记

1.mvc特点包括: ① 多个视图可以对应一个模型 ② 模型返回的数据与显示逻辑分离 ③ 应用层被分隔为三层,降低了各层之间的耦合,提供了应用的可扩展性 ④ 控制层的概念也很有效,由于它把不通的模型和不同的视图组合在一起,完成不同的请求 ⑤ Mvc更符合软件工程化管理的精神 2.Struts2框架的大致处理流程: ① 浏览器发送请求,如请求/mypage.action ② 核心控制器FilterDispatcher根据请求决定调用合适的Action ③ Webwork的拦截器链自动对请求应用通用

《HTML5与CSS3权威指南》知识整理(1)

<HTML5与CSS3权威指南>知识点整理(1) 1.新增标签 新增语义化标签. <header> 定义 section 或 page 的页眉. <nav>定义导航链接. <footer> 定义 section 或 page 的页脚 <section> 定义 section. <article> 定义文章. <aside> 定义页面内容之外的内容. 下面用一个图示来说明其用法. 语义化标签的好处: 1.对搜索引擎友好,有利

【vue.js权威指南】读书笔记(第一章)

最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.js不是一个框架-它只聚焦视图层,是一个用来构建数据驱动的Web界面的库.Vue.js通过简单的API来提供高校的数据绑定和灵活的组件系统 vue.js的特性 轻量级:体积非常小,而且不依赖其他基础库 数据绑定:对于一些富交互,状态机类似的前端UI界面,数据绑定非常简单,方便 指令:类似与AJ,可以使用v-*的

maven权威指南学习笔记(五)&mdash;&mdash; POM

Archetype插件通过 pom.xml 文件创建了一个项目.这就是项目对象模型 (POM),一个项目的声明性描述. 当Maven运行一个目标的时候,每个目标都会访问定 义在项目POM里的信息. 这个POM文件在maven1中是project.xml,在maven2时改为pom.xml. <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.

maven权威指南学习笔记(一)&mdash;&mdash;简介

maven是什么?有什么用? Maven是一个项目管理工具,它包含了     一个项目对象模型 (Project Object Model),     一组标准集合,     一个项目生命周期(ProjectLifecycle),     一个依赖管理系统(Dependency Management System),     用来运行定义在生命周期阶段(phase)中插件(plugin)目标(goal)的逻辑. 当你使用Maven的时候,你用一个明确定义的项目对象模型来描述你的项目,然后 Mav

《Android编程权威指南》-读书笔记(三)Git初探

<Android编程权威指南>-读书笔记(三)Git初探 版本控制-Git 为什么要使用版本控制 什么是版本控制?我为什么要关心它呢?版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.在本书所展示的例子中,我们仅对保存着软件源代码的文本文件作版本控制管理,但实际上,你可以对任何类型的文件进行版本控制. 如果你是位图形或网页设计师,可能会需要保存某一幅图片或页面布局文件的所有修订版本(这或许是你非常渴望拥有的功能).采用版本控制系统(VCS)是个明智的选择.有了它你就