用jquery實現的模擬QQ郵箱里的收件人選取及其他效果(一)
更新時間：2011年01月06日 22:54:53 作者：
今天要說的是用jquery的語法和組件dialog及Autocomplete來制作QQ郵箱的發(fā)件人操作功能，認為這個太過簡單的可以離開了。
不太清楚的可以先看看QQ發(fā)信的時候的操作，或者參看本文的演示：http://demo.jb51.net/js/email_qq/index.htm
它的功能大概有以下三個步驟：
我想大家都應該有所了解了吧！首先從最簡單的開始，那就是做那個彈出窗dialog了，這次沒有像我的上篇文章里說的那樣用iframe，http://jqueryui.com/demos/dialog/ jquery官方給出的例子和用法是這樣的，基本上很簡單的調用下就行了：
$(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>
這樣就可以完成彈窗的全部過程了，簡單明了。
然后就是把左側的移到右側的效果，相信也太簡單了點，我是這樣做的，點擊左側，點擊后的隱藏，并把它加到右側，點擊右側，右側的移除并顯示左側對應的項。當然還有一些鼠標hover的效果，也是很簡單。
最后點擊確定，把右側的進行拼接，放到收件人的框里，注意，這里的框并不是文本框，是一個DIV，只是樣式寫得很像文本框，所以，我們要把姓名的email地址用不同的標簽包容起來進行區(qū)分。最后每一個以分號分隔。
這樣一個完整的彈窗選聯系人效果就完成了，這樣你就基本上完成了整個功能的四分之一了。其他的下次再寫，謝謝關注！
打包下載 http://xiazai.jb51.net/201101/yuanma/email_qq.rar
它的功能大概有以下三個步驟：
一個收人框，右側是聯系薄里的分組
一個彈出聯系人的窗體，用的是jquery的dialog組件.
一個輸入智能提示插件，這里用到的是jquery的組件Autocomplete
我想大家都應該有所了解了吧！首先從最簡單的開始，那就是做那個彈出窗dialog了，這次沒有像我的上篇文章里說的那樣用iframe，http://jqueryui.com/demos/dialog/ jquery官方給出的例子和用法是這樣的，基本上很簡單的調用下就行了：
$(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>
這樣就可以完成彈窗的全部過程了，簡單明了。
然后就是把左側的移到右側的效果，相信也太簡單了點，我是這樣做的，點擊左側，點擊后的隱藏，并把它加到右側，點擊右側，右側的移除并顯示左側對應的項。當然還有一些鼠標hover的效果，也是很簡單。
最后點擊確定，把右側的進行拼接，放到收件人的框里，注意，這里的框并不是文本框，是一個DIV，只是樣式寫得很像文本框，所以，我們要把姓名的email地址用不同的標簽包容起來進行區(qū)分。最后每一個以分號分隔。
這樣一個完整的彈窗選聯系人效果就完成了，這樣你就基本上完成了整個功能的四分之一了。其他的下次再寫，謝謝關注！
打包下載 http://xiazai.jb51.net/201101/yuanma/email_qq.rar
相關文章
這篇文章主要為大家詳細介紹了基于jquery實現輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
本文主要介紹了用的jqueryRotate插件實現轉盤抽獎功能的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了Jquery如何實現Div上下移動,需要的朋友可以參考下2014-04-04
jQuery 錨點跳轉滾動條平滑滾動一句話代碼,需要的朋友可以參考下。2010-04-04
這篇文章主要介紹了Jquery.Form 異步提交表單的簡單實例。需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要介紹了JQuery包裹DOM節(jié)點的方法,實例分析了wrap與wrapAll方法實現包裹DOM節(jié)點的技巧與相關注意事項,需要的朋友可以參考下2015-06-06
jquery除了它自己非常出色的js功能之外還附帶有數不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個，用來在線生成二維碼2013-08-08
這篇文章主要為大家詳細介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了基于jQuery實現左右圖片輪播，實現原理通用可通用，希望能和大家分享一下思路，感興趣的小伙伴們可以參考一下2015-12-12
本文給大家簡單總結了下jQuery中鍵盤事件的使用方法以及相關示例，非常的實用，有需要的小伙伴可以參考下。2016-02-02