iT邦幫忙

DAY 11
1

jQuery外掛特輯系列 第 11

[jQuery]外掛特輯11:filestyle-美化input file的好幫手

  • 分享至 

  • xImage
  •  

更詳細的內容請至我的部落格finalevil's blog瀏覽

在撰寫網頁程式的時候,我們都會希望網頁可以盡善盡美,為了讓網頁更加美觀,我們真是煞費苦心、焚膏繼晷、晝伏夜出(一.一),實在是花了不少時間。那麼有什麼東西是你一定會想要美化一下,不然總會覺得看了很礙眼呢?我想大概不外乎<input type='file' />和<select></select>這兩個標籤吧。

今天介紹的jQuery外掛filestyle就是專門為了美化input file而設計的。一般來說要美化input file通常有兩個要點要做到:

(1)是透過設定position、top、left將圖片蓋住input控制項那個醜醜的按鈕。

(2)並利用javascript模擬滑鼠點擊,當滑鼠點擊圖片,就會觸發圖片的click事件,在圖片的click事件就會呼叫input file的click。
如此一來,我們就可透過圖片來模擬input file進而達到美化的效果。

雖然上面所述的一連串動作其實程式碼並不多,但是UI的校調卻是十分麻煩的,透過filestyle外掛,我們可以快速的替換input file的外觀,美化我們的網頁,何樂而不為呢?

更詳細的內容請至我的部落格finalevil's blog瀏覽


上一篇
[jQuery]外掛特輯10:jscrollable-固定標頭與頁尾
下一篇
[jQuery]外掛特輯12:3個File Upload外掛-讓檔案上傳沒有Postback
系列文
jQuery外掛特輯18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言