由於觸控式的手機流行,加上 iPhone 盛行,Android 後起之秀持續攪亂一池春水,所以手機網頁設計突然變得很熱門。所以最近 Responsive Web
Design 也突然流行起來,翻成響應式網頁設計感覺很怪,我個人會叫他適用性網頁設計
,畢竟,他是針對不同的裝置,所使用的不同的螢幕尺寸,而去回應不同的畫面結果,所以適用性或許比較容易理解(吧?
好,其實無關設計,我們來聊一下觸控事件。
--------------------------------------------------------------------------------
在 w3c 的規範 [http://www.w3.org/TR/touch-events/
寫 Javascript 一直都不是我的強項,所以當 jQuery 一推出的時候,簡直是驚為天人!這麼好用的東西為什麼現在才會出現呢?那我在 1998
年寫得那些,不就是跟垃圾一樣了嘛(眼神死
所以回過頭來,研究一下 Plugin 也是很合理的。
--------------------------------------------------------------------------------
Plugin 該怎麼開始
通常我們看到的範例會這樣寫,
(function($) {
var defaults = {};
$.fn.myplugin = function() {
return $(this).each(function() {
});
};
})(jQuery);
然後呢,
正所謂醜媳婦總要見公婆。所以有興趣的人就去我的 gitHub 上面下載吧。
https://github.com/hinablue/jqiphoneslide
使用方法在 DEMO 都有說明。想看實際效果的請到這裡:
http://jquery.hinablue.me/jqiphoneslide
然後,我也不知道要說啥了(喂)。我只想說,寫 Plugin 的時候,關於 this 的 Scope 一定要先搞清楚,不然會一直鬼打牆喔(啾咪!
在改寫自己的 Plugin 的時候出現了一個問題,由於 Event 在 Plugin 中宣告之後,如果重新再次綁定 Plugin
的時候,那麼裡面的 Event 有可能會被重新再綁定一次(等於重複註冊)。所以,後來你就會發現,你的所綁定的物件怎麼不太一樣了。
這時候可以用 Namespace 來解決這件事情。
> $("div.myClick").bind("click.myClick", function(event) { ... });
在一般的 Event 中用點相連的就是我們自己所指定的 Namespace,用以區別一般的
UPDATE, 還是認真說明一下好了(笑)
委派事件(delegate)跟 live 事件其實是指同一件事情,不過有幾個地方不同:
1. 由於 live 事件直接綁定在 document 上,所以一旦有中途有事件傳播被取消(stopPropagation),該 live 事件就不會被觸發。
* 委派事件(delegate)同樣使用 live 事件的綁定方式,不同的是,他的事件傳播會依序傳回直到被中斷為止。
請看以下範例:
* http://jsfiddle.net/hinablue/KFkGZ/