一：搜索栏
应用场景：一般用于在含有列表的页面中进行内容检索。
二：定义搜索栏
搜索栏应该放到“.page”内，“.page-content”前；
在page-content中，需要定义 检索失败 的提示文本，以及陈列内容的列表。
<div class="page"> <!-- 1:定义搜索栏 --> <form class="searchbar"> <div class="searchbar-input"> <input type="search" placeholder="提示文本"> <a href="#" class="searchbar-clear"></a> </div> <a href="#" class="searchbar-cancel">取消</a> </form> <!--2:搜索时的遮盖物：输入搜索关键字时，对非搜索栏部分内容进行暗色调遮盖处理--> <div class="searchbar-overlay"></div> <!-- 3:页面内容 --> <div class="page-content"> <!-- 4：检索失败 --> <div class="content-block searchbar-not-found"> 检索不到内容的提示文本... </div> <!-- 5：列表视图 --> <div class="list-block list-block-search searchbar-found"> <ul> 列表内容。。。 </ul> </div> </div> </div>
三：初始化搜索栏
我们需要对搜索栏进行一些初始化处理，最常见的是在html文件中定义搜索栏时，通过 data-xx 属性来进行初始化设定：
<div class="page"> <!-- 1:创建并初始化搜索栏 --> <form class="searchbar searchbar-init" data-search-list="被检索的列表" data-search-in="检索列表元素的哪个部分 .item-xx" data-found="检索结果在哪里呈现" data-not-found="检索失败在哪里提示"> <div class="searchbar-input"> <input type="search" placeholder="Search"> <a href="#" class="searchbar-clear"></a> </div> <a href="#" class="searchbar-cancel">Cancel</a> </form> <div class="searchbar-overlay"></div> <div class="page-content"> <div class="content-block searchbar-not-found"> 检索失败的内容 </div> <div class="list-block list-block-search searchbar-found"> <ul> 被检索的列表、检索结果的呈现处... 列表元素中通过 class="item-xx"来为每一部分作标记。 </ul> </div> </div> </div>
