您的位置：首页 > 移动开发 > Android开发

android:layout_gravity 和 android:gravity 的区别

2014-04-17 15:29 351 查看

最近在弄一个网站，会员注册、登录时均需要邮箱，为是用户录入，仿sohu登录，用jquery做了一个邮箱输入智能提示，不足之处，请大家指正，不要只扔板砖啊...呵...
目前ie,firefox测试没有问题。估计其他几个常用浏览器也没有问题了。　昨天还有bug，现在已经改过了，欢迎大家提建议啊...
html代码：

<!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" />
<title>邮箱输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.email_div_menu {
position: relative;/* relative  absolute fixed*/
left:0;
top:0;
width:202px;
border:1px solid #ccc;
height:auto;
background: #FFF;
margin-top:-3px;
font-size:14px;
z-index:0;
overflow:hidden;
display:none;
}
.email_div_menu ul{
margin:0;
padding:0;
width:202px;
list-style:none;
position: relative;
z-index:3;
background-color: #FFFFFF;
}
.email_div_menu ul li{
display:block;
width:202px;
height:25px;
line-height:25px;
text-indent:15px;
border-bottom:1px solid #ccc;
color:#666;
}
.email_div{
width:200px;
height:25px;
position:absolute;
z-index:4;
}
.email_div input{width:200px;}
.email_div div{position:relative;top:0;left:0;margin-bottom:5px}
.menu_ul_li_current{background:#6699FF;font-size:16px;	font-amily: "宋体";font-weight: bold;}
.menu_ul_li_list{}
.cl {
clear:both;
position:absolute;
top:100px;
z-index:-5;
}
.inputtwo {width:200px;height:20px;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function(){
$("#email").inputSelect();
});

$.fn.inputSelect=function(){
this.focus(function(){
$(".email_div_menu").show();$(this).keyup();
});
this.blur(function(){
$(".email_div_menu").hide();
});
this.keyup(function(event){
var tv = $(this).val();
var tv0 = "";
var tv1 = "";
if(tv.indexOf("@") > -1){
tv0 = $.trim(tv);
tv0 = tv0.substring(tv0.indexOf("@"));
tv1 = $.trim(tv).substring(0,$.trim(tv).indexOf("@"));
}

//alert($(this).val());
$(".email_div ul li").each(function(i){
tl = $.trim($(this).html());
tl = tl.substring(tl.indexOf("@"));
$(this).removeClass("menu_ul_li_list");
if(tv.indexOf("@") < 0){
$(this).html(tv + tl);
$(this).addClass("menu_ul_li_list");
}else{
$(this).html(tv1 + tl);
if(tl.indexOf(tv0) == -1){
$(this).removeClass("menu_ul_li_current");
$(this).hide();
}else{
$(this).show();
$(this).addClass("menu_ul_li_list");
}
}
});

if(event.keyCode == 13){
var o = $(".email_div_menu").find(".menu_ul_li_current");
if(o.size() > 0){$(this).val($.trim(o.html()));	$(".email_div_menu").hide();}
}

});

this.keydown(function(event) {
//alert(event.keyCode);
var o = $(".email_div_menu").find(".menu_ul_li_current");
var olist =  $(".email_div_menu").find(".menu_ul_li_list");
//alert("o:" + o.size()+ "-------olist:" +olist.size());
switch (event.keyCode){
case 46:
case 8:  // back
$(this).focus();
break;
case 38: // up
//alert("o:" + o.size()+ "-------olist:" +olist.size());
if(o.size() > 0){
o.removeClass("menu_ul_li_current");
o.prev().addClass("menu_ul_li_current");
}else if(olist.size() > 0){
$(".menu_ul_li_list").eq($(".menu_ul_li_list").size() - 1).addClass("menu_ul_li_current");
}else{
$(".email_div ul li").eq($(".email_div ul li").size() - 1).addClass("menu_ul_li_current");
}
break;
case 40: // down
///alert("o:" + o.size()+ "-------olist:" +olist.size());
if(o.size() > 0){
o.removeClass("menu_ul_li_current");
o.next().addClass("menu_ul_li_current");
}else if(olist.size() > 0){
$(".menu_ul_li_list").eq(0).addClass("menu_ul_li_current");
}else{
$(".email_div ul li").eq(0).addClass("menu_ul_li_current");
}
break;
}
});

$(".email_div ul li").mousedown(function(){
$("#email").val($.trim($(this).html()));
$(".email_div_menu").hide();
});

$(".email_div ul li").mouseover(function(){
$(".email_div ul li").removeClass("menu_ul_li_current");
$(this).addClass("menu_ul_li_current");
});

$(".email_div ul li").mouseout(function(){
$(this).removeClass("menu_ul_li_current");
});
};

</script>
</head>
<body>
<div style="width:300px; height:100%; background-color:#FFFFCC; padding:10px; border:4px solid #6699FF;">
<div>昵称: <input name="password" type="text" id="passwrod" class="inputtwo">
</div>

<div><table>
<tr>
<td width="40" align="left">邮箱:</td>
<td width="10" valign="top">
<div class="email_div">
<input type="text" id="email" name="email" class="inputtwo">
<div class="email_div_menu">
<ul>
<li>@163.com</li>
<li>@126.com</li>
<li>@yaho.com</li>
<li>@qq.com</li>
<li>@693333.com</li>
<li>@69333.com</li>
<li>@693.com</li>
<li>@69.com</li>
<li>@6.com</li>
</ul>
</div>
</div>
</td>
</tr>
</table></div>
</div>

<div class="cl">        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航