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