終於做完這個公司網站了!!!

Finish Line

呼~ 終於做完這個公司網站了, 花的時間比原本預估的多了很多很多很多. 原來預計差不多一個月要完成的, 沒想到前前後後加一加竟然寫了三個多月. 做網站要一個人要搞定全部的事情真是太找自己麻煩了!!! 想到這三個月都沒碰到 真正該進行的專案, 真是感到罪孽深重…

一般人看了一定會覺得說, 不過就是一個公司網站而已, 弄幾個靜態頁面, 部落格拿現成的開源軟體改一下不就好了? 現在回頭看看, 也覺得這實在是一件很不可思議的事情. 但現實就是如此, 做網站真的是一件 做的事情很多, 看到的卻很少 的事.

Continue reading →

Codeigniter View Library

一個彈性的 Codeigniter View 函式庫

Codeigniter View Library logo

說明

Codeigniter 是我最喜歡的 PHP 框架, 它不但快速輕巧, 完整又易讀的說明文件讓新手非常容易就可以上手. 但是它 ‘view’ 的部份讓我覺得功能上有點太薄弱了. Symfony 用 yaml 所達成彈性的 layout, view 還有 css 及 js 管理辦法. 一直讓我無法忘懷.

所以我寫了這個 codeigniter 的 view 函式庫. 當你在寫大型專案或是有非常多相似但又不同的頁面的時候, 與用這個函式庫會讓你更輕鬆的去管理你個 layout, view, css, js 等等的相關檔案

特色

  • 用 YAML 檔管理 layouts, page title, metas, css and js 檔案並讓你的 controllers 更乾淨輕量.
  • controller configs 可以覆寫 Default configs. 讓你可以更彈性的切分你的 css 及 js.
  • 在 production 狀態下會合併及壓縮 css 和 js 檔案. 減少 request 及加速 page loading

Continue reading →

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

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

jQuery Atteeeeention plugin logo

說明

如果你有一個圖片集裡的相片. 每一張的長跟寬都不一樣, 那排版起來很容易顯得雜亂不堪. 使用這個插件讓你的圖片集有如 ‘Google Image Search’ 般的排版效果.

Demo

  • 按 這裡 檢視這個 demo
  • 原始碼裡也包含了這個 demo 頁面

Continue reading →

jQuery MSG 插件

一個類似 jQuery BlockUI 的插件

jQuery MSG plugin logo

說明

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

Demo

  • 按 這裡 檢視這個 demo
  • 原始碼裡也包含了這個 demo 頁面

Continue reading →

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

一個讓你置中指定 DOM 元素的 jQuery 插件

jQuery Center plugin logo

說明

這個簡單的插件幫助你在視窗中置中你所指定的 DOM 元素. 你也可以傳入數值來指定 y 軸的值. 或是當圖片大於視窗大小的時指定元素的置中方法.

Demo

  • 按 這裡 檢視這個 demo
  • 原始碼裡也包含了這個 demo 頁面

Continue reading →

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

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

jQuery Queue plugin logo

說明

Javascript 是一個事件驅動的程式語言. 因此往往程式碼會呈現巢狀式結構來使用回乎函數. 尤其在大型的前端網頁程式更容易發生. 然而這種程式寫法會讓你整個架構不夠彈性化.

jQuery Queue 插件可以讓你在函式範圍外增加此函式需要執行的回乎函數. 因此可以讓你的程式更容易有彈性的切割模組. 在大型的專案上, 這個插件可以說是不可或缺的!

Demo

  • 按 這裡 檢視這個 demo
  • 原始碼裡也包含了這個 demo 頁面

Continue reading →

用 jQuery Secret 插件隱藏全域變數

一個幫助你在 Javascript 裡隱藏全域變數的 jQuery 插件

jQuery Secret plugin logo

說明

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

Continue reading →

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

一個讓你取得隱藏元素的實際長寬的 jQuery 插件

jQuery Actual plugin logo

說明

舊版的 jQuery 在擷取隱藏的DOM元素的長寬時常常會出問題. 當目標元素或是它的父元素的 css property ‘display’ 設成 ‘none’ 時. $('#someElement').width(); 傳回的往往是 0 而不是該元素的真正寬度. 這個時候試試看 $('#someElement').actual('width'); 吧!

Demo

  • 按 這裡 檢視這個 demo
  • 如果你有使用 css3pie 也許你你會想看看 這個 demo( demo/css3pie.html )
  • 原始碼裡也包含了這些 demo 頁面

Continue reading →

用 jQuery Preload 預先載入圖片

一個幫助你預先載入圖片的 jQuery 插件

jQuery Preload plugin logo

說明

做網站時常常會需要預先載入圖片來帶給使用者更好的體驗, 像是滑鼠滑過去改變背景圖, slideshow 改變圖片等等. 預先載入圖片可以避免滑鼠滑過時背景圖消失了幾秒才出現, 或是使用 slideshow 等待下一張圖切換過久的問題.

Demo

  • 按 這裡 檢視這個 demo
  • 原始碼裡也包含了這個 demo 頁面

Continue reading →