一款jquery智能提示邮箱列表特效

来源：互联网发布：ubuntu查看分区编辑：程序博客网时间：2024/05/21 10:38

<!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);//设置高亮lifunction 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);

0 0