本章节重点介绍weui SearchBar搜索栏的使用方法，其实weui的各种组件使用方法很简单，在这里我不在啰嗦了，直接上实例吧。
实例
1，新建searchbar.html页面，引入css样式，在这里我直接引用网络地址
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动手机端浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
2，引入jquery库依赖
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
3，在<body></body>之间添加如下代码
<div class="page searchbar js_show"> <div class="page__hd"> <h1 class="page__title">SearchBar</h1> <p class="page__desc">搜索栏----------V型知识库原创www.vxzsk.com</p> </div> <div class="page__bd"> <!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>--> <div class="weui-search-bar" id="searchBar"> <form class="weui-search-bar__form"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required=""> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> <label class="weui-search-bar__label" id="searchText"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div> <div class="weui-cells searchbar-result" id="searchResult"> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd weui-cell_primary"> <p>实时搜索文本</p> </div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd weui-cell_primary"> <p>实时搜索文本</p> </div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd weui-cell_primary"> <p>实时搜索文本</p> </div> </div> <div class="weui-cell weui-cell_access"> <div class="weui-cell__bd weui-cell_primary"> <p>实时搜索文本</p> </div> </div> </div> </div> <div class="page__ft j_bottom"> <a href="javascript:home()"><img src="./images/icon_footer_link.png"></a> </div> </div>
4，JavaScript代码
最好放在</body>后面
<script type="text/javascript" class="searchbar js_show">
$(function(){
var $searchBar = $('#searchBar'),
$searchResult = $('#searchResult'),
$searchText = $('#searchText'),
$searchInput = $('#searchInput'),
$searchClear = $('#searchClear'),
$searchCancel = $('#searchCancel');
function hideSearchResult(){
$searchResult.hide();
$searchInput.val('');
}
function cancelSearch(){
hideSearchResult();
$searchBar.removeClass('weui-search-bar_focusing');
$searchText.show();
}
$searchText.on('click', function(){
$searchBar.addClass('weui-search-bar_focusing');
$searchInput.focus();
});
$searchInput
.on('blur', function () {
if(!this.value.length) cancelSearch();
})
.on('input', function(){
if(this.value.length) {
$searchResult.show();
} else {
$searchResult.hide();
}
})
;
$searchClear.on('click', function(){
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on('click', function(){
cancelSearch();
$searchInput.blur();
});
});
</script>5，效果
6，完整html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<body>
<div class="page searchbar js_show">
<div class="page__hd">
<h1 class="page__title">SearchBar</h1>
<p class="page__desc">搜索栏----------V型知识库原创www.vxzsk.com</p>
</div>
<div class="page__bd">
<!--<a href="javascript:;" class="weui-btn weui-btn_primary">点击展现searchBar</a>-->
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-cells searchbar-result" id="searchResult">
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="weui-cell weui-cell_access">
<div class="weui-cell__bd weui-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
</div>
</div>
<div class="page__ft j_bottom">
<a href="javascript:home()"><img src="./images/icon_footer_link.png"></a>
</div>
</div>
</body>
<script type="text/javascript" class="searchbar js_show">
$(function(){
var $searchBar = $('#searchBar'),
$searchResult = $('#searchResult'),
$searchText = $('#searchText'),
$searchInput = $('#searchInput'),
$searchClear = $('#searchClear'),
$searchCancel = $('#searchCancel');
function hideSearchResult(){
$searchResult.hide();
$searchInput.val('');
}
function cancelSearch(){
hideSearchResult();
$searchBar.removeClass('weui-search-bar_focusing');
$searchText.show();
}
$searchText.on('click', function(){
$searchBar.addClass('weui-search-bar_focusing');
$searchInput.focus();
});
$searchInput
.on('blur', function () {
if(!this.value.length) cancelSearch();
})
.on('input', function(){
if(this.value.length) {
$searchResult.show();
} else {
$searchResult.hide();
}
})
;
$searchClear.on('click', function(){
hideSearchResult();
$searchInput.focus();
});
$searchCancel.on('click', function(){
cancelSearch();
$searchInput.blur();
});
});</script>
</html>
此文章本站原创，地址 https://www.vxzsk.com/1091.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：python IO编程
下一篇：python 文件读写
^