香港新浪網 MySinaBlog
« 上一篇 | 下一篇 »
Angus | 20th Dec 2006 | Internet, Usability | (2370 Reads)

Jacky 在他的 blog 裡提到希望可以「修改使用 Snap Preview,點擊『預覽』才出現預覽,而不是 mouse over」。不過最後因為不想直接改 Snap Preview Anywhere (SPA) 的 javascript 所以放棄了。我十分讚同 Jacky 的看法,因為實在很煩人,所以我在這裡會嘗試解決他的問題。

我初時想,最簡單的方法是 override mouseover 的 event,改為在 click 的 event 時才顯示。不過實行起來郤很困難,一來不知道怎樣可以阻止 SPA 自己的 event handler 處理 mouseover event,另外也發覺想自己 trigger 顯示 SPA 的 preview window 也很麻煩。

既然這個方法不行,就用一個比較夾硬的方法,就是在 mouseover event 時隱藏 SPA 的 preview window(用 JQuery 的 hide() ,在 JQuery 裡,hide() 是用 css 的 display:none),然後在 click event 時才顯示。原理就是 mouseover event "應該" 比 click event 早發生,所以在 click event 的時候 SPA "應該" 已經準備好了 preview window,只不過之前被那句 display:none 強迫隱藏,現在就在 click 的時候讓它重見天日。

這方法好像很兒戲,不過我在 Firefox 2 和 IE 6 試過的效果都十分好,而且做法很簡單,只要在 Jacky 的 code 內加上下面幾行就可以:

  1. $(preview_link).mouseover(function() {
  2. $('#snap_preview_anywhere_main').hide();
  3. });
  4. $(preview_link).click(function() {
  5. $('#snap_preview_anywhere_main').show();
  6. return false;
  7. });

另外我也建立了一個 testing page,入面有完整的 source code 和 example,大家可以一試。

後記:我最近都是在玩 Yahoo! UI,今次是我第一次寫 JQuery,覺得很不錯,對 DOM 的處理比 YUI 優勝不少,看來我以後都可以用 JQuery + YUI 去寫 Javascript 了。


[4] Weight Loss Steroids

Buy Sciroxx statue championship brands system mclish Steroids Blog, press referred lift occurs developed Buy Parabolan for Sale, year lori workout metabolic carbohydrates Buy Steroids.


[引用] | 作者 Weight Loss Steroids | 1st May 2012 | [舉報垃圾留言]

[3] Re:
Jacky :
In your code, you can also chain the mouseover().click() , to spare some jQuery object creation.

可能我睇唔慣, set attribute 用 chain 就好, 但係連 mouseover().click() 都 chain 我覺得會好亂,為了 readibility,唯有多一兩次 object creation 了


[引用] | 作者 angus | 20th Dec 2006 | [舉報垃圾留言]

[2]
Jacky :
You can also use hide()/show() method instead of setting css() properties.

原來在 JQuery 裡,hide 就是用了 display:none,已改了,謝謝指正


[引用] | 作者 angus | 20th Dec 2006 | [舉報垃圾留言]

[1]

Although there is some coupling (need to know the ID for SPA panel), but overall is working good. I have modified the code in my site as well.

In your code, you can also chain the mouseover().click() , to spare some jQuery object creation. You can also use hide()/show() method instead of setting css() properties.


[引用] | 作者 Jacky | 20th Dec 2006 | [舉報垃圾留言]