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

2019-11-21 00:00:06

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

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

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

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

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

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

我想大家都應(yīng)該有所了解了吧！首先從最簡(jiǎn)單的開始，那就是做那個(gè)彈出窗dialog了，這次沒有像我的上篇文章里說的那樣用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>

這樣就可以完成彈窗的全部過程了，簡(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，只是樣式寫得很像文本框，所以，我們要把姓名的email地址用不同的標(biāo)簽包容起來進(jìn)行區(qū)分。最后每一個(gè)以分號(hào)分隔。

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

上一篇：基于jquery的分頁(yè)控件(C#)

下一篇：jQuery1.3.2 升級(jí)到j(luò)Query1.4.4需要修改的地方