Navbar Search Plugin

導覽列搜尋外掛提供了在整個標頭中顯示/隱藏搜尋輸入框的功能。

使用方式

此外掛可以作為 jQuery 外掛或使用資料 API 來啟用。

資料 API

將以下 data 屬性 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>

或者您可以將搜尋按鈕作為 nav-item 放置在導覽列中，使用此標記

<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`	目標 navbar-search-block 以處理多個 navbar-search-block。

方法

方法	描述
toggle	切換搜尋區塊。
close	關閉搜尋區塊。
open	開啟搜尋區塊。

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