2013年9月4日 星期三

jQuery LoadMask Demo (網頁遮罩)


<html>
    <head>
        <title>jQuery LoadMask Demo</title>
        <link href="http://jquery-loadmask.googlecode.com/svn/trunk/src/jquery.loadmask.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
        <script type="text/javascript" src="http://jquery-loadmask.googlecode.com/svn/trunk/src/jquery.loadmask.js"></script>
        <style>
            body{font-size:11px;font-family:tahoma;}
            #content { padding:5px;width:200px;}
            #buttons { padding-left:40px; }
        </style>
    </head>
  
    <body>
        Please fill out the form:
        <div id="content">
            <div>Field1:<input type="text"></div>
            <div>Field2:<input type="text"></div>
            <div>Field3:<input type="text"></div>
            <div>Field4:<input type="text"></div>
        </div>
        <div id="buttons">
            <input type="button" value="Process" id="process">
            <input type="button" value="Cancel" id="cancel">
        </div>
        <script>
            $(document).ready(function() {
                $("#process").bind("click",
                function() {
                    $("#content").mask("Waiting...");
                });
                $("#cancel").bind("click",
                function() {
                    $("#content").unmask();
                });
            });
        </script>
    </body>
</html>

沒有留言:

張貼留言