jquery.blockui示例

技術小阿哥發表於2017-11-27
jQueryBloCUI

各種樣式、方法等，來源：http://qincidong.blog.163.com/blog/static/1646672192010634317555/

 



<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME=”Generator” CONTENT=”EditPlus”>

<META NAME=”Author” CONTENT=””>

<META NAME=”Keywords” CONTENT=””>

<META NAME=”Description” CONTENT=””>

<script language=javascript src=”js/jquery.js”></script>

<script language=javascript src=”js/jquery.blockUI.js”></script>

<script language=javascript>

$(function(){

   //檢測引入的jquery.js是否正確。

   alert(“jquery 沒有問題！”);

   //預設樣式

   var a1 = $(“a:eq(0)”);

   a1.click(function(){

    a1.css(“color”,”green”);

    $.blockUI();

   });

   //自定義內容

   var a2 = $(“a:eq(1)”);

   a2.click(function(){

    $.blockUI({message:`正在處理，請等待…`});

   });

   //自定義樣式

   var a3 = $(“a:eq(2)”);

   a3.click(function(){

    $.blockUI({ css: { 

     border:`solid green 2px`,

     backgroundColor:`blue`

     }

    }); 

   });

  

   //藍色背景

   var a4 = $(“a:eq(3)”);

   a4.click(function(){

    $.blockUI({

     overlayCSS:{backgroundColor:`blue`},

     message:`正在處理，請等待。。。`,

     css:{

      backgroundColor:`#F0FF00`,

      height:40

     }

     });

   });

   //停滯2秒

   var a5 = $(“a:eq(4)”);

   a5.click(function(){

    $.blockUI({message:`Processing…`});

    setTimeout($.unblockUI,2000);

   });


   //防止一個表單

   var a6 = $(“a:eq(5)”);

   a6.click(function(){

    $.blockUI({message:$(`#loginForm`)});

  

   });


   //通知（Notification）

   var a7 = $(“a:eq(6)”);

   a7.click(function(){

    $.growlUI(`Hi`,`Have a nice day!`);

   });


   //onBlock callback

   a8 = $(“a:eq(7)”);

   a8.click(function(){

    $.blockUI({ 

            fadeIn: 1000, 

            timeout:   2000, 

            onBlock: function() { 

                alert(`Page is now blocked; fadeIn complete`); 

            } 

    }); 

   });


   //Theme

   var a9 = $(“a:last”);

   a9.click(function(){

    $.blockUI(

     {

      theme:true,

      title:`<p style=”font-size:25px”>This is your title<p>`,

      message:`<p style=”font-size:22px;background-color:green;”>This is your message.</p>`,

      timeout:2000

     }

     ); 

   });

});


</script>

</HEAD>


<BODY>

<a href=”#”>DEFAULT</a>

<a href=”#”>自定義內容</a>

<a href=”#”>自定義樣式</a>

    <a href=”#”>藍色背景</a>

<a href=”#”>停滯2秒</a>

<a href=”#”>放置一個表單</a>

<a href=”#”>通知（Notification）</a>

<a href=”#”>onBlock callback</a>

<a href=”#”>Theme</a>


<div id=”login” style=”display:none”>

   <form action=”#” id=”loginForm”>

    <table>

     <thead>

      <th>使用者登入</th>

     </thead>

     <tr>

      <td>使用者名稱：</td>

      <td><input type=”text” name=”name”></td>

     </tr>

     <tr>

      <td>密碼：</td>

      <td><input type=”password” name=”pwd”></td>

     </tr>

     <tr align=”center”>

      <td colspan=”2″>

       <input type=”submit” value=”登入”/>

      </td>

     </tr>

    </table>

   </form>

</div>

</BODY>

</HTML>


相關文章