Tag: javascript

如何在 Mac OSX Lion 上設定 node.js 的開發環境

用 Homebrew 來安裝及更新 node.js 要在 Mac 上建立一個 node.js 的開發環境有很多方法. 你可以直接下載原始碼自己編譯, 或者是用套件管理系統來幫你解決這些瑣碎的問題. 因為 node.js 還是一個很年輕的專案, 常常會有版本的更新. 手動安裝及更新實在是非常的累人. 若是使用 Homebrew 來幫你處理這些問題可以讓你把時間花在寫程式而不是設定環境上面. 如果你是使用 Ubuntu 的話可以參考這一篇文章.

Javascript Ninja Wanted!!!

我們正在招募 Javascript 強者, 如果你 有 開發過至少一個用重度使用 Javascript 的網站或應用程式 完全了解這兩篇文章 – JavaScript Garden, Being a web developer 各網站前端的各種開發技能 html5, CSS3 Javascript, jQuery 曾經為了讓自己可以安心入睡而重寫程式碼 使用 git 來做程式碼的版本控制

Javascript session

將你的 session 資料存放在 window.name 裡 一直以來我都以為在 javascript 裡沒有 `session` 這種東西. 所有的變數, 函式等等的資料在頁面重新載入時都會被清空, 直到了我發現這個 Craig Buckler 寫的 javascript session library. 來看一下它的原始碼

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

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

jQuery MSG 插件

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

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

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

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

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

用 jQuery Secret 插件隱藏全域變數

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

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

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

用 jQuery Preload 預先載入圖片

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