找回密码
当前位置：前端开发者 > jQuery > 正文

JQuery前端开发 搜索框的设计

2018-08-03 20:25:56 分类：jQuery 阅读(662) 评论(0)

前端开发概要设计|前端开发是不是可以代替设计|南京软件开发前端

功能说明：

  1. 点击每个选项卡时，搜索框内对应的提示文字改变
  2. 搜索框获得焦点时，默认提示文字消失；失去焦点时默认提示文字显示。
  3. 搜索框内内容为用户输入的内容时，获得焦点失去焦点不清空/显示默认提示文字。

这样的需求在网站开发中非常常见。废话不多说，直接上代码。

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 src=”http://libs.baidu.com/jquery/2.0.0/jquery.js”></script>
<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
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论