DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 用HTC統一定制表單樣式
用HTC統一定制表單樣式
編輯:Dreamweaver相關     
  在制作表單的時候,我們往往用CSS來重新定義表單元素(如輸入框、按鈕等)的樣式,以便看起來更加美觀。而表單中的很多不同元素(如輸入框、提交按鈕、單選框)使用的是一個標記--Input,這就意味著,我們在CSS中無法通過只定義Input標記來達到我們分別定義樣式的目的。一般的做法是定義幾種Class,在寫表單的時候,不同的元素使用不同的Class。但是在表單較多的時候,這仍顯得不是很方便。 那麼,有沒有更省力的辦法呢?答案是肯定的,一個簡單的HTC就可以解決這個問題。

實例如下: htc代碼: <script language=javascript>
switch(type)
{
case 'text':
case 'password': //文本輸入框和密碼輸入框的樣式
style.border="1px solid #000000";
style.backgroundColor="#FFFFFF";
style.height="18px";
style.font="normal 12px 宋體";
style.color="#000000";
break;

case 'submit':
case 'reset':
case 'button': //按鈕類的樣式(不包括圖片按鈕)
style.border="1px solid #000000";
style.backgroundColor="#CCCCCC";
style.height="18px";
style.font="normal 12px 宋體";
style.color="#000000";
break;

default: ;//對於象單選框多選框等上面沒有出現過的元素,我們使用默認樣式。
}
</script>把上面這段代碼保存成一個HTC文件,比如保存成input.htc。簡單分析一下代碼:事實上這僅僅是一段JS,通過判斷type(Input是通過type屬性判斷是哪種表單域的,注意這裡switch語句的使用)來決定使用什麼樣式。是不是很簡單? HTC文件寫好之後,接下來我們要用CSS的行為(behavior)來調用這個HTC文件,調用的CSS語句如下: input { behavior:url('input.htc') } /*這裡假設input.htc與網頁在同一目錄下*/ 我們看到,現在我們是定義了整個Input標記的樣式,而具體什麼表單元素使用什麼樣式,則是通過JS在HTC文件中判斷並定義的。怎麼樣,我們是不是已經通過這樣一個簡單的實例初步領略到了HTC的魅力呢?

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved