<!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=utf-8" />
<title>一款jquery智能提示邮箱列表特效_www.jqshare.com</title>
<meta name="description" content="jquery autoMail输入框特效类似百度输入框智能邮箱后缀名提示功能。是一个比较人性化的用户体验设计。jquery下载,jquery插件。" />
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/autoMail.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#email').autoMail({
emails:['qq.com','163.com','126.com','sina.com','sohu.com','yahoo.cn','gmail.com','hotmail.com','live.cn']
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.demo{width:300px;margin:40px auto;}
/* mailBox */
#mailBox{background:#fff;border:1px solid #ddd;padding:3px 5px 5px;position:absolute;z-index:9999;display:none;-webkit-box-shadow:0px 2px 7px rgba(0, 0, 0, 0.35);-moz-box-shadow:0px 2px 7px rgba(0, 0, 0, 0.35);}
#mailBox p{width:100%;margin:0;padding:0;height:20px;line-height:20px;clear:both;font-size:12px;color:#ccc;cursor:default;}
#mailBox ul{padding:0;margin:0;}
#mailBox li{font-size:12px;height:22px;line-height:22px;color:#939393;font-family:'Tahoma';list-style:none;cursor:pointer;overflow:hidden;}
#mailBox .cmail{color:#000;background:#e8f4fc;}
</style>
<div class="demo">
<form action="">
<input id="email" type="text" name="email" />
<input type="submit" value="提交" />
</form>
</div>
<div style="text-align:center;clear:both; font-size:12px; margin-top:200px; ">
<p><a href="http://www.jqshare.com" target="_blank">jQuery特效</a>分享网站整理</p>
<p>欢迎大家进群讨论前端技术知识!jQuery分享交流群:171845447<strong>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=7dfb5f39e8414eaef6d58f6828e65e648f962161766866f69d79709c1e11f971">
<img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="jQuery分享交流①群" title="jQuery分享交流①群">
</a></strong></p>
<br />
<p>适用浏览器:IE6,IE7,IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 特效来源:jsfoot</p>
</div>
</body>
</html>
(function($){
$.fn.autoMail = function(options){
var opts = $.extend({}, $.fn.autoMail.defaults, options);
return this.each(function(){
var $this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
var top = $this.offset().top + $this.height() + 6;
var left = $this.offset().left;
var $mailBox = $('<div id="mailBox" style="top:'+top+'px;left:'+left+'px;width:'+$this.width()+'px"></div>');
$('body').append($mailBox);
//设置高亮li
function setEmailLi(index){
$('#mailBox li').removeClass('cmail').eq(index).addClass('cmail');
}
//初始化邮箱列表
var emails = o.emails;
var init = function(input){
//取消浏览器自动提示
input.attr('autocomplete','off');
//添加提示邮箱列表
if(input.val()!=""){
var emailList = '<p>请选择邮箱类型</p><ul>';
for(var i = 0; i < emails.length; i++) {
emailList += '<li>'+input.val()+'@'+emails[i]+'</li>';
}
emailList += '</ul>';
$mailBox.html(emailList).show(0);
}else{
$mailBox.hide(0);
}
//添加鼠标事件
$('#mailBox li').hover(function(){
$('#mailBox li').removeClass('cmail');
$(this).addClass('cmail');
},function(){
$(this).removeClass('cmail');
}).click(function(){
input.val($(this).html());
$mailBox.hide(0);
});
}
//当前高亮下标
var eindex = -1;
//监听事件
$this.focus(function(){
if($this.val().indexOf('@') == -1){
init($this);
}else{
$mailBox.hide(0);
}
}).blur(function(){
setTimeout(function(){
$mailBox.hide(0);
},1000);//
}).keyup(function(event){
if($this.val().indexOf('@') == -1){
//上键
if(event.keyCode == 40){
eindex ++;
if(eindex >= $('#mailBox li').length){
eindex = 0;
}
setEmailLi(eindex);
//下键
}else if(event.keyCode == 38){
eindex --;
if(eindex < 0){
eindex = $('#mailBox li').length-1;
}
setEmailLi(eindex);
//回车键
}else if(event.keyCode == 13){
if(eindex >= 0){
$this.val($('#mailBox li').eq(eindex).html());
$mailBox.hide(0);
}
}else{
eindex = -1;
init($this);
}
}else{
$mailBox.hide(0);
}
//如果在表单中,防止回车提交
}).keydown(function(event){
if(event.keyCode == 13){
return false;
}
});
});
}
$.fn.autoMail.defaults = {
emails:[]
}
})(jQuery);