Navbar Search Plugin

导航栏搜索插件提供在整个标题栏显示/隐藏搜索输入框的功能。

用法

此插件可作为 jQuery 插件或使用 data API 激活。

Data API

通过向标题栏内的 .navbar-search-block 添加以下 data 属性 data-widget="navbar-search" 来激活该插件。你可以使用以下 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`	目标导航栏搜索模块，以处理多个导航栏搜索模块。

方法

方法	描述
切换	切换搜索模块。
关闭	关闭搜索模块。
打开	打开搜索模块。

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