コンポーネントリファレンス¶

コンポーネントは画面を構成する部品の単位です。

コンポーネントには、通常の使用方法である基本コンポーネントと、
条件を満たした場合に自動的に起動される特殊コンポーネントの2種類があります。

本章ではコンポーネントを利用する方法について記載します。
コンポーネントが出力する DOM 構造については「DOM 構造リファレンス」を参照してください。

基本コンポーネント¶

基本コンポーネントを表示する場合には、表示エリア内で、

<div data-[モード]="コンポーネント識別子[-グループ名(バリエーション名)]"></div>

のように、属性名とコンポーネント識別子を持った空要素を作成します。
※ モーダルコンポーネントだけは性質上空要素にはなりません。

コンポーネント識別子の一部に表示バリエーション名やグループ名が含まれるコンポーネントもあります。

サーチ設定タグは popfindConf["data-[モード]"] という定義の data-[モード] が属性名となります。

コンポーネントは、それぞれ決まった DOM を出力します。

たとえば、表示エリアで searchResults コンポーネントと pagenator コンポーネントを使用したい場合、次のように指定してください。

  <div data-[モード]="searchresults"></div>
  <div data-[モード]="pagenator"></div>

コンポーネント名	識別子	備考
属性絞り込みコンポーネント	attributes-[グループ名]
表示件数変更コンポーネント	countselector(-[バリエーション名])
モーダルコンポーネント	modal
ページ番号変更コンポーネント	pagenator
検索ステータスコンポーネント	searchstatus
詳細検索ステータスコンポーネント	searchstatusfull
並び順変更コンポーネント	sortselector
検索結果コンポーネント	searchresults
チェック履歴コンポーネント	checkeditems
グループ表示変更コンポーネント	groupingselector	グルーピング用データが必須
おすすめリンクコンポーネント	recommendlinks-[グループ名]
関連キーワードコンポーネント	relatedkeywords-[グループ名]
キーワードランキングコンポーネント	keywordranking(-[グループ名])
レコメンドコンポーネント	popwiz(-[グループ名])
汎用数値絞り込みコンポーネント	numericNinput	N は 1 〜 5
複数汎用数値絞り込みコンポーネント	multinumericNinput	N は 1 〜 5
最終更新日絞り込みコンポーネント	lastmodifiedselector(-[グループ名])	CP のみ使用可
ハッシュタグコンポーネント	hashtag-[グループ名]

特殊コンポーネントは基本コンポーネントとは異なり、特定の起動条件を満たした場合に自動的に起動されます。

特殊コンポーネントを以下に示します。

起動条件
設定パラメータで指定した inputId が画面上に存在した場合

説明
設定パラメータで指定した inputId に従い、検索ボックスに検索キーワードを入れます。
inputId に指定された input 要素が存在しない場合は何もしません。
inputId について詳しくは、「設定パラメータリファレンス」を参照してください。