jQuery

A collection of 20 posts

Plugin

[jQuery plugin] Plugin 的思路與方法

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

[jQuery note.] 關於一點點 Namespace Event 的事情

在改寫自己的 Plugin 的時候出現了一個問題，由於 Event 在 Plugin 中宣告之後，如果重新再次綁定 Plugin 的時候，那麼裡面的 Event 有可能會被重新再綁定一次（等於重複註冊）。所以，後來你就會發現，你的所綁定的物件怎麼不太一樣了。 這時候可以用 Namespace 來解決這件事情。 $("div.myClick").bind("click.myClick", function(event) { ... }); 在一般的
  • Hina Chen
    Hina Chen
1 min read
jQuery

[jQuery plugin.] iPhone-slide Plugin 爆肝更新

gitHub 在這裡：https://github.com/hinablue/jqiphoneslide DEMO 在這裡：http://jquery.hinablue.me/jqiphoneslide/ 我拔掉一些東西： 滑動到指定頁面 無限頁面滑動 動態載入頁面（Ajax） 因為我還沒有實際測試所以先不放。 重新檢視了換頁演算方式，發現可以寫的比之前簡單點，所以就動手改了！然後...**凌晨三點多 Ubuntu 瞬間當掉讓我感到絕望啊！**早上起來重新寫了一些東西，然後就丟上 gitHub 了。 然後 iPhone4
  • Hina Chen
    Hina Chen
1 min read
Work

[jQuery note.] jQuery 1.5 在 Events 的探勘

UPDATE, 還是認真說明一下好了（笑） 委派事件（delegate）跟 live 事件其實是指同一件事情，不過有幾個地方不同： 由於 live 事件直接綁定在 document 上，所以一旦有中途有事件傳播被取消（stopPropagation），該 live 事件就不會被觸發。 委派事件（delegate）同樣使用 live 事件的綁定方式，不同的是，他的事件傳播會依序傳回直到被中斷為止。 請看以下範例： http://jsfiddle.net/hinablue/KFkGZ/1/
  • Hina Chen
    Hina Chen
5 min read
jQuery

[筆記] 關於 jQuery UI 的小插曲

UPDATE, 在 Droppable 中有個屬性叫做 tolerance（簡稱叫阿縮比（疑），他可以設定幾種 Drag&Drop 中 drop 的發生情況。預設是使用 intersect（交叉），當兩個物件交疊 50% 以上，則判定為真。而其他的設定值則為：fit，touch 與 pointer。 fit 是放置物件要完全放入目標物件，才會觸發。這麼說好了，倘若你買了一組沙發，放不進購物車也是很正常的（喂）
  • Hina Chen
    Hina Chen
3 min read
Work

[jQuery note.] 初探 jQuery Mobile 的筆記

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

[JS tech.] CKeditor Dialog 再起 part 5

在這裡開始之前，我必須告訴你們一件事情，CKeditor 內含的 Event，也就是總共可以被 fire 的監聽事件，分門別類總共有 56 種之多！其中因為 IE 的關係，selectionChange 的監聽事件分出了 IE 專用的 selectionchange（是的，僅大小寫不同），再扣除測試的兩種監聽 someEvent 與 testEvent，還有原本就在 DOM 常見的監聽式以外，CKeditor 所使用的 Event 還是高達 46
  • Hina Chen
    Hina Chen
6 min read
Work

[jQuery plugin.] 自製 iPhone 滑動效果

第一次寫 jQuery plugin，發現有很多事情不能單單在 plugin 裡面就把他解決掉。裡面的 this 問題也讓我撞牆撞了好幾次。不過總算是有點東西出來了，雖然不知道能用在哪裡，但是也當作是個練功吧。 鏈結在此：http://jquery.hinablue.me/jqiphoneslide 可以有的功能與設定： 增加自訂頁面（預設為空白頁，內容需自訂 指定滑動至某 指定可抓取的滑動區 限制滑動最大頁 可以另外指定拖曳區塊（可以不只一個 可以指定特定上一頁、下一頁按鈕（可以不只一個 可以隱藏特定頁面（僅計算顯示頁面數量，並重新計算長度
  • Hina Chen
    Hina Chen
1 min read
Work

[jQuery note.] 在 hover 上微妙的變化

通常我們對於 .hover 這個事件的印象，就如同於 .mouseenter 與 .mouseleave 這兩個事件的合體。這種互動式（Interaction Helpers）的事件在 jQuery 中還有一個，叫做 .toggle，在這裡就暫且不提。 一般來說，我們使用 .hover 的時候，就是希望能夠監聽使用者的滑鼠動作，然後在某種條件下觸發事件。那麼，最簡單的例子就是這樣 <!DOCTYPE html> <html> <
  • Hina Chen
    Hina Chen
4 min read
Work

[WWW] Plupload Queue 改

上次介紹過這個 超犯規上傳檔案工具，這次要來繼續犯規。 由於我們需要監聽檔案上傳的動作，我們看他的 API 文件中，有描述了 Event 的項目，但是，倘若使用 pluploadQueue 的方法，他所內建的 Event 就被他的 Queue 給寫死了，從外部就沒辦法直覺的控制。當然，要避免這種情況，就是自己重新畫一個 UI 來用（翻桌）。 所以，既然人家已經好心的幫我們畫好了一個 UI（而且還可以支援多國語言），那就不要枉費人家的一番好意，拿來改寫也只是剛好而以。附帶一提，
  • Hina Chen
    Hina Chen
3 min read
JavaScript

[jQuery tech.] 你的 stop() 真的 stop 了嗎 - 漫談 queue() part 1

前陣子例用 queue 做了許多東西，慢慢的發現，原生的 stop() 並非我想像中的樣子。 使用任何的動態效果，或是 delay() 這樣的效果，stop() 能使之停止。 使用 queue()，stop() 能使之停止。 stop() 可以傳入兩個布林值，一個是 clearQueue，另一個是 JumpToEnd。 然而，我卻發現事實上並不是這樣。 stop() 僅可停止單一動態動態效果，若連續使用並不會停止後續動作。 例如：$('div').animate( { 'left' : '500px'
  • Hina Chen
    Hina Chen
4 min read
JavaScript

[jQuery note.] queue 簡單應用心得

今天工作的時候，為了要在畫面上加入一些動態效果，並且讓他循序自動執行。所以有這方考量： 使用 setTimeout 或是 setInterval 利用 animate 可以延遲的方式重新呼叫 使用 queue 首先我嘗試了第一個方法，將要執行的東西，包成 function，然後利用 setTimeout 或是 setInterval 呼叫。很好，他可以運作了，但是我遇到另一個問題，當我需要中斷他，或是暫停的時候，用這種方式呼叫就相對的麻煩。因為我加入了動態（Effect）的效果，如果直接強制中斷，那該怎麼知道他做到
  • Hina Chen
    Hina Chen
4 min read