Wabow Information Inc. Blog
大家好, 我又來了, 在這麼短時間又要發一篇blog, 實在不像我ㄚ XD....
今天要講的是如何套用 Jace 所寫的 jQuery Plugin Float Messenger.js. 然後再延伸 鍵盤控制的新功能, 讓 Enter, Esc 還有 Ctrl + O 或 Shift + O 都可以聽你的話.
這是 FloatMessenger 原來的模樣:
首先我做了一個新框框, 把它 css 化, 只要掌握到下面的巢狀結構, 就可以輕易的替她換新衣服...
1 2 3 4 5 6 | <div id="messenger"> <div class="wrapper"> <blockquote><span>MESSAGE</span></blockquote> <form method="post" action="">....</form> </div> </div> |
原本的 css 位置擺放也都已經寫好了, 稍加修改即可:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | #messenger { width: 463px; margin-bottom: 20px; background: url(bg-poll-header.gif) no-repeat 0 0; font-size: 12px; line-height:20px; } #messenger h2 { /*text-indent: -100000px;*/ color:#ca0000; font-size:16px; padding:10px 0 0 10px; } #messenger .closeMessenger { float:right; padding:2px 6px; margin:0 8px 0 0; text-decoration:none; font-size:11px; color:#000; } #messenger .closeMessenger:hover { background-color:#ccc; } #messenger .wrapper { width: 463px; padding-bottom: 10px; background: url(bg-poll-footer.gif) no-repeat 0 bottom; } #messenger p { margin: 27px 10px 0 28px; font-size: 12px; } #messenger form { width: 458px; padding: 8px 0 0 5px; background: url(bg-poll-content.gif) repeat-y; } #messenger form label { margin-right: 10px; } #messenger form .btnGroup { margin: 10px 0 0 0; } |
OK...一切都很順利, 不過在幾乎要完成的時候遇到了一個問題, 就是 Enter 無法使用, 這對慣用 Enter 的使用者可能會造成不便!?.. 困難點是 Float Messenger 裡面的 form submit 時, 我沒辦法讓 submit這個動作 (or Enter) 跟 '確定'按鈕同步去做同一件事, 尤其當有很多 Float Messenger 在交替使用的時候, 也沒辦法在一開始就寫死, 因為是同一個 form 的 submit() 阿....... 這個問題一度卡了我有點久, 不過昨天靈光一閃, 才發現原來其實可以很簡單.. 🙂
DEMO 有 Enter 煩惱的 FloatMessenger: 點我點我
我在 FloatMessenger 多加了一個 setting.. onSubmit: function() {}
1 2 3 4 5 6 7 8 9 | $.floatMessenger({ title: '請輸入密碼', message: '您輸入的 E-mail 已註冊,請輸入密碼 "111" 。', form: '....略', buttons: { '確定': function () { memberLoginHandler(); } }, onSubmit: function () { memberLoginHandler(); return false;} }); |
然後在 FloatMessenger.js 裡加入:
1 2 3 4 5 6 7 | // 送出控制 if (_settings.onSubmit) { $('form', $html).submit(_settings.onSubmit); } else { // 這是預設, 加這行是為了防止按 enter 會直接 submit 的情形, 我不希望這樣 $('form', $html).submit(function(){return false}); } |
這樣就可以解決 Enter 的問題了, 也可以跟我想要的按鈕同步^o^... 然後既然都已經 Enter 了, 那就再來點別的吧!
我想讓 Esc 也有功能, 按了之後會 unblock! 所以我在 FloatMessenger.js 加了這個:
1 2 3 4 5 6 7 | $(document).keypress(function(e){ var key = e.charCode || e.keyCode || 0; if (key == 27) { // ESC $.unblockUI(); return false; } }) |
我想讓 Ctrl + 某鍵 跟 Shift + 某鍵 會有功能. 在設定檔改就可以了.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $.floatMessenger({ title: '忘記密碼', message: '我們將密碼以電子郵件方式送給您。)', form: '', buttons: { '請寄送密碼給我 (Shift + P)': function () { getPasswordBlock(); }, '忘了這件事 (Shift + F)': function () { $.unblockUI(); }, '回哇寶首頁 (Shift + H)': function () { location.href='http://www.wabow.com'; } }, ctrlKeys: { }, shiftKeys: { 'p':80, 'f':70, 'h':72 } }); |
'p' 是 key
80 是 keycode
每一個鍵都有固定的 keycode, 網路上可以查得到所有的 keycode..
這3 個 shiftKeys 其實是按照 buttons 的順序去排的, 按了之後會跟 button 有同樣的功能.
DEMO 沒有 Enter 煩惱的 FLoatMessenger: 點我點我
好, 按鍵問題終於解決了, 順便跟大家分享 jQuery 遇上 big5 中文的問題.....
我在跑 ajax 的時候, 我要 用 form POST 中文字, 然後再丟到資料庫去查詢, 可是資料庫一直查不到資料...
echo 出來的值也是對的阿, 氣死我啦, 後來才發現, 很見鬼的, Big5 的字 丟到 jQuery 它會丟出 UTF8 給你.............................
所以我們要加上 iconv 轉碼的動作:
1 2 3 4 5 | // 解決 jQuery 使用 UTF-8 送出資料的問題 $big5Name = iconv('utf-8','big5', $name); // 這樣才能在資料庫找得到 $sql = "SELECT * FROM table WHERE vipName = '$big5Name'"; |
以為這樣就沒問題了, 上線後的第三天, 許先生抗議了...
許功蓋啦 >"<
1 2 | // 解決許功蓋的問題 $big5Name = addslashes($big5Name); |
然後存進 SESSION 時, 記得要加 stripslashes:
1 2 | // 如果不 stripslashes 會顯示 許\先生 $_SESSION['VIP_NAME'] = stripslashes($big5Name); |
以為半天就可以解決的事, 結果有這麼多意想不到的問題發生.... 一度很想偷懶跳過這些工, 但是幸好有堅持下去才能解決...解決後發現其實也不難嘛 (  ̄ c ̄)y▂ξ (囂張貌)
這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。
2 Responses to Float Messenger 的應用 與 當 jQuery 遇上 Big5
jase
6 月 25th, 2009 at 6:21 下午
整篇文章充滿了愉快的鄉民風阿..
suzy
6 月 30th, 2009 at 2:02 下午
我真的是鄉民阿阿阿阿阿 XD