用jquery實(shí)現(xiàn)的模擬QQ郵箱里的收件人選取及其他效果(一)

更新時(shí)間：2011年01月06日 22:54:53 作者：

今天要說(shuō)的是用jquery的語(yǔ)法和組件dialog及Autocomplete來(lái)制作QQ郵箱的發(fā)件人操作功能，認(rèn)為這個(gè)太過(guò)簡(jiǎn)單的可以離開(kāi)了。

不太清楚的可以先看看QQ發(fā)信的時(shí)候的操作，或者參看本文的演示：http://demo.jb51.net/js/email_qq/index.htm

它的功能大概有以下三個(gè)步驟：

一個(gè)收人框，右側(cè)是聯(lián)系薄里的分組

一個(gè)彈出聯(lián)系人的窗體，用的是jquery的dialog組件.

一個(gè)輸入智能提示插件，這里用到的是jquery的組件Autocomplete

我想大家都應(yīng)該有所了解了吧！首先從最簡(jiǎn)單的開(kāi)始，那就是做那個(gè)彈出窗dialog了，這次沒(méi)有像我的上篇文章里說(shuō)的那樣用iframe，http://jqueryui.com/demos/dialog/ jquery官方給出的例子和用法是這樣的，基本上很簡(jiǎn)單的調(diào)用下就行了：

$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );

$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

這樣就可以完成彈窗的全部過(guò)程了，簡(jiǎn)單明了。

然后就是把左側(cè)的移到右側(cè)的效果，相信也太簡(jiǎn)單了點(diǎn)，我是這樣做的，點(diǎn)擊左側(cè)，點(diǎn)擊后的隱藏，并把它加到右側(cè)，點(diǎn)擊右側(cè)，右側(cè)的移除并顯示左側(cè)對(duì)應(yīng)的項(xiàng)。當(dāng)然還有一些鼠標(biāo)hover的效果，也是很簡(jiǎn)單。

最后點(diǎn)擊確定，把右側(cè)的進(jìn)行拼接，放到收件人的框里，注意，這里的框并不是文本框，是一個(gè)DIV，只是樣式寫(xiě)得很像文本框，所以，我們要把姓名的email地址用不同的標(biāo)簽包容起來(lái)進(jìn)行區(qū)分。最后每一個(gè)以分號(hào)分隔。

這樣一個(gè)完整的彈窗選聯(lián)系人效果就完成了，這樣你就基本上完成了整個(gè)功能的四分之一了。其他的下次再寫(xiě)，謝謝關(guān)注！
打包下載 http://xiazai.jb51.net/201101/yuanma/email_qq.rar

您可能感興趣的文章: