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

它的功能大概有以下三個步驟：

 

我想大家都應(yīng)該有所了解了吧！首先從最簡單的開始，那就是做那個彈出窗dialog了，這次沒有像我的上篇文章里說的那樣用iframe，http://jqueryui.com/demos/dialog/ jquery官方給出的例子和用法是這樣的，基本上很簡單的調(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>


這樣就可以完成彈窗的全部過程了，簡單明了。

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

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

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

最新評論