jQuery Mobile 検索ボックスを設置する

大規模サイトになると、サイト内検索フォームの設置は必須となります。全体を見通しにくいスマートフォンサイトでも、検索ボックスはいち早く求める情報にたどりつく手段となります。この記事では jQuery Mobile での検索ボックスの設置方法を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 使用するデータ属性
  2. 基本的な設置方法
  3. オプション指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

使用するデータ属性

データ属性 説明
data-clear-btn-text string クリアボタンのテキスト
data-mini true | false 小さいサイズにするかどうか
data-theme swatch letter (a-z) 適用するスウォッチ

基本的な設置方法

検索ボックスはinput要素に「type="search"」を指定します。"search" はHTML5で追加された仕様です。
あとはlabel要素をあわせて記述し、検索ボタンを設置します。

検索ボックスには左にルーペの形をしたアイコンがつきます。
またクリアボタンもデフォルトでつきます。

基本的な検索ボックス

オプション指定

オプションを指定し、検索ボックスらしくしてみます。

プレースホルダーを設置する

placeholder属性で表示するテキストを指定します。
同時にラベルとして表示していた "検索" の文字を、ui-hidden-accessibleクラスで非表示にします。

プレースホルダーを設置した検索ボックス

ボックスサイズを小さくする

検索がメインでないWebサイトでは検索ボックスはそれほど大きい必要はないので、
「data-mini="true"」を指定しミニサイズにします。

ミニサイズの検索ボックス

クリアボタンテキストを変更する

デフォルトでは "Clear text" になっていますので、data-clear-btn-text属性を使い日本語に変えてみます。

クリアボタンテキストを変更した検索ボックス

以下はオプションを指定したコードです。

検索ボックスは Googleカスタム検索や CMSの検索機能を使っている人が多いと思います。実際のところ検索ボックスは検索する機能が重要ですので、私はデザイン含めそちらを利用するほうが多いです。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