- 浏览: 308166 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
Jett:
...
Android的Activity一打开就出现讨嫌的软键盘,怎样将其关闭? -
nuannuan6818:
这也算是一种方法,不过感觉不可取,这样把图片的存储位置固定死了 ...
JSP 页面中用绝对路径显示图片 -
hhayyok:
xiexie
Eclipse jar打包详解 -
lixiplus:
写的好, 给力
JSP 页面中用绝对路径显示图片 -
叶落秋陌:
原来是把lib放在jar外面,帮了大忙~
Eclipse jar打包详解
<!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>输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str){
var input=window.document.getElementById(obj);
input.value=str;
}
</script>
</head>
<body>
<div class="form">
<div> Location:<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
</div>
</div>
<div> Sex:<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div> education:<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框提示列表效果</title>
<style type="text/css">
<!--
body{background:#fff}
.Menu {
position:relative;
width:204px;
height:127px;
z-index:1;
background: #FFF;
border:1px solid #000;
margin-top:-100px;
display:none;
}
.Menu2 {
position: absolute;
left:0;
top:0;
width:100%;
height:auto;
overflow:hidden;
z-index:1;
}
.Menu2 ul{margin:0;padding:0}
.Menu2 ul li{width:100%;height:25px;line-height:25px;text-indent:15px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){
this.style.background="#F2F5EF";
},
this.onmouseout=function(){
this.style.background="";
}
)
}
input{width:200px}
.form{width:200px;height:auto;}
.form div{position:relative;top:0;left:0;margin-bottom:5px}
#List1,#List2,#List3{left:0px;top:93px;}
-->
</style>
<script type="text/javascript">
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function getValue(obj,str){
var input=window.document.getElementById(obj);
input.value=str;
}
</script>
</head>
<body>
<div class="form">
<div> Location:<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
<!--列表1-->
<div class="Menu" id="List1">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
<li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
</ul>
</div>
</div>
<div> Sex:<input type="text" id="txt2" name="txt2" onfocus="showAndHide('List2','show');" onblur="showAndHide('List2','hide');"></div>
<!--列表2-->
<div class="Menu" id="List2">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt2','男Male');showAndHide('List2','hide');">男Male</li>
<li onmousedown="getValue('txt2','女Female');showAndHide('List2','hide');">女Female</li>
</ul>
</div>
</div>
<div> education:<input type="text" id="txt3" name="txt3" onfocus="showAndHide('List3','show');" onblur="showAndHide('List3','hide');"></div>
<!--列表3-->
<div class="Menu" id="List3">
<div class="Menu2">
<ul>
<li onmousedown="getValue('txt3',this.innerText);showAndHide('List3','hide');">大专</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
<li onmousedown="getValue('txt3','硕士');showAndHide('List3','hide');">硕士</li>
<li onmousedown="getValue('txt3','本科');showAndHide('List3','hide');">本科</li>
</ul>
</div>
</div>
</div>
</body>
</html>
发表评论
-
JS加减乘除运算
2013-09-03 12:13 1425//加法 Number.prototype.ad ... -
JS 利用正则表达式替换字符串
2013-08-15 15:46 9603JS 利用正则表达式替换字符串 var data = & ... -
JS验证
2013-07-19 11:43 10711. URL验证 function checkU ... -
JS常用方法
2013-06-14 11:48 925//1. 去空格 function doTrimStr( ... -
在JS弹出的遮罩层中,部分区域高亮显示并且可以编辑
2012-11-13 10:37 31211. 初始页面效果如下所示: 2. 点击“点击一下试试!”链 ... -
IE9浏览器下 使用JS获取图片尺寸大小 的方法
2012-11-01 15:17 4550情况一:以下代码在IE7、IE8下获取图片的尺寸大小是没有问题 ... -
JS遍历某个目录下的所有文件名
2011-02-23 18:46 4696<!DOCTYPE HTML PUBLIC " ... -
JAVASCRIPT----style 中visibility和display之间的区别
2009-08-13 16:06 1508大多数人很容易将CSS属 ... -
javascript自定义右键菜单
2009-02-06 18:56 2108<title>右键菜单v1.0</title ... -
javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)
2009-02-06 18:51 5071<html> <body> <s ... -
javascript在线将汉字翻译为汉语拼音,可选择翻译中汉字对照
2009-02-06 18:16 3362<html> <head> <t ... -
点击链接弹出"图片另存为"而不是直接打开
2009-02-06 18:02 1720<iframe height="0" ... -
javascript实现页内搜索
2009-02-06 18:00 1251<!DOCTYPE html PUBLIC " ... -
jst实现MD5加密
2009-02-06 17:55 1147<HTML> <HEAD> <M ... -
javascript图片型按钮
2009-02-06 17:46 1266<style>.button { font: 12 ... -
javascript页面loading效果
2009-02-06 17:44 1660<html> <head> <t ... -
上传附件界面设计
2009-02-06 17:37 1325<head> <meta http-equ ... -
js停止输出
2009-02-06 17:13 965<SCRIPT LANGUAGE="Jav ... -
网站后台左右收缩型页面脚本
2009-02-06 17:06 1334<html> <meta http-equi ... -
JavaScript仿LightBox内容显示效果
2009-02-06 16:58 1288<!DOCTYPE html PUBLIC " ...
相关推荐
输入框提示效果输入框提示效果输入框提示效果输入框提示效果
看起来现在经常用到这样的效果来提高用户体验,所以就没事写了一个输入框提示列表的效果 使用宽屏的朋友麻烦帮忙测试下,列表的位置有没有错位。
jquery表单input输入框动画提示效果代码
Wpf输入框水印提示效果 就是输入的提示信息 输入的时候 隐藏提示信息
简单的css3输入框提示文字效果
jQuery表单获取和失去焦点输入框提示效果
jQuery输入框自动提示车牌号码验证效果, 输入车牌号,下方提示,例如输入w ,则出现皖 ,这样的一个效果,在商城网站或者企业网站都会用到搜索的功能,与此功能类似,可以参考,php中文网推荐下载!
简单语句实现表单获取和失去焦点输入框提示效果
js 特效 输入框提示效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net
仿google输入框下载提示效果的ajax源码
在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会...
实现用户名、密码等输入框提示的特殊效果,很有参考价值。
google输入提示效果,适合初学者学习.
JAVA 输入框然后提示
我们经常在注册页面邮箱填写的input 输入框内,输入邮箱的时候底部出现一些163,QQ,gmail等等的一些提示,这种效果是简单的JS实现的,今天给大家推荐的就是
类似这种注册页面,国外已经很普遍了,只是国内的还比较少。火狐浏览器下,提示框为圆形渐隐渐现效果,IE浏览器下则差一点儿,为长方形效果
许多网站在input输入框内都有默认提示字体,html5新增了这一项功能,placeholder,但是不兼容ie浏览器,这个组件可以让你实现兼容ie浏览器
一个输入框提示插件! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
html5实现输入框字数限制提示抖动效果.zip