AdminLTELogo

ナビゲーションバー検索プラグイン

ナビゲーションバー検索プラグインは、ヘッダー全体で検索入力を表示/非表示にする機能を提供します。

使い方

このプラグインは、jQueryプラグインとして、またはデータAPIを使用して有効にすることができます。

データAPI

ヘッダー内の.navbar-search-blockに、次のデータ属性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>

または、次のマークアップを使用して検索ボタンをナビゲーションバー内の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-blocksを処理するために、navbar-search-blockをターゲットにします。
メソッド
メソッド 説明
toggle 検索ブロックを切り替えます。
close 検索ブロックを閉じます。
open 検索ブロックを開きます。

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