Understanding CSS Positioning

0 comments
在網頁中，CSS 將每個元素視為一個矩形區塊（Box）。每個區塊則由內容（Content）、邊距（Padding）、邊框（Border）及邊界（Margin）等區域組合而成，這樣的概念又被稱為區塊模型（Box Model）。
box
CSS 運用區塊模型的概念，將樣式套用在元素上來決定其外觀及位置。本文接下來將介紹在 CSS 排版中不可或缺的定位（Positioning）觀念。
靜態位置（position:static）
這是所有 HTML 元素預設的 position 屬性值（也就是沒有定位），它會配合版面配置規則（Layout Rule）決定其位置座標。所以，如果在 position:static 的元素設定 top、left、right 或 bottom 等偏移（Offset）屬性將會自動被忽略。

相對位置（position:relative）
相對於原本的位置（靜態位置），也就是將元素從原先的位置，依據元素的偏移屬性，將元素作對應的距離調整，而且其原本位置的區塊空間將會被保留，位移後也可能會覆蓋其它區塊。如果有區塊相互重疊的情況，你可以使用 z-index 屬性來決定重疊的順序。


絕對位置（position:absolute）
以父元素的邊界位置為基點，再依據偏移屬性作對應的距離調整。如果其上層的親代元素都不是以 absolute 或 relative 定位時，那麼就會以 body 元素的邊界為基準。該元素會從 HTML 的正常排版（Normal Flow）中移除，然後再依據容器區塊（Containing Box）的邊界來重新定位該元素，因此也可能會覆蓋其它原塊。而所謂的正常排版是指從上而下、由左至右的編排方式。例如段落區塊（Block Box）會在其容器區塊中從上而下排列；而行內區塊（Inline Box）則是由左至右排列。


固定位置（position:fixed）
基本上與絕對位置的定位方式相同，為一的差別在於其位置固定，且不會隨捲軸的移動而改變，就像浮水印（Watermark）一樣。這個屬性值並不適用 IE 6 或更早期的版本。

參考資料：
CSS basic box model

繼續閱讀...

Posted by renjin
2008年10月27日 星期一 下午4:16
Labels:

.NET Naming Conventions

0 comments
遵循良好的命名慣例可以讓程式更容易被理解和閱讀。尤其，在團隊工作中採用一致的命名方針將利於程式碼的整合與維護。

匈牙利命名法（Hungarian Notation）是常見的命名方式，如果你在 .NET 程式設計中一眛的沿用匈牙利命名法，不僅無助於提升程式碼的可維護性，甚至會因為命名冗雜造成反效果。果真如此，你就更應該考慮使用更好的命名方式。在這裡推薦由 Pete Brown 依據微軟的開發類別庫的設計方針及業界公認標準（Industry-Accepted Standards）所整理的 .NET 命名準則，非常具有參考價值。

值得一提的是，這份文件還特別針對 Windows 表單和 Web 表單中的 UI 控制項識別名稱，提出獨道的命名原則。雖然作者特別強調不贊成使用匈牙利命名法的原因，然而在不使用匈牙利命名法的原則下，UI 控制項的識別名稱是唯一不在此限的例外。作者建議對所有 UI 控制項的識別名稱，統一採用 "ux"（意即 User eXperience 的縮寫）做為前綴詞（Prefix），其所持的理由如下：
  1. 相較於使用型別相依的匈牙利命名法更為簡潔，且不用顧慮變更控制項型別所帶來的名稱衝突問題。
  2. 有助於在 Intellisense 中將你的控制項型別變數名稱群組在一起。

如此一來，將可擺脫以往使用繁雜的控制項前綴詞（如 txt、btn 等）的命名方式。如果你也像我一樣常為控制項識別名稱命名感到苦惱，那麼相信採用新命名法將會為你帶來更佳的表單開發經驗。

資料來源：
Common .NET Naming Conventions by Pete Brown

繼續閱讀...

Posted by renjin
2008年10月14日 星期二 下午2:09
Labels: ,

Mooquee - Marquee with Mootools

2 comments
Mooquee 是一個以 MooTools 為基礎所設計的跑馬燈的 JavaScript 類別，它提供建構選項可以表現出多種不同於 Marquee 標籤的跑馬燈動畫效果。

