IT技术互动交流平台

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

发布日期:2016-11-24 21:08:15

(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 />
              
              </div>
              <div>
              邮箱:<br />
              <input id='email' name='email' 
                     type='text' class='txt' />
              <font color='red'>*</font><br />
              
              </div>
              <input id='sbtUser' type='submit' 
                     value='提交' class='btn' />
         </div>

     </div>

</body>
</html>
Tag标签: 插件   权威   页面  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规