Plugin

[jQuery plugin] Plugin 的思路與方法

寫 Javascript 一直都不是我的強項,所以當 jQuery 一推出的時候,簡直是驚為天人!這麼好用的東西為什麼現在才會出現呢?那我在 1998 年寫得那些,不就是跟垃圾一樣了嘛(眼神死 所以回過頭來,研究一下 Plugin 也是很合理的。 Plugin 該怎麼開始 通常我們看到的範例會這樣寫, (function($) { var defaults = {}; $.fn.myplugin = function() { return $(this).each(function() { }); }; })(jQuery); 然後呢,我們就在

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.] 初探 jQuery Mobile 的筆記

首先,如果可以的話,先看看官方的說明吧! http://jquerymobile.com/demos/1.0a1/ 官方有說,所有的內容與結構都是基於 W3C 的 WAI-ARIA 為準,所以在要做這個之前,還是先得去翻閱一次那些規格等等的文件。因為跟一般的 HTML 有相當的落差,所以其實要上手最快的方式,還是直接去挖官方的 Code 回來參考是比較快的(喂)!附帶一提的是,眼尖的人應該會發現 WAI-ARIA 還是處於 Draft 的狀態(IE 表示:

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(而且還可以支援多國語言),那就不要枉費人家的一番好意,拿來改寫也只是剛好而以。附帶一提,

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)的效果,如果直接強制中斷,那該怎麼知道他做到