用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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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
把77A收信机改造成收音机
2021/03/02 无线电
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP多进程简单实例小结
2019/11/09 PHP
js indexOf()定义和用法
2012/10/21 Javascript
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序 标签传入数据
2017/05/08 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python使用pymysql小技巧
2017/06/04 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python中def是做什么的
2020/06/10 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
信息专业本科生个人的自我评价
2013/10/28 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
超市端午节活动方案
2014/01/23 职场文书
公司活动总结怎么写
2014/06/25 职场文书
校本教研活动总结
2014/07/01 职场文书
员工升职自我评价
2019/03/26 职场文书
导游词之南京中山陵
2019/11/27 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
python实现简单的三子棋游戏
2022/04/28 Python