實作時，除了要引用 Mooquee 程式庫外，你還需要搭配 MooTools 1.2。在建構 Mooquee 物件時，你可以設定以下建構選項：
  • element：指定做為跑馬燈區塊的 HTML 元素識別碼。
  • cssitem：指定播放項目的樣式類別名稱。
  • firstitem：指定第一個播放項目的索引。
  • direction：以 up、down、left 或 right 指定跑馬燈移動的方向。
  • pause：以秒為單位指定每次停止時間，且必須大於或等於 duration 的值，其預設值為 1 秒。
  • duration：以秒為單位指定每次移動所需時間，其預設值為 1 秒。
  • overflow：設定當內容超出跑馬燈區塊範圍時的處理方式，預設值為 hidden。
  • startOnLoad：指定是否自動播放，預設值為 true。
如以下範例會建立向上垂直捲動的跑馬燈：
<!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>Mooquee Example</title>
    <style type="text/css">
        #mooquee_container {
            width: 200px;
            height: 20px;
            border: 1px solid;
        }
        .mooquee_item { 
            background-color: #ffffff; 
        }
    </style>
    <script type="text/javascript" src="mootools-1.2-core.js"></script>
    <script type="text/javascript" src="Mooquee.js"></script>   
    <script type="text/javascript">
        window.addEvent('domready', function() {
            var mooquee = new Mooquee({
                element:'mooquee_container',     
                cssitem:'mooquee_item',
                direction:'up',
                duration:1,
                pause:2,
                firstitem:0
            });
        });
    </script>
</head>
<body>
    <div id="mooquee_container"> 
     <div class="mooquee_item">跑馬燈訊息第 1 則</div> 
     <div class="mooquee_item">跑馬燈訊息第 2 則</div>
     <div class="mooquee_item">跑馬燈訊息第 3 則</div>
    </div>
</body>
</html>

繼續閱讀...

Posted by renjin
2008年10月13日 星期一 下午3:09
Labels: ,

Internet Explorer 8 Web Slices

0 comments
Web Slices 是 Internet Explorer 8 的新功能之一，網頁開發者可以在單一網頁中指定多個區塊（Slices）供使用者訂閱到 IE8 新的最愛列（Favorites Bar）。

現在很多網站都會提供 RSS（Really Simple Syndication）的網站內容訂閱服務。使用者只要利用 RSS 閱讀器訂閱內容，就可以方便獲得網站的更新資訊，而不需造訪網站檢閱是否有變更或新資訊。對於提供 RSS 服務的網站來說，它必須提供特定格式的 XML 檔案（亦即 RSS feed）的內容，才能供閱讀器下載及檢查更新。相較之下，Web Slices 並不需要個別的 Feed 檔案，而是直接在網頁中定義 Feed 項目，如以下範例：
<div id="Div1" class="hslice">
    <h4 class="entry-title">Web Slice Title</h4>
    <div class="entry-content">
        This will appear in the preview window.
    </div>
</div>
如你所見，你只要在 HTML 標籤中透過 class 屬性，套用如上例粗體標示的樣式類別名稱，即可在網頁啟用 多個 Web Slice。一個最簡單的 Web Slice 至少要具備以下三個要素：
  • 一個套用 hslice 樣式類別的父元素。
  • 父元素的必須具備唯一的 ID 識別名稱。
  • 一個套用 entry-title 樣式類別的子元素。
當 IE 8 偵測到網頁有可用的 Web Slice 時，其工具列上的就會出現綠色的 圖示來提示使用者。同時，當使用者的滑鼠游標移至網頁中的 Web Slice 時也會出現相同的圖示。當使用者按下圖示就可訂閱 Web Slices，並將其新增至 [我的最愛] 列。只要使用者訂閱 Web Slices，便可以直接在 [我的最愛] 列開啟快顯視窗預覽到相關資訊。如果有興趣，你可以先體驗 eBay 實作 Web Slices 的專屬網站：htt://ie8.ebay.com/。

相關連結：
New RSS Features for Internet Explorer 8
Internet Explorer 8 Web Slice Style Guide
Internet Explorer 8 Beta 1 Whitepapers - Release WebSlices

繼續閱讀...

Posted by renjin
2008年10月7日 星期二 上午10:41
Labels:

AJAX DateTimePicker Extender

15 comments
在 Windows Forms 中，有 DateTimePicker 控制項可以用來選擇日期或編輯時間。然而，在 ASP.NET 中只有內建可選取日期的 Calendar Web 伺服器控制項，以及 AJAX Control Toolkit 提供的 Calendar 擴充項外，並沒有兼具選擇日期或編輯時間的 Web 控制項。所幸，jscalendar 正好可以滿足這樣的需求。它是一款功能強大且免費的 DHTML 日期選擇器，不僅內建多種的面板和色彩主題，還支援多國語言顯示介面。

為了能方便引用到 ASP.NET 網頁中，於是自己便著手將 jscalendar 1.0 封裝到自訂的 AJAX DateTimePicker 擴充項控制項。


DateTimePicker 擴充項的屬性
屬性說明
Align指定快顯日曆的對齊方式，預設值為 "Br"。詳見對齊方式格式說明。
Format指示要套用到文字方塊中的日期顯示格式，期預設值為 "%Y-%m-%d"。詳見自訂日期時間格式說明。
FirstDayOfWeek以 0 到 6 指定每週的起始日，0 表示星期日，1 為星期一，依此類推。預設為星期日。
PopupButtonID指定用來觸發顯示快顯日曆的控制項識別碼。
TargetControlID指定顯示選取日期的 TextBox 控制項識別碼。
Theme預設的日曆面板主題為 Aqua，你可以依照偏好變更為其他的面版樣式：Blue、Blue2、Brown、Green、System、Tas、Win2k1、Win2k2、Win2kCold1、Win2kCold2。
TimeMode以 12 或 24 定義時間格式，預設為 12 小時制。
SingleClick指定日期選擇是 Single-Click 或 Double-Click 模式。若指定為 true（預設值）則表示為 Single-Click 模式。
ShowsTime指定是否顯示時間，若指定為 false（預設值）則表示不顯示。
WeekNumbers指定是否顯示星期名稱，若指定為 true（預設值）則表示要顯示。

對齊方式格式
使用 Align 屬性可以指定快顯日曆的垂直對齊（Vertical Alignment）及水平對齊（Horizontal Alignment）方式。在 Align 屬性中的第一個字元表示垂直對齊方式，其格式規範如下：
格式說明
T下邊緣與目標元素的上邊緣相鄰對齊。
t下邊緣與目標元素的下邊緣相鄰對齊。
c垂直置中於目標元素。
b上邊緣與目標元素的上邊緣相鄰對齊。
B上邊緣與目標元素的下邊緣相鄰對齊。

第二個字元表示水平對齊方式，其格式規範如下：
格式說明
L右邊緣與目標元素的左邊緣相鄰對齊。
l左邊緣與目標元素的左邊緣相鄰對齊。
c水平置中於目標元素。
r右邊緣與目標元素的右邊緣相鄰對齊。
R左邊緣與目標元素的右邊緣相鄰對齊。

自訂日期時間格式
以下是使用 Format 屬性指定自訂日期時間格式的規範：
格式說明
%a表示星期名稱的縮寫。
%A表示星期名稱的全名。
%b表示月份名稱的縮寫
%B表示月份名稱的全名。
%C表示世紀的數字。
%d以 00 到 31 表示月份的日期。
%e以 0 到 31 表示月份的日期。
%H以 00 到 23 的數字來表示小時。
%I以 01 到 12 的數字來表示小時。
%j本年第幾天。
%k以 0 到 23 的數字來表示小時。
%l以 1 到 12 的數字來表示小時。
%m以 01 到 12 的數字代表月份。
%M以 00 到 59 的數字來表示分鐘。
%n表示換行字元。
%p表示 PM 或 AM。
%P表示 pm 或 am。
%S以 00 到 59 的數字來表示秒數。
%s自 Epoch 系統時間開始所經過的秒數。
%t表示 Tab 字元。
%U, %W, %V本年的第幾周。
%u以星期一為起始序數，從 1 到 7 的數字代表星期的日期。
%w以星期日為起始序數，從 0 到 6 的數字代表星期的日期。
%y以兩個位數的數字來表示年份。
%Y以四個位數的數字來表示年份。
%%將 % 字元顯示為常值（Literal）。

範例
下列範例會建立能讓使用者選擇日期及時間的日曆：
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ace:DateTimePickerExtender ID="DateTimePickerExtender1" runat="server"
TargetControlID="TextBox1"
Format="%Y-%m-%d %H:%M"
ShowsTime="true"
SingleClick="false" />

你也可以加入按鈕來開啟快顯日曆：
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button runat="server" ID="Button2" Text="..." OnClientClick="return false;" />    
<ace:DateTimePickerExtender ID="DateTimePickerExtender2" runat="server"
TargetControlID="TextBox2"
PopupButtonID="Button2"
Format="%Y-%m-%d %H:%M"
ShowsTime="true" />


 Download source code - for ASP.NET 3.5

資料來源：
http://sourceforge.net/projects/jscalendar/

繼續閱讀...

Posted by renjin
2008年10月3日 星期五 上午9:37
Labels: ,
訂閱： 文章 (Atom)