这些天我没什么事，一直都在聊天！趁着有空，我就整理以前做过的东西，顺便复习一下知识。无意中发现了这段代码，用jquery实现的仿QQ邮箱添加收件人形式的一个例子。只是一个例子，如果大家有需要，可以根据自己的需求修改一下。写的比较简陋，望大家见谅！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title></title>
<style>
*{font-size:12px}
.out1,in1{border:1px inset #ccc;height:20px;overflow-y:hidden;line-height:20px;width:500px}
#input1{border:0px;clear:none}
img {border-width: 0px 0px 0px 0px} <!--就是这行 代码起作用-->
</style>
<script language="javascript" defer>
$(document).ready(function() {
$("#code").val('');
});
function selected(name,code) {
var ids = $("#code").val();
if(ids.indexOf(code) == -1){ //没有找到匹配的id
$("#in1").append("<div style='width:auto;float:left;' id="+code+">"+name+" <a href=# onclick=javascript:deleteCode("+code+");><img src='cal.png'/></a>;</div>");
$("#"+code).hover(function(){
$(this).css("background","yellow");},function(){
$(this).css("background","white");
});
//添加隐藏域的值
ids += code + ",";
$("#code").val(ids);
}
}
function deleteCode(code){
alert(code);
var ids = $("#code").val();
$("#code").val(ids.replace(code+",",""));
$("#"+code).remove();
}
</script>
</head>
<body>
<table>
<tr>
<td width="10%" aglin="right">
收件人：
</td>
<td>
<div class="out1" id="out1" exp="">
<div class="in1" id="in1" exp="" onmousemove="">
</div>
</div>
<input type="text" id="code" name="code"/>
</td>
<td>
<div class="list" exp="">
<ul>
<li><a href="#" onclick="javascript:selected('张山','1001');">张山</a></li>
<li><a href="#" onclick="javascript:selected('李斯','1002');">李斯</a></li>
<li><a href="#" onclick="javascript:selected('王武','1003');">王武</a></li>
<li><a href="#" onclick="javascript:selected('赵溜','1004');">赵溜</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
ps：我把整个需要用到的东西都上传了！需要看的童鞋，自己下载吧！
分享到：
相关推荐
以上就是使用jQuery实现仿QQ邮箱收件人功能的基本步骤。实际开发中可能需要根据项目需求进行调整，比如添加错误处理、优化搜索性能、支持多选等功能。记得在部署时确保符合安全规范，避免用户输入可能导致的XSS攻击...
【标题】"jquery仿qq邮箱收件人"指的是使用jQuery库来实现类似QQ邮箱中收件人输入框的功能。在QQ邮箱中，当你在撰写邮件时，收件人输入框会提供自动补全、多选收件人以及保存常用联系人的功能。这个项目可能旨在帮助...
在本文中，我们将深入探讨如何实现一个仿QQ邮箱的收件人添加效果，这涉及到HTML、CSS以及JavaScript的综合运用。QQ邮箱的收件人、抄送和密送功能以其直观性和高效性著称，因此，模拟这一效果是提高用户交互体验的一...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它...通过以上步骤，我们可以实现一个基本的jQuery邮箱收件人效果。这只是一个基础实现，根据实际需求，还可以进行更多的定制化和优化，以提供更好的用户体验。
总的来说，实现“Jquery仿收件人效果autocomplete”涉及前端UI设计、jQuery事件绑定、AJAX数据交互等多个方面，通过合理的代码组织和样式配置，可以创建出高效且用户友好的输入体验。在实际开发中，还需要考虑性能...
本主题聚焦于使用jQuery实现一个仿163邮箱的收件人输入框效果，同时集成邮箱验证功能和autocomplete的模糊匹配查询，这些功能在构建用户友好的Web应用时非常实用。 首先，让我们深入理解jQuery仿163收件人效果。163...
总的来说，"仿QQ邮件收件人文本框"的实现涉及到了前端开发的多个方面，包括JavaScript交互、CSS样式设计、HTML结构构建、图片资源运用以及可能的Ajax通信。开发者需要对这些技术有深入理解，才能创建出功能完备且...
在本文中，我们将探讨如何使用JavaScript来实现一个类似于QQ邮箱的收件人选择与搜索功能。这个功能对于构建一个高效的邮件系统至关重要，因为它允许用户方便地选取和搜索联系人，提高用户体验。 首先，我们需要了解...
本篇文章主要介绍了如何利用jQuery以及其相关组件实现类似QQ邮箱中的收件人选取功能。接下来，我们将对文章中提到的关键技术知识点进行详细说明。 ### jQuery及Dialog组件 jQuery是一个快速、简洁的JavaScript库，...
类似QQ邮箱收件人文本框搜索添加多文本简单功能，实现了简单的删除。
本篇文档主要介绍了使用jQuery技术实现电子邮箱地址自动补全功能的相关代码实现方法，内容涵盖了jQuery的鼠标事件处理以及字符操作技巧，对于希望在网页中实现邮箱地址自动补全功能的开发者来说，具有一定的参考价值...
在本示例中，我们看到一个使用jQuery实现的电子邮件收件人效果，允许用户通过按键盘上的`del`键删除已选择的收件人。这是一个常见的功能，常见于许多电子邮件客户端，如Gmail或Outlook。以下是代码的核心知识点： 1...
在本文中，我们将深入探讨如何使用jQuery来实现一个收件箱邮件内容查看的功能，这个功能在现代Web应用程序中非常常见，特别是在React框架下构建的项目中。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...
本项目“JQ 完美仿qq邮件功能”旨在利用jQuery技术来模仿QQ邮箱中的收件人添加功能，为用户提供便捷的输入体验。 首先，让我们深入了解一下这个功能的核心知识点： 1. **jQuery选择器**：jQuery提供了丰富的选择器...
在这个示例中，首先创建了一个`MailMessage`对象，并设置了发件人、收件人、邮件主题、邮件内容等基本信息。接着，创建了一个`SmtpClient`对象，配置了SMTP服务器的登录凭证和主机地址。最后，尝试发送邮件，并捕获...
它适用于网页应用，特别是在需要用户输入多个分类或关键词的场景中，如博客标签、邮件收件人等。这个插件基于流行的jQuery框架，提供了一种优雅的方式来实现自定义标签输入，同时支持多种功能和定制选项。 ### 核心...
// 添加收件人 $mail->Subject = 'jQuery Ajax提交表单'; $mail->Body = '这是一封由jQuery Ajax提交表单触发的邮件。'; if(!$mail->send()) { echo 'Message could not be sent.'; echo 'Mailer Error: ' . $...
在前端，我们可以使用jQuery的`.val()`方法获取用户输入的数据，如快递单号、收件人信息等。同时，`.serialize()`函数能将表单数据序列化为URL编码格式，便于发送Ajax请求。 Ajax是jQuery的重要特性，它允许在不...
3. 收件箱：系统应能接收并展示来自其他用户的邮件，支持按时间、发件人等条件排序。 4. 发件箱：用户可以撰写、发送邮件，并查看已发送的邮件记录。 5. 草稿箱：保存正在编写但未完成的邮件，方便用户后续继续编辑...
3. 发送邮件：用户填写收件人、主题和邮件内容，点击发送后，系统通过SMTP协议将邮件发送至指定地址。 4. 收取邮件：系统定期或按需通过POP3/IMAP协议从邮件服务器获取新邮件，更新用户的收件箱。 5. 搜索功能：...