素材牛VIP会员

jQuery邮箱地址自动补全提示功能

 所属分类:网页特效-表单特效,输入/选择框/联动

 浏览:2240次  评论:0次  更新时间:2016-11-07
牛币素材VIP可免积分下载
jQuery邮箱地址自动补全提示功能兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jquery autoMail输入框特效类似仿新浪微博登录框智能邮箱后缀名提示功能。是一个比较人性化的用户体验设计。jquery下载,jquery插件。

详细介绍

使用方法:

引入核心CSS样式

/* 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;}

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/autoMail.js"></script>

插件初始化、参数配置

$(document).ready(function(){
	$('#email').autoMail({
		emails:['qq.com','163.com','126.com','sina.com','sohu.com','yahoo.cn','gmail.com','hotmail.com','live.cn']
	});
});

HTML结构

<input id="email" type="text" name="email" />

相关素材 - 表单特效,输入/选择框/联动

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)