Uniform – 最好的美化網頁表單插件

Uniform 是個新的 jQuery 的表單美化插件,能夠美化 CSS 管不到的 form elements,例如 file upload、radio box、check box 。其實網上美化表單的 JavaScript 插件的多不勝數,但是這個是我見過最好的一個,為甚麼?

首先是下拉選單 (select element) 的實作方法。其他表單美化插件一般都會將整個 select element 移走,換上一個用自制的 JavaScript 下拉選單 - 而且一般做得反應遲鈍、難看。我自己很討厭這種做法。

可是 Uniform 的實作方法就好得多:圖檔一如以往地被設定成背景圖片,不同的是,Uniform 將 select element 的透明白降至 0%,使它從人們的視覺上移走 - 而不是從 DOM 中移走。所以,原來的 select element 其實依舊存在,用戶點擊的時候其實是點中了原生那個 select element。

下面是其代碼:

<div id="uniform-">
  <span>Option 3</span>
  <select style="opacity: 0;">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

同樣原理還應用到其他 form element 上。Uniform 支援 File upload input、radio、checkbox、button,但居然沒有一般的 input text box,雖然要美化一般的 text box 對大家應該沒有難度吧。

下載:http://pixelmatrixdesign.com/uniform/

This entry was posted in Web Design and tagged , , , , . Bookmark the permalink.

One Response to Uniform – 最好的美化網頁表單插件

  1. ben says:

    可惜input:file的txt box在focus的时候表现不太理想.
    希望还提供input:button,input:sumbit的美化.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>