Tag: jQuery plugin

讓你的圖片集像 Google Image Search 般的排版

28
2011.03

讓你的圖片集像 Google Image Search 般的排版的 jQuery 插件 說明 如果你有一個圖片集裡的相片. 每一張的長跟寬都不一樣, 那排版起來很容易顯得雜亂不堪. 使用這個插件讓你的圖片集有如 ‘Google Image Search’ 般的排版效果. Demo 按 這裡 檢視這個 demo 原始碼裡也包含了這個 demo 頁面

jQuery MSG 插件

25
2011.03

一個類似 jQuery BlockUI 的插件 說明 早期網站要向使用者傳遞訊息或是警告標語都是用 ‘alert(‘blah blah’);’ 這樣的方法. 很簡單但是看起來實在是不怎麼好看. 所以後來我用 BlockUI 這個插件來取代這個功能. 而之後我發覺我並不需要這插件裡其他附加的功能而我也希望能更輕鬆的去修改插件的外觀. 所以我便寫了這個簡易版的插件叫做 jQuery MSG. 它支援不同主題, 且只需從 css 便可以修改主題. 另外也有 afterBlock 和 beforeUnblock 事件等等. 還有它很小, 包括註解不壓縮也只有4kb而已. Demo 按 這裡 檢視這個 demo 原始碼裡也包含了這個 demo 頁面

用 jQuery Center Plugin 置中指定的 DOM 元素

20
2011.03

一個讓你置中指定 DOM 元素的 jQuery 插件 說明 這個簡單的插件幫助你在視窗中置中你所指定的 DOM 元素. 你也可以傳入數值來指定 y 軸的值. 或是當圖片大於視窗大小的時指定元素的置中方法. Demo 按 這裡 檢視這個 demo 原始碼裡也包含了這個 demo 頁面

用 jQuery Queue 插件讓你的 Javascript 程式碼更容易模組化

15
2011.03

一個讓你的 Javascript 程式碼更容易模組化的 jQuery 插件 說明 Javascript 是一個事件驅動的程式語言. 因此往往程式碼會呈現巢狀式結構來使用回乎函數. 尤其在大型的前端網頁程式更容易發生. 然而這種程式寫法會讓你整個架構不夠彈性化. jQuery Queue 插件可以讓你在函式範圍外增加此函式需要執行的回乎函數. 因此可以讓你的程式更容易有彈性的切割模組. 在大型的專案上, 這個插件可以說是不可或缺的! Demo 按 這裡 檢視這個 demo 原始碼裡也包含了這個 demo 頁面

用 jQuery Secret 插件隱藏全域變數

10
2011.03

一個幫助你在 Javascript 裡隱藏全域變數的 jQuery 插件 說明 在 Javascript 裡使用全域變數是很不好的習慣. 在同一個頁面裡執行的程式都可以讀寫全域變數. 因此全域變數很容易被覆蓋過去而造成程式碼執行錯誤, 尤其當這個頁面所執行的程式碼不僅僅由一個人所撰寫時更會有這樣的問題. Douglas Crockford’s 在 Yahoo! User Interface Blog (YUIBlog) 的這篇文章有詳細解說. 通常我們可以給一個命名空間來解決這個問題. 以下面的程式碼為例:

用 jQuery 取得隱藏元素的真正長寬

05
2011.03

一個讓你取得隱藏元素的實際長寬的 jQuery 插件 說明 舊版的 jQuery 在擷取隱藏的DOM元素的長寬時常常會出問題. 當目標元素或是它的父元素的 css property ‘display’ 設成 ‘none’ 時. $(‘#someElement’).width(); 傳回的往往是 0 而不是該元素的真正寬度. 這個時候試試看 $(‘#someElement’).actual(‘width’); 吧! Demo 按 這裡 檢視這個 demo 如果你有使用 css3pie 也許你你會想看看 這個 demo( demo/css3pie.html ) 原始碼裡也包含了這些 demo 頁面

用 jQuery Preload 預先載入圖片

01
2011.03

一個幫助你預先載入圖片的 jQuery 插件 說明 做網站時常常會需要預先載入圖片來帶給使用者更好的體驗, 像是滑鼠滑過去改變背景圖, slideshow 改變圖片等等. 預先載入圖片可以避免滑鼠滑過時背景圖消失了幾秒才出現, 或是使用 slideshow 等待下一張圖切換過久的問題. Demo 按 這裡 檢視這個 demo 原始碼裡也包含了這個 demo 頁面