JQuery前端开发 搜索框的设计
摘要：前端开发概要设计|前端开发是不是可以代替设计|南京软件开发前端 功能说明： 点击每个选项卡时，搜索框内对应的提示文字改变 搜索框获得焦点时，默认提示文字消失；失去焦点时默认提示文字显示。 搜索框内内容为……
前端开发概要设计|前端开发是不是可以代替设计|南京软件开发前端
功能说明：
- 点击每个选项卡时，搜索框内对应的提示文字改变
- 搜索框获得焦点时，默认提示文字消失；失去焦点时默认提示文字显示。
- 搜索框内内容为用户输入的内容时，获得焦点失去焦点不清空/显示默认提示文字。
这样的需求在网站开发中非常常见。废话不多说，直接上代码。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>可切换的Tab搜索框</title>
</head>
<style>
.search {
margin: 0 auto 10px;
position: relative;
}
.search .bar {
width: 558px;
height: 64px;
border: 1px solid #c40d0e;
position: absolute;
top: 16px;
left: -1px;
background: #e21c01;
border-radius: 5px;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15);
}
.search .menu {
position: absolute;
top: -27px;
}
.search .menu li {
float: left;
width: 78px;
height: 25px;
margin-right: 1px;
display: inline-block;
border: 1px solid #f8d0bf;
border-bottom: none;
text-align: center;
line-height: 25px;
font-size: 14px;
cursor: pointer;
border-radius: 5px 5px 0 0;
box-shadow: 1px 0 2px rgba(176, 176, 176, 0.3);
background-color: #fff;
}
.search .menu .active {
border: 1px solid #e21c01;
position: relative;
top: -1px;
height: 27px;
background: #e21c01;
color: #fff;
font-weight: bold;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
}
.search .form {
position: absolute;
left: 39px;
top: 36px;
z-index: 3;
}
.search .form .text {
width: 380px;
height: 22px;
line-height: 22px;
padding: 0 12px;
border: none;
background: #fff1ef;
border-radius: 3px;
float: left;
margin-right: 10px;
font-size: 12px;
font-family: ‘微软雅黑’;
color: #ea7a7a;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.25);
}
.search .form .btn {
width: 63px;
height: 24px;
border: none;
cursor: pointer;
border-radius: 5px;
}
</style>
<body>
<div id=”J_search” class=”search”>
<div class=”bar”>
<ul class=”menu” id=”menu”>
<li class=”active”>选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
<li>选项卡4</li>
<li>选项卡5</li>
</ul>
</div>
<div class=”form”>
<form action=”#”>
<input class=”text” type=”text” value=”例如：……” />
<input class=”btn” type=”submit” value=”搜索” />
</form>
</div>
</div>
</body>
<script>
$(function () {
// 切换搜索框
(function () {
var aLi = $(‘#menu li’);
var oText = $(‘#J_search’).find(‘.form .text’);
var arrText = [
‘输入框文字1’,
‘输入框文字2’,
‘输入框文字3’,
‘输入框文字4’,
‘输入框文字5’
];
var iNow = 0;
oText.val(arrText[iNow]);
aLi.each(function (index) {
$(this).click(function () {
aLi.attr(‘class’, ”);
$(this).attr(‘class’, ‘active’);
iNow = index;
oText.val(arrText[iNow]);
});
});
oText.focus(function () {
if ($(this).val() == arrText[iNow]) {
$(this).val(”);
}
});
oText.blur(function () {
if ($(this).val() === ”) {
oText.val(arrText[iNow]);
}
});
})();
});
</script>
</html>
东宝软件 前端开发|行业调研 软件前端开发|前端开发 需要兼容
» 本文来自：前端开发者 » 《JQuery前端开发 搜索框的设计》
» 本文链接地址：https://www.rokub.com/4988.html
» 您也可以订阅本站：https://www.rokub.com
近期评论