Float Messenger 的應用 與 當 jQuery 遇上 Big5

分類: jQuery|技術分享 作者: suzy

25 6 月 2009

大家好, 我又來了, 在這麼短時間又要發一篇blog, 實在不像我ㄚ XD....

今天要講的是如何套用 Jace 所寫的 jQuery Plugin Float Messenger.js. 然後再延伸 鍵盤控制的新功能, 讓 Enter, Esc 還有 Ctrl + O 或 Shift + O 都可以聽你的話.

這是 FloatMessenger 原來的模樣:
fm

首先我做了一個新框框, 把它 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;
}

變成紅白風啦啦啦啦啦 Wohoo~~
fm2

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 有同樣的功能.

fm3

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

Avatar

jase

6 月 25th, 2009 at 6:21 下午

整篇文章充滿了愉快的鄉民風阿..

Avatar

suzy

6 月 30th, 2009 at 2:02 下午

我真的是鄉民阿阿阿阿阿 XD

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊，希望能讓更多人一起為台灣的網路產業加油。

分類

日期

  • admin: 出現了出現了! 快來用~ [...]
  • admin: 還有提供喔，歡迎使用! [...]
  • 翔彌: 請問這個軟體還有機會出現嗎？真的好好用但網頁已經不能用了QQ [...]
  • DK: 請問已經不提供這個工具了嗎？ T_T 已經習慣你們的介面了，好可惜 Q_Q [...]
  • admin: 您好，目前已復原囉，可以再試看看。 [...]

Copyright © 2007 - 哇寶部落格 - is proudly powered by WordPress | 登入

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com