<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>家儒的筆記 &#187; 表單</title>
	<atom:link href="http://ka-yue.com/blog/tag/%e8%a1%a8%e5%96%ae/feed" rel="self" type="application/rss+xml" />
	<link>http://ka-yue.com/blog</link>
	<description>網頁設計、開發、SEO 優化</description>
	<lastBuildDate>Fri, 27 Aug 2010 06:22:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Uniform &#8211; 最好的美化網頁表單插件</title>
		<link>http://ka-yue.com/blog/uniform-jquery-form-style-plugin</link>
		<comments>http://ka-yue.com/blog/uniform-jquery-form-style-plugin#comments</comments>
		<pubDate>Tue, 09 Feb 2010 15:00:55 +0000</pubDate>
		<dc:creator>kayue</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[插件]]></category>
		<category><![CDATA[表單]]></category>

		<guid isPermaLink="false">http://ka-yue.com/blog/?p=545</guid>
		<description><![CDATA[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 &#8230; <a href="http://ka-yue.com/blog/uniform-jquery-form-style-plugin">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-546" title="uniform-jquery-form-style-plugin" src="http://220.232.237.39/~kayuecom39/blog/wp-content/uploads/2010/02/uniform-jquery-form-style-plugin.png" alt="" width="600" height="200" /></p>
<p>Uniform 是個新的 jQuery 的表單美化插件，<strong>能夠美化 CSS 管不到的 form elements</strong>，例如 file upload、radio box、check box 。其實網上美化表單的 JavaScript 插件的多不勝數，但是這個是我見過最好的一個，為甚麼？</p>
<p>首先是下拉選單 (select element) 的實作方法。其他表單美化插件一般都會將整個 select element 移走，換上一個用自制的 JavaScript 下拉選單 － 而且一般做得反應遲鈍、難看。我自己很討厭這種做法。</p>
<p><span id="more-545"></span></p>
<p>可是 Uniform 的實作方法就好得多：圖檔一如以往地被設定成背景圖片，不同的是，Uniform 將 select element 的透明白降至 0%，使它從人們的視覺上移走 － 而不是從 DOM 中移走。所以，<strong>原來的 select element 其實依舊存在</strong>，用戶點擊的時候其實是點中了原生那個 select element。</p>
<p>下面是其代碼：</p>
<pre><span style="color: #993300;">&lt;div id="uniform-"&gt;</span>
  &lt;span&gt;Option 3&lt;/span&gt;
  &lt;select style="<span style="color: #008000;">opacity: 0;</span>"&gt;
    &lt;option value="option1"&gt;Option 1&lt;/option&gt;
    &lt;option value="option2"&gt;Option 2&lt;/option&gt;
    &lt;option value="option3"&gt;Option 3&lt;/option&gt;
  &lt;/select&gt;
<span style="color: #993300;">&lt;/div&gt;</span>
</pre>
<p>同樣原理還應用到其他 form element 上。Uniform 支援 File upload input、radio、checkbox、button，但居然沒有一般的 input text box，雖然要美化一般的 text box 對大家應該沒有難度吧。</p>
<p>下載：<a href="http://pixelmatrixdesign.com/uniform/" target="_blank">http://pixelmatrixdesign.com/uniform/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://ka-yue.com/blog/uniform-jquery-form-style-plugin/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
