用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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
Javascript玩转继承(三)
May 08 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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利用smtp类实现电子邮件发送
2015/10/30 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP编写RESTful接口
2016/02/23 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python时间获取及转换知识汇总
2017/01/11 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
市场营销毕业求职信
2014/08/07 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
化工实习心得体会
2014/09/09 职场文书
铁路安全反思材料
2014/12/24 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书