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

不太清楚的可以先看看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
});
});
<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.jb51.net/201101/yuanma/email_qq.rar

赞 (0)

相关推荐

  • js仿QQ邮箱收件人选择与搜索功能

    js仿QQ邮箱收件人选择与搜索功能

    之前因为项目开发需要,对于收件人选择与搜索的js实现,整理如下: 页面截图: 主要html代码: <#--左侧--> <div> <label>To:</label> <div id="divtxt" class="mailtxt_div"></div> <input type="hidden" name="messName" id="me

  • jQuery实现的Email中的收件人效果（按del键删除）

    除以下代码外,再导入个jquery-1.4.4.min.js文件 ,代码中收件人是写死的("ABC", "ABCDEF", "BCDEF"),已测试通过! 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageencoding="utf-8" %> <!DOCTYPE HTML PUBLIC "

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

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

    不太清楚的可以先看看QQ发信的时候的操作,或者参看本文的演示:http://demo.jb51.net/js/email_qq/index.htm 它的功能大概有以下三个步骤: 一个收人框,右侧是联系薄里的分组 一个弹出联系人的窗体,用的是jquery的dialog组件. 一个输入智能提示插件,这里用到的是jquery的组件Autocomplete我想大家都应该有所了解了吧!首先从最简单的开始,那就是做那个弹出窗dialog了,这次没有像我的上篇文章里说的那样用iframe,http://jqu

  • Java基于JavaMail实现向QQ邮箱发送邮件

    Java基于JavaMail实现向QQ邮箱发送邮件

    最近项目在做新闻爬虫,想实现这个功能:爬虫某个页面失败后,把这个页面的 url 发到邮箱.最终实现的效果图如下,后期可以加上过滤标签.失败状态码等,方便分类搜索异常. 开发人员可以根据邮件里的 url 和堆栈信息,分析爬虫失败的原因. 是不是服务器 down 了? 还是爬虫的 Dom 解析没有解析到内容? 还是正则表达式对于这个页面不适用? 开启SMTP服务 在 QQ 邮箱里的 设置->账户里开启 SMTP 服务 注意开启完之后,QQ 邮箱会生成一个授权码,在代码里连接邮箱使用这个授权码而不是原

  • selenium+python实现自动登陆QQ邮箱并发送邮件功能

    本期做一个selenium详细实例,会把我在元素定位中遇到的一些阻塞和经验分享给大家. (浏览器为Chrome) (如果只需要最终的完整代码,请直接跳转到文章最后) 浏览器打开QQ邮箱登录网址 QQ邮箱登录地址为:https://mail.qq.com/ from selenium import webdriver import time zhengyi = webdriver.Chrome() zhengyi.get('https://mail.qq.com/') 这一步没有遇到问题,至于为什

  • thinkphp实现163、QQ邮箱收发邮件的方法

    thinkphp实现163、QQ邮箱收发邮件的方法

    用了很长时间去一步一步摸索,终于先在163 网易邮箱上测试成功了,下面就把这个过程分享给大家. 在进入正题这前先看下网易(163)邮箱的服务器地址和端口号: 一.前期准备 使用网易邮箱,当然要注册个账号,这个就不用我多说了,自己去注册... 注册完之后,就要去开启 POP3/SMTP/IMAP服务. 在开启服务时,需要客户端授权密码(这里需要手机验证,MD拐弯抹角的要手机号码). 步骤一: 步骤二: 确定后会弹出下面这样的对话框,也会把这个授权密码发送你的短信里,记住这个授权密码一定要记住 服务

  • 浅谈Python用QQ邮箱发送邮件时授权码的问题

    浅谈Python用QQ邮箱发送邮件时授权码的问题

    QQ邮箱最新推出了一个授权码,需已验证的手机号向QQ邮箱服务器发送一条短信获得.该授权码用于第三方客户端登录,代替了第三方登录时使用的个人邮箱密码. 在测试过程中遇到两个问题: 1.提示需建立SSL安全连接.于是将smtplib.SMTP() 改成了smtplib.SMTP_SSL() 2.运行代码后,程序一直运行,但没有任何反应,等了五分钟左右,最后只好ctrl+c停止.查原因才知道,QQ邮箱的SMTP服务端口不是默认的25.改为465之后就好了. (使用标准的25端口连接SMTP服务器时,使

  • python使用selenium登录QQ邮箱（附带滑动解锁）

    python使用selenium登录QQ邮箱（附带滑动解锁）

    前言 最近因为工作需要 用selenium做了一个QQ邮箱的爬虫(登录时部分帐号要滑动解锁),先简单记录一下. 这个问题先可以分为两个部分:1.登录帐号和2.滑动解锁.python版本3.5.4 问题分析:登录+滑动解锁 其实登录账号的部分本来很简单,用selenium打开QQ邮箱官网:https://mail.qq.com 然后切换frame输入帐号 和密码点击登录即可,但是部分账号,或者可以说是异地登录的QQ账号需要滑动解锁验证码才能继续登录(下图) 看到这张图我们应该不难想到: 1.我们需

  • python3利用smtplib通过qq邮箱发送邮件方法示例

    前言 本文主要给大家介绍了关于python3 smtplib通过qq邮箱发送邮件的相关内容, smtplib模块是smtp简单邮件传输协议客户端的实现,为了通用性,有时候发送邮件的时候要带附件或图片,用email.mime来装载内容. 详细代码参考说明:Python3 SMTP发送邮件 0.了解qq邮箱的SMTP QQ邮箱 POP3 和 SMTP 服务器地址设置如下: 邮箱 POP3服务器(端口995) SMTP服务器(端口465或587) qq.com pop.qq.com smtp.qq.c

  • Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError

    Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError

    最新在学习Python的基础入门系列课程,今天学习到使用python 的内置库smtplib发送邮件内容. 使用Python发送邮件步骤简单: 创建SMTP连接 使用邮箱和密码登录SMTP服务器 创建邮件内容对象EmailMessage, 并使用set_content方法设置邮件内容 调用sendmail方法发送邮件 具体代码如下: import smtplib from email.message import EmailMessage # 定义SMTP邮件服务器地址 smtp_server

  • Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解

    Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解

    直接上代码实例:  #!/usr/bin/python3 import smtplib from email.mime.text import MIMEText from email.utils import formataddr my_sender='1638245306@qq.com' # 发件人邮箱账号 my_pass = 'xxxxxx' # 发件人邮箱密码(注意这个密码不是QQ邮箱的密码,是在QQ邮箱的SMTP中生成的授权码) my_user='1638245306@qq.com' #

  • python实现QQ邮箱发送邮件

    本文实例为大家分享了python实现QQ邮箱发送邮件的具体代码,供大家参考,具体内容如下 1.代码: #!/usr/bin/python # -*- coding: utf-8 -*- import smtplib from email.mime.text import MIMEText from email.header import Header mail_host="smtp.qq.com"#设置的邮件服务器host必须是发送邮箱的服务器,与接收邮箱无关. mail_user=&

随机推荐