FreeLayoutCustomFieldプラグイン/FreeLayoutContentFieldプラグイン拡張パック

対応バージョン:

スピナー型のフィールド

更新日:2024.04.26

スピナー(spinner)は、数値の入力に適したフィールドです。入力欄の右に上下の矢印ボタンが表示され、それらをクリックすることで、数値を入力することができます。また、入力欄に数値を直接に入力することもできます。

スピナー型のフィールド

expension_ex_002.jpg

スピナー型のフィールドの定義

スピナー型のフィールドを作るには、カスタムフィールドの設定ページの「フィールドの定義」の欄に、以下のように定義を入力します。

fields:
  フィールド名:
    type: spinner
    label: ラベル
    class: クラス名
    label_class: ラベルのクラス名
    min: 最小値
    max: 最大値
    step: 増分
    default: デフォルト値
    required: 必須設定

他の型のフィールドにはない設定項目として、「min」「max」「step」があります。
「min」と「max」は、入力できる値の下限/上限を指定する際に使います。値の範囲を制限しない場合は、これらの行は不要です。また、min/maxのどちらか1つだけを指定することもできます。min/maxを指定した場合、その範囲外の数値を入力して記事等を保存しようとすると、範囲外であるというエラーメッセージが表示されます。
「step」は、上下の矢印ボタンをクリックしたときに、数をいくつずつ増やす/減らすかを指定するものです。この行を書かない場合は、矢印ボタンをクリックした際に、数が1つずつ増減します。
なおレイアウト用HTMLやレイアウト用CSSなどの書き方は、他の型のフィールドと同じです。

スピナー型フィールドの例

以下の図のようなフィールドを追加したいとします。

スピナー型のフィールドの例

expension_ex_003.jpg

また、フィールドの内容は以下のようにしたいとします。

スピナー型のフィールドの内容

設定項目設定値
名前sp
ラベル数値
入力値の下限0
入力値の上限10

この場合、フィールドの定義の欄には、以下のように入力します。

スピナー型フィールドの定義の例

fields:
  sp:
    type: spinner
    label: 数値
    min: 0
    max: 10

また、レイアウト用HTMLの欄には、以下のように入力します。

スピナー型フィールドのレイアウト用HTMLの例

<p>{{sp_label}} {{sp}}</p>

スピナー型フィールドの値の出力

テンプレート内でスピナー型フィールドの値を出力する場合、他のフィールドと同じく、MTFLCFValueタグを使います。
例えば、カスタムフィールドのテンプレートタグ名を、「MTEntryFLCF」にしたとします。また、そのカスタムフィールドに、「sp」という名前のスピナー型フィールドを入れたとします。この場合、このスピナー型のフィールドの値を出力するには、以下のようにテンプレートを組みます。

スピナー型のフィールドの値を出力するテンプレート

<mt:EntryFLCFBlock>
  ・・・
  <$mt:FLCFValue field="sp"$>
  ・・・
</mt:EntryFLCFBlock>
前へ
プラグインTOP
次へ
test