Plugin [jQuery plugin] Plugin 的思路與方法 寫 Javascript 一直都不是我的強項，所以當 jQuery 一推出的時候，簡直是驚為天人！這麼好用的東西為什麼現在才會出現呢？那我在 1998 年寫得那些，不就是跟垃圾一樣了嘛（眼神死 所以回過頭來，研究一下 Plugin 也是很合理的。 Plugin 該怎麼開始 通常我們看到的範例會這樣寫， (function($) { var defaults = {}; $.fn.myplugin = function() { return $(this).each(function() { }); }; })(jQuery); 然後呢，我們就在
JavaScript [jQuery plugin.] iPhone-Slide plugin v0.55. 正所謂醜媳婦總要見公婆。所以有興趣的人就去我的 gitHub 上面下載吧。 https://github.com/hinablue/jqiphoneslide 使用方法在 DEMO 都有說明。想看實際效果的請到這裡： http://jquery.hinablue.me/jqiphoneslide 然後，我也不知道要說啥了（喂）。我只想說，寫 Plugin 的時候，關於 this 的 Scope 一定要先搞清楚，不然會一直鬼打牆喔（啾咪！
Work [jQuery note.] 關於一點點 Namespace Event 的事情 在改寫自己的 Plugin 的時候出現了一個問題，由於 Event 在 Plugin 中宣告之後，如果重新再次綁定 Plugin 的時候，那麼裡面的 Event 有可能會被重新再綁定一次（等於重複註冊）。所以，後來你就會發現，你的所綁定的物件怎麼不太一樣了。 這時候可以用 Namespace 來解決這件事情。 $("div.myClick").bind("click.myClick", function(event) { ... }); 在一般的
jQuery [jQuery plugin.] iPhone-slide Plugin 爆肝更新 gitHub 在這裡：https://github.com/hinablue/jqiphoneslide DEMO 在這裡：http://jquery.hinablue.me/jqiphoneslide/ 我拔掉一些東西： 滑動到指定頁面 無限頁面滑動 動態載入頁面（Ajax） 因為我還沒有實際測試所以先不放。 重新檢視了換頁演算方式，發現可以寫的比之前簡單點，所以就動手改了！然後...**凌晨三點多 Ubuntu 瞬間當掉讓我感到絕望啊！**早上起來重新寫了一些東西，然後就丟上 gitHub 了。 然後 iPhone4
Work [jQuery note.] jQuery 1.5 在 Events 的探勘 UPDATE, 還是認真說明一下好了（笑） 委派事件（delegate）跟 live 事件其實是指同一件事情，不過有幾個地方不同： 由於 live 事件直接綁定在 document 上，所以一旦有中途有事件傳播被取消（stopPropagation），該 live 事件就不會被觸發。 委派事件（delegate）同樣使用 live 事件的綁定方式，不同的是，他的事件傳播會依序傳回直到被中斷為止。 請看以下範例： http://jsfiddle.net/hinablue/KFkGZ/1/
jQuery [筆記] 關於 jQuery UI 的小插曲 UPDATE, 在 Droppable 中有個屬性叫做 tolerance（簡稱叫阿縮比（疑），他可以設定幾種 Drag&Drop 中 drop 的發生情況。預設是使用 intersect（交叉），當兩個物件交疊 50% 以上，則判定為真。而其他的設定值則為：fit，touch 與 pointer。 fit 是放置物件要完全放入目標物件，才會觸發。這麼說好了，倘若你買了一組沙發，放不進購物車也是很正常的（喂）
Work [jQuery note.] UI 自製作弊表 jQuery UI 所提供的小圖示清單（速查用）： http://jquery.hinablue.me/uicheatsheet/icons.html 另外這是自己改的作弊圖檔，堪用而已： 大概就這樣，本來想轉成 PDF，但是硬刻的 jQuery UI 的 Styling 不能完整轉入 PDF 所以作罷。
Work [jQuery note.] 初探 jQuery Mobile 的筆記 首先，如果可以的話，先看看官方的說明吧！ http://jquerymobile.com/demos/1.0a1/ 官方有說，所有的內容與結構都是基於 W3C 的 WAI-ARIA 為準，所以在要做這個之前，還是先得去翻閱一次那些規格等等的文件。因為跟一般的 HTML 有相當的落差，所以其實要上手最快的方式，還是直接去挖官方的 Code 回來參考是比較快的（喂）！附帶一提的是，眼尖的人應該會發現 WAI-ARIA 還是處於 Draft 的狀態（IE 表示：
Work [jQuery note.] 關於 bind, live 與 evnets 的筆記 UPDATE, 簡易的 plugin，為了強姦干擾 Events 執行順序而做的。 噗浪討論串：http://www.plurk.com/p/7u9br0 (function($) { $.fn.superbind = function(order, type, data, fn) { if ( $.isFunction( data ) ) { fn = data; data = undefined; } var order = (typeof order !== "
Work [JS tech.] CKeditor Dialog 再起 part 5 在這裡開始之前，我必須告訴你們一件事情，CKeditor 內含的 Event，也就是總共可以被 fire 的監聽事件，分門別類總共有 56 種之多！其中因為 IE 的關係，selectionChange 的監聽事件分出了 IE 專用的 selectionchange（是的，僅大小寫不同），再扣除測試的兩種監聽 someEvent 與 testEvent，還有原本就在 DOM 常見的監聽式以外，CKeditor 所使用的 Event 還是高達 46
Work [jQuery plugin.] 自製 iPhone 滑動效果 第一次寫 jQuery plugin，發現有很多事情不能單單在 plugin 裡面就把他解決掉。裡面的 this 問題也讓我撞牆撞了好幾次。不過總算是有點東西出來了，雖然不知道能用在哪裡，但是也當作是個練功吧。 鏈結在此：http://jquery.hinablue.me/jqiphoneslide 可以有的功能與設定： 增加自訂頁面（預設為空白頁，內容需自訂 指定滑動至某 指定可抓取的滑動區 限制滑動最大頁 可以另外指定拖曳區塊（可以不只一個 可以指定特定上一頁、下一頁按鈕（可以不只一個 可以隱藏特定頁面（僅計算顯示頁面數量，並重新計算長度
Work [jQuery note.] 在 hover 上微妙的變化 通常我們對於 .hover 這個事件的印象，就如同於 .mouseenter 與 .mouseleave 這兩個事件的合體。這種互動式（Interaction Helpers）的事件在 jQuery 中還有一個，叫做 .toggle，在這裡就暫且不提。 一般來說，我們使用 .hover 的時候，就是希望能夠監聽使用者的滑鼠動作，然後在某種條件下觸發事件。那麼，最簡單的例子就是這樣 <!DOCTYPE html> <html> <
Work [WWW] Plupload Queue 改 上次介紹過這個 超犯規上傳檔案工具，這次要來繼續犯規。 由於我們需要監聽檔案上傳的動作，我們看他的 API 文件中，有描述了 Event 的項目，但是，倘若使用 pluploadQueue 的方法，他所內建的 Event 就被他的 Queue 給寫死了，從外部就沒辦法直覺的控制。當然，要避免這種情況，就是自己重新畫一個 UI 來用（翻桌）。 所以，既然人家已經好心的幫我們畫好了一個 UI（而且還可以支援多國語言），那就不要枉費人家的一番好意，拿來改寫也只是剛好而以。附帶一提，
Work [jQuery tech.] 你的 stop() 真的 stop 了嗎 - 漫談 queue() part 2 看過 上一回 的問題之後，我們接著看 queue() 與 dequeue() 在核心中做了甚麼事情： jQuery.extend({ queue: function( elem, type, data ) { if ( !elem ) { return; } type = (type || "fx") + "queue"; var q = jQuery.data( elem, type ); // Speed
JavaScript [jQuery tech.] 你的 stop() 真的 stop 了嗎 - 漫談 queue() part 1 前陣子例用 queue 做了許多東西，慢慢的發現，原生的 stop() 並非我想像中的樣子。 使用任何的動態效果，或是 delay() 這樣的效果，stop() 能使之停止。 使用 queue()，stop() 能使之停止。 stop() 可以傳入兩個布林值，一個是 clearQueue，另一個是 JumpToEnd。 然而，我卻發現事實上並不是這樣。 stop() 僅可停止單一動態動態效果，若連續使用並不會停止後續動作。 例如：$('div').animate( { 'left' : '500px'
JavaScript [jQuery note.] queue 簡單應用心得 今天工作的時候，為了要在畫面上加入一些動態效果，並且讓他循序自動執行。所以有這方考量： 使用 setTimeout 或是 setInterval 利用 animate 可以延遲的方式重新呼叫 使用 queue 首先我嘗試了第一個方法，將要執行的東西，包成 function，然後利用 setTimeout 或是 setInterval 呼叫。很好，他可以運作了，但是我遇到另一個問題，當我需要中斷他，或是暫停的時候，用這種方式呼叫就相對的麻煩。因為我加入了動態（Effect）的效果，如果直接強制中斷，那該怎麼知道他做到
Work [jQuery tech.] GUI for jQuery 超強 jQuery 工具 GUI for jQuery 這東西是出來扼殺程式設計師的嗎（大誤），你看看這種拖拖拉拉的 GUI 到底是怎麼回事（你說說看，你說說看啊）。對於小型活動、時程短暫或是使用次數非常低（甚至是一次性頁面）來說，非常的方便。 結論就是，我還是包袱啊款款誒來去賣雞排好了！
Work [plurk tech.] 在單一噗浪頁面加入回應鏈結 + jQuery update, 腳本 jQuery 化完成，若有下載使用的，請更新，檔案一樣在最下面。 請先安裝 GreaseMonkey，還沒有把他 jQuery 化，暫時頂著用。 原始碼在此： // ==UserScript== // @name GetResponseURL // @namespace http://blog.hinablue.me/ // @include http://www.plurk.com/p/* // ==/UserScript== // Add jQuery var GM_
Work [jQuery tech.] paging flip with jQuery update, fixed IE 8 Sucks! 問題點：jQuery 1.3.2 的核心 1061 行，關於 attribute 的設定。 在 DOM 中，倘若有一個很正常的 Tag，若是這個 Tag 所擁有的 attribute 不存在，或是 CSS 設定的屬性質不存在，或是返回 NaN，則在 IE
JavaScript [CSS 3 tech.] CSS3 template layout module and multi background with jQuery 開始之前，底下是參考文件： CSS3 . Info, Try out the CSS 3 Template layout module Ready for use: CSS 3 Template layout module CSS Template layout module demo W3C Working Draft, CSS Template Layout Module CSS