Navbar Search Plugin

导航栏搜索插件提供了在整个页眉中显示/隐藏搜索输入的功能。

使用方法

此插件可以作为 jQuery 插件或使用数据 API 激活。

数据API

通过在侧边栏内的 input-group 中添加以下 data-attribue 来激活插件。您可以使用以下 HTML 标记进行快速启动。data-widget="navbar-search"添加.navbar-search-block在页眉内部。您可以使用下面的HTML标记进行快速启动。

jQuery

jQuery API 提供了更多可定制的选项，允许开发者在渲染前预处理请求，并在渲染后进行后处理。

("[data-widget="navbar-search"]").SiteSearch(options)

HTML 标记

将此HTML标记放置在页眉内部。

<a data-widget="navbar-search" href="#" role="button">
  <i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
  <form class="form-inline">
    <div class="input-group input-group-sm">
      <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-navbar" type="submit">
          <i class="fas fa-search"></i>
        </button>
        <button class="btn btn-navbar" type="button" data-widget="navbar-search">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </form>
</div>

或者您可以将搜索按钮作为导航项放置在导航栏中，使用此标记：

<li class="nav-item">
  <a class="nav-link" data-widget="navbar-search" href="#" role="button">
    <i class="fas fa-search"></i>
  </a>
  <div class="navbar-search-block">
    <form class="form-inline">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
          <button class="btn btn-navbar" type="button" data-widget="navbar-search">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
    </form>
  </div>
</li>

选项

名称	类型	默认	描述
resetOnClose	布尔值	false	关闭/隐藏时重置输入。
target	字符串	`.navbar-search-block`	目标导航栏搜索块以处理多个导航栏搜索块。

方法

方法	描述
toggle	切换搜索块。
close	关闭搜索块。
open	打开搜索块。

示例：$('[data-widget="navbar-search"]').SiteSearch('toggle')