Jquery Block UI

Block  UI 介紹

甚麼是 BlockUI??

Block UI是一個相當古老的jQuery外掛，他可以產生燈箱的效果的外掛喔 !!!

為何要使用BlockUI???

會使用到block UI的時間

1.當資料在載入頁面或者是按下按鈕送出時，為避免使用者瘋狂亂按 而遮蔽的

2.侷限使用者使用的部分功能，有時候有些功能不想給使用者使用可以使用燈箱把那部份給鎖起來不讓使用者使用

以下是燈箱的寫法與一些屬性




$.blockUI.defaults = {
//顯示文字訊息
message:  '<h1>Please wait...</h1>',

title: null,   // 標題的文字有時用套板時
draggable: true,  // 拖曳.須加在 jQuery UI
//CSS設計
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},

//主題的CSS
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},

//背景圖層
overlayCSS:  {
backgroundColor: '#000',
opacity:   0.6,
cursor:   'wait'
},

//樣式的運用
growlCSS: {
width:   '350px',
top: '10px',
left:   '',
right:   '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: 'default',
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},

//IE讀取的問題
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',

//修正IE的問題
forceIframe: false,

// z-index for the blocking overlay
baseZ: 1000,

// 如果都為true 就設定為置中
centerX: true, // <-- only effects element blocking (page block controlled via css above)
centerY: true,

//修正IE問題
allowBodyStretch: true,

//禁止滑鼠事件
bindEvents: true,

//鍵盤事件
constrainTabKey: true,

// 淡入
fadeIn:  200,

// 淡出
fadeOut:  400,

// 自動解鎖.單位為毫秒 0為手動解鎖 
timeout: 0,

 // 是否顯示覆蓋圖層
showOverlay: true,

// 是否設定滑鼠焦點
focusInput: true,

 // 淡入完成後執行 
applyPlatformOpacityRules: true,

  // 淡出執行
// onUnblock(element, options)
onUnblock: null,

// IE BUG 需要知道詳細請看: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4
};

Jquery基礎學習

Jquery  學習

        Jquery 是一個在寫網頁時會非常常使用的一個語法，大家都說他比JavaScript還來的強大與好用，雖然我個人還是比較常使用JavaScrpit來撰寫一些效果；但我還是認為基本的Jquery 一些用法仍還是要會，所以在這邊幫自己複習一下。

       

Jquery  常用語法

以下列出我自己在寫ASP 或寫ASP.NET常用的語法

<input type= “button” id = “test_id”  name = “test_name”  value=”” >

<p>test.</p>

隱藏/顯示	$(” #test_id”).hide();  /   $(“#test_id”).show();
淡入/淡出	$(” #test_id”).fadeIn();  /  $(” #test_id”).fadeOut();
滑動	$(”#test_id”).slideDown();   / $(” #test_id”).slideUp();
屬性設置/	$(“#test_id”).attr(“value”, ”AA”);
取值	$(“#test_id”).attr(“value”); $(“#test_id”).val();
增加項目/刪除	$(“p”).append();     /  $(“p”).remove ();
設置CSS	$(“#test_id”).css(“background-color” , “red”)
設置寬高	$(“#test_id”).width   / $(“#test_id”).height
取得幾個元素	$(‘p’).length;
取得其name屬性為test_name	$(input[name = ‘test_name’]);

Jquery事件

<input type= “button” id = “test_id”  name = “test_name”  value=”” >

<p>test.</p>

$(“# test_id”).click(function (){

        $(this).css(“background-color” , “red”)

});

以下是我自己常用到的事件

事件	觸發技能
Onblur	物件失去焦點
Onchange	物件內容改變
Onclick	點滑鼠
Onfocus	物件取得焦點
onkeydown	按下鍵盤時
onkeypress	放開鍵盤時
onload	網頁或圖片下載時
submit	按下送出按鈕時

基本上 這個程式碼再Jquery 裡面我覺得相當重要，他可以確定頁面文堅全下載好時才開始執行程式

$(doucment).ready(function() {

});

Unbind 可以避免因程式重複執行減少效能的浪費

$("#test_id").unbind("click").click(function(){

});

Jquery 遍歷

遍歷就像一個樹狀架構，遍歷對於要尋找元素有相當大的幫助喔

函數
add	添加到符合集合裡
children	取得符合的所有子元素
closet	返回最先符合的父元素
each	每個符合的圓入都要執行
is	如果存在至少一個符合的回傳True
Parent  /parents	取得符合的所有父元素/祖父元素
Find	取得符合的所有子元素

我在ASP.net WebForm裡的專案曾用過一次

function validateIdNo(obj)

{

 var NewStr = obj.value;

  if (NewStr.substring(1, 1) == "1")

  {

    $(obj).closest('tr').find("input[name$=txtSex]").val("男");

  }

  else {

    $(obj).closest('tr').find("input[name$=txtSex]").val("女");

  }

}

 

<tr>

        ………………………………..

</tr>

    

<tr bgcolor="#FFFFFF">

 <td class="style1">性別 </td>

 <td align="left">

   <asp:TextBox ID="txtSex"  runat="server" Text  ='<%# Eval("Sex") %>' MaxLength="10" Readonly="true" CssClass="style5" Width="80px" ></asp:TextBox>

</td>

</tr>

若有錯與問題 還請各位大大告訴我
                                                                          by    正在努力從ASP轉換成ASP.NET的蔡逼八的學生