Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第4回(忍者專輯)

色即設——設計，從網頁設計師的角度出發。因為自己的的特殊性（本身是軟體工程師，但是對網頁設計卻有濃厚的興趣），所以我的此系列文章不僅僅從編程角度出發，還將從設計的角度出發來細數AjaxControlToolkit系列控制項，告訴你這些控制項最終的結構表現形式、樣式，還有如何修改他們的樣式使之適合於你的網頁整體規劃。
窺，小視也——《說文》，此小視非必小視呀。此小視的意思是：水平有限，不能望其全貌，僅能管中窺豹。所以很多地方還請高人指點則個。

相關連結：
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第1回(柿子專輯)
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第2回(F4專輯)
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第3回(UE專輯)
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第4回(忍者專輯)
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第5回(錯不了專輯)
Asp.net Ajax Control Toolkit設計編程備忘錄（色眼窺觀版）——第6回(習慣專輯）

本文：

以前做一些小型網站的時候，老是覺得網頁上空空的，不知道放什麼東西好。但是當你做過大型網站或者大型企業內部管理系統後，你就會發現網頁上其實是“寸土寸金”的（，就是我們以前的一個項目的真實）。很多地方（特別是表格內部）的空間是及其寶貴的。如何盡量在不出現捲軸的情況下把那麼多東西塞到頁面上真的會讓你很傷腦筋。注意：我是說盡量不要出現捲軸，而不是說不能出現捲軸。為什麼要盡量不要出現捲軸？現在你就開啟163，然後把捲軸拖到最下面，看看裡面的東西，自問一下，你是否關注過那些最下面的東西？隨著頁面的“加長”，越靠近頁面底部的內容，將越不容易引起瀏覽者的關注。 而橫向捲軸我們的項目是嚴禁出現的，因為滾動橫向捲軸不符合使用者的操作習慣。不過我也曾見過例外的，以前看過一個橫著看的網站，所有的頁面都只出現橫向捲軸，而不出現豎向捲軸，不過，那是一個張揚個性的個人網站，所以倒也無妨。不過商業性的網站，還是不要玩個性的好。橫向和豎向捲軸同時出現的情況，絕對是禁止出現的，那是對瀏覽者的挑戰。盡量不出現捲軸，項目內容卻很多，那要怎麼辦呢？好在Asp.net Ajax Control Toolkit提供了一系列的可以讓我們節省大量空間的控制項。它們通過“隱”（即隱藏，平時不顯示，關鍵時刻用到的時候才顯示出來）、“折”（即摺疊，平時龜縮很小，用到時可以方便地展開以展現內容）的方式保衛了我們網頁上的大量空間。“隱”“折”，讀音和含義都有點像“忍者”，所以這次的副標題就叫做“忍者”專輯吧。（又一個標題黨誕生了-_-b…）下面就讓我們稍稍地介紹三個（其實還有很多類似的控制項，這裡只列舉其三）。

10：DropDown
“隱”系列的淺池臥龍，加上你的想象力，此控制項必將給與你驚喜。下面是個小例子，僅僅是拋塊磚。當文字框內需要（或者必須）填寫一些已經存在於資料庫中的資料時，讓使用者選擇，而不是讓使用者按鍵盤自己去打字，不僅可以提高使用者的體驗度，也能有效避免因使用者而造成的錯誤。我的這個例子中，只要文字框獲得焦點就會立即彈出一個列表（資料量較大的時候，可以加上檢索功能），供使用者選擇，這樣就有效避免了因輸入錯誤的名字造成的錯誤，個人感覺是中不錯的做法。來看它的屬性，官方網站文檔提供的較少，我做了一些補充。
1. TargetControlID - The ID of the control which needs a drop-down.【目標控制項】
2. DropDownControlID - The ID of the control which will be displayed as the dropdown.【欲下拉出現的控制項】

補充幾個：
3. DropArrowBackColor-下拉式箭頭背景顏色
4. DropArrowImageUrl-下拉式箭頭圖片url
5. DropArrowWidth – 下拉式箭頭寬度（但是我測試發現無效，高人指點一下）
6. HighlightBackColor –高亮背景顏色
7. HighlightBorderColor – 高亮邊框顏色

不要單單的去設定DropArrowImageUrl，你會發現結果一定會讓你失望。因為它所謂的箭頭圖片，就是那個5×5像素的置中的小黑點。只能置中的顯示小的圖片完全限制了設計。我們有必要對此進行修改。但是它沒有提供這樣的屬性讓你去修改箭頭圖片的顯示位置。所以我們只能自己去解決。如何解決還是要從最終顯示結構去分析，但是不得不承認，這個DOM讓我很納悶，完全不能理解當初設計它的高人的想法。
那4個div竟然是用來充當4個邊的。而且這個四個邊從樣式來看好像只是用來表現HighlightBorderColor的。這讓我有點不太理解。真正有用的是ajax__dropdown_arrow_wrapper 樣式class（它的名稱是固定的）。先看看它的預設樣式：.ajax__dropdown_arrow_wrapper {}{    LEFT: 50%;POSITION: absolute;TOP: 50%}

正是left：50%和top:50% 使得它們只能置中顯示。只要修改DropArrowImageUrl的值，然後再適當的修改left和top後的值就可以讓圖片較為理想的顯示。下面是參考樣式。注意前面的那個#form1是為了提高我們的樣式的優先順序，這點是必須的，否則樣式優先順序太低，會不起作用。#form1 .ajax__dropdown_arrow_wrappe1r {}{    LEFT: 50%;    POSITION: absolute;    TOP: 4px; }

顯示效果如下，之所以panel有很大的向右位移量，是因為我設定了panel的padding-left。

11.CollapsiblePanel
“折”系列的小可愛。別讓她的一大片屬性所迷惑，其實這個真的算是一個很溫柔的控制項啦。溫柔到你可以隨意地調教她，它的外觀完全掌握在你的手裡。你可以像“畫”html頁面一樣製作它，因為它本身並沒有外觀，所謂只有“神”而沒有“形”，所有的呈現都基於那些目標控制項的設計。同時它的最終展現的DOM也很單純。下面是它那容易讓人生畏的屬性:
1. TargetControlID - the Panel to operate expand and collapse.【目標控制項，推薦Panel】
2. CollapsedSize - The size of the target, in pixels, when it is in the collapsed state.【展開時的尺寸】
3. ExpandedSize - The size of the target, in pixels, when it is in the opened state.【收縮時仍然露出來的尺寸】
4. Collapsed - Specifies that the object should initially be collapsed or expanded. Set this to match your initial size. In this case, we initially set the panel to a height of 0 to match the CollapsedSize property, so when the page first renders, we don't see the panel expanded.【初始狀態是否展開】
5. AutoCollapse - True to automatically collapse when the mouse is moved off the panel.【滑鼠移上去是否自動收縮】
6. AutoExpand - True to automatically expand when the mouse is moved over the panel.【滑鼠移上去是否自動延伸】
7. ScrollContents - True to add a scrollbar if the contents are larger than the panel itself. False to just clip the contents.【是否包含捲軸】
8. ExpandControlID/CollapseControlID - The controls that will expand or collapse the panel on a click, respectively. If these values are the same, the panel will automatically toggle its state on each click.【引發展開/收縮事件的目標控制項】
9. TextLabelID - The ID of a label control where the "status text" for the panel will be placed. The panel will replace the internal HTML of this control (e.g. any HTML between the tags).【說明狀態的Label控制項】
10. CollapsedText - The text to show in the control specified by TextLabelID when the panel is collapsed. This text is also used as the alternate text of the image if ImageControlID is set.【收縮時顯示的文言】
11. ExpandedText - The text to show in the control specified by TextLabelID when the panel is opened. This text is also used as the alternate text of the image if ImageControlID is set.【展開時顯示的文言】
12. ImageControlID - The ID of an Image control where an icon indicating the collapsed status of the panel will be placed. The extender will replace the source of this Image with the CollapsedImage and ExpandedImage urls as appropriate. If the ExpandedText or CollapsedText properties are set, they are used as the alternate text for the image.【用來說明狀態的Image控制項】
13. CollapsedImage - The path to an image used by ImageControlID when the panel is collapsed【收縮時顯示的圖片】
14. ExpandedImage - The path to an image used by ImageControlID when the panel is expanded【展開時顯示的圖片】
15. ExpandDirection - can be "Vertical" or "Horizontal" to determine whether the panel expands top-to-bottom or left-to-right.【展開方向，豎向or橫向】
這個控制項沒有什麼好說的，外觀的掌控完全在乎那些目標控制項的設計，只給個圖片，看著是不是很熟悉？類比winXP資源管理員左側的。呵呵～

12.HoverMenu
“隱”系列的王者。直譯是浮動菜單，但是它的作用可不僅僅是用來浮出菜單，結合你的想象，它能帶你走的更遠。下面的例子類比展示了它在web遊戲方面的應用（沒有用戶端，基於B/S的網路遊戲，隨著網路頻寬的發展和一些好的遊戲創意的出現必將在未來的網路遊戲市場上佔有一席之地），此例子僅為拋磚，請勿較真。
先來看看屬性：
1. TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.【目標控制項】
2. PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with two links:【彈出的控制項】
3. HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.【彈出控制項後原來目標控制項的樣式，注意：它不會繼承原來目標控制項的樣式，而是直接覆蓋。】
4. PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.【彈出位置】
5. OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by PopupPosition. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".【X/Y座標位移量】
6. PopDelay - The time delay from when the mouse enters the target to when the popup is shown, in milliseconds. Default is 100.【彈出/縮回的時間延遲，單位是毫秒，預設是100毫秒】
這個控制項有比DropDown更自由的彈出位置可以設定，DropDown看名字就知道——只能在下方彈出.,而且還提供了X/Y座標位移量屬性，所以你可以將這個控制項在頁面的任意位置上彈出。再加上提供了HoverCssClass屬性，可以用來設定彈出浮動控制項以後目標控制項的樣式。所以這個HoverMenu真的要比DropDown友好很多。推薦使用。東西比較簡單，關鍵就是看你的想象力和設計能力。不多說，直接貼個圖：

其實Asp.net Ajax Control Toolkit還有很多“忍者”控制項，我以後還會以其他角度去講解它們。今天便不多說了。欲知後事如何，且聽下回分解。

上周請假了3天，回來發現工作積了一大堆，所以直到今天才放出這第4回。真是對不住各位關注此系列的朋友了。因為一些特殊的原因，我要儘快趕回大量的工作，還要超前的完成一部分。所以，第5回可能要稍微延遲2天放出。只能說聲抱歉，並感謝各位一如既往的對本系列的關注，謝謝。

keyword:ajax HoverMenu,ajax CollapsiblePanel,ajax DropDown,asp.net ajax,ajax教程,ajax基礎教程,ajax技術,ajax.net,asp ajax,ajax設計,ajax網頁設計,ajax表現