Framework7学习笔记之 搜索栏（旧版）

一：搜索栏

应用场景：一般用于在含有列表的页面中进行内容检索。

二：定义搜索栏

搜索栏应该放到“.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> 

原文地址：https://www.cnblogs.com/ygj0930/p/8455485.html