微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 18:12:32
原创
1648人浏览过

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

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

一个收人框，右侧是联系薄里的分组

 

一个弹出联系人的窗体，用的是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
});
});

adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

ImgCleaner
ImgCleaner

一键去除图片内的任意文字，人物和对象

ImgCleaner 220
查看详情 ImgCleaner




这样就可以完成弹窗的全部过程了，简单明了。

然后就是把左侧的移到右侧的效果，相信也太简单了点，我是这样做的，点击左侧，点击后的隐藏，并把它加到右侧，点击右侧，右侧的移除并显示左侧对应的项。当然还有一些鼠标hover的效果，也是很简单。

最后点击确定，把右侧的进行拼接，放到收件人的框里，注意，这里的框并不是文本框，是一个DIV，只是样式写得很像文本框，所以，我们要把姓名的email地址用不同的标签包容起来进行区分。最后每一个以分号分隔。

这样一个完整的弹窗选联系人效果就完成了，这样你就基本上完成了整个功能的四分之一了。其他的下次再写，谢谢关注！
打包下载 http://xiazai.jb51.net/201101/yuanma/email_qq.rar
相关标签：
qq邮箱

大家都在看：

QQ邮箱
QQ邮箱

QQ邮箱是腾讯公司推出的一款专业、安全、便捷的手机邮箱应用。QQ邮箱整合了QQ社交网络的优势，并结合了电子邮件的功能，为用户提供了一个全方位的邮件管理平台，有需要的小伙伴快来保存下载体验吧！

下载
来源：php中文网
收藏 点赞
上一篇：Js event事件在IE、FF兼容性问题_javascript技巧 下一篇：js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
TypeScript中处理Map集合中的预期值：非空断言操作符 ! 的应用与考量 在TypeScript中处理Map等集合类型时，类型检查器有时无法静态推断出我们确信存在的特定值。本文将深入探讨如何利用非空断言操作符!，在开发者对运行时值有明确把握时，告知类型系统该值非null或undefined。通过实例，文章将解释!的作用、适用场景及潜在风险，帮助开发者在保持类型安全的同时，更高效地编写代码。
2025-11-18 13:22:01
691
JavaScript调试技巧_Chrome DevTools高级功能 掌握ChromeDevTools高级调试技巧可显著提升效率：1.通过断点、条件断点、DOM断点和XHR断点精准控制执行；2.利用调用栈和作用域面板查看上下文及变量状态，实时监控表达式并修改变量值；3.使用单步调试按钮（Stepover、Stepinto、Stepout、Resume）控制代码执行流程；4.启用“Pauseonexceptions”捕获未处理和已捕获异常，并开启异步堆栈追踪Promise等异步操作。熟练运用这些功能有助于快速定位复杂问题。
2025-11-18 13:15:05
366
数据可视化：D3.js与Chart.js选型指南 D3.js适合高定制化复杂交互的可视化项目，需较强前端能力；Chart.js适用于快速开发标准图表，上手简单。1.D3.js功能强大但学习成本高，使用SVG渲染，灵活性强；2.Chart.js基于Canvas，性能优，配置简洁，适合常规报表。两者可结合使用，根据团队能力和需求选择。
2025-11-18 13:04:06
521
使用正则表达式精确匹配双大括号内文本并去除空白 本文详细介绍了如何使用正则表达式精确提取双大括号{{...}}内的文本内容，同时自动去除其前后的多余空白。通过讲解正向先行断言和正向后行断言的组合应用，以及非贪婪匹配的技巧，帮助读者掌握在复杂文本模式中进行精准数据提取的方法，确保获取纯净的目标字符串，适用于模板解析等场景。
2025-11-18 13:00:07
172
JS函数如何定义闭包函数_JS闭包函数定义原理与应用技巧 闭包是函数与其词法环境的组合，使内部函数能访问外部变量，即使外部函数已执行完毕。如functionouter(){letcount=0;returnfunctioninner(){count++;console.log(count);};}中，inner形成闭包，持续访问count。应用场景包括模拟私有变量、事件回调和函数工厂，如createCounter(step)返回带步长的计数函数。需注意内存泄漏、循环中变量共享问题及性能影响，合理使用可提升代码灵活性。
2025-11-18 12:58:02
857
Blazor应用中FontAwesome的本地部署与性能优化指南 本文旨在解决Blazor应用中FontAwesome本地部署时常见的性能瓶颈和图标显示异常问题。核心内容在于解析FontAwesome的CSS-Only与JavaScript增强模式，并强调在仅使用CSS时，必须确保webfonts文件夹的正确存在与路径配置。通过优化本地文件结构和避免不必要的JavaScript引用，可以显著提升图标加载速度和应用性能。
2025-11-18 12:57:18
419
JavaScript混入模式_多重继承替代方案 混入模式通过对象扩展实现功能复用，如将Serializable和Observable方法合并到用户对象，支持动态添加行为，避免深层继承，但需注意命名冲突，推荐组合方式提升可维护性。
2025-11-18 12:52:03
735
在React中优雅地集成Spotify API：使用自定义Hook获取访问令牌 本文详细介绍了在React应用中集成SpotifyAPI时，如何高效且可复用地获取访问令牌。通过将令牌获取逻辑封装成自定义HookuseSpotifyAccessToken，我们实现了业务逻辑与UI组件的清晰分离，并提供了示例代码、使用方法以及关于敏感信息管理和错误处理的最佳实践，确保您的React应用能够专业、安全地与SpotifyAPI交互。
2025-11-18 12:34:54
584
JS注解怎么标注数组类型_ JS数组类型参数的注解方法与示例 使用JSDoc可为JavaScript数组参数添加类型注解，提升代码可读性和工具支持。1.基础数组类型用{number[]}或{Array}；2.多维数组通过叠加[]表示，如二维数组{number[][]}；3.对象数组可用{Object[]}或指定结构如{{id:number,name:string}[]}；4.混合类型使用联合类型，如{(string|number)[]}；5.可选参数在参数名外加方括号[b]，并可标注为{number[]|null}等可能为空的类型。配合VSCode或Typ
2025-11-18 12:30:02
959
TypeScript中强制Map包含特定值并安全访问的技巧：非空断言 本文探讨了在TypeScript中处理Map类型时，当开发者确信某个特定值必然存在，但类型检查器无法推断此事实时遇到的挑战。我们将介绍如何利用TypeScript的非空断言操作符!来明确告知编译器某个表达式不会是null或undefined，从而简化代码并提升类型安全，避免不必要的空值检查。
2025-11-18 12:28:02
564
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部