用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)


Posted in Javascript onJanuary 06, 2011

不太清楚的可以先看看QQ发信的时候的操作,或者参看本文的演示:http://demo.3water.com/js/email_qq/index.htm

它的功能大概有以下三个步骤:

用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
一个收人框,右侧是联系薄里的分组

 

用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
一个弹出联系人的窗体,用的是jquery的dialog组件.
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
一个输入智能提示插件,这里用到的是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地址用不同的标签包容起来进行区分。最后每一个以分号分隔。

这样一个完整的弹窗选联系人效果就完成了,这样你就基本上完成了整个功能的四分之一了。其他的下次再写,谢谢关注!
打包下载 http://xiazai.3water.com/201101/yuanma/email_qq.rar

Javascript 相关文章推荐
javascript replace()正则替换实现代码
Feb 26 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 #Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 #Javascript
ASP中Sub和Function的区别说明
Aug 30 #Javascript
TBCompressor js代码压缩
Jan 05 #Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 #Javascript
Js event事件在IE、FF兼容性问题
Jan 01 #Javascript
javaScript同意等待代码实现心得
Jan 01 #Javascript
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
Javascript 类型转换方法
2010/10/24 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
理解AngularJs指令
2015/12/10 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python实现二分查找算法实例
2015/05/26 Python
python避免死锁方法实例分析
2015/06/04 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python爬虫添加请求头代码实例
2019/12/28 Python
Python如何省略括号方法详解
2020/03/21 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
合理化建议书
2015/02/04 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers