2014年08月15日

jQuery SimpleChoices Plugin について

jQuery SimpleChoices Plugin

このプラグインはセレクトボックス・チェックボックス・ラジオボタンの選択肢の生成を支援します。
(読み取り専用をサポートします。)

このプラグインは教育目的で作成しました。
また、すべての要素にidが付与されているため、容易に拡張することができます。

2014.12.11 追記
スクリーンショット :
simple_choices.jpg

2014.11.10 追記
現在、「The jQuery Plugin Registry」が読み取り専用モードになっているため、本プラグインのバージョンアップ(1.0.1→1.0.2)はまだレジストリに反映されていません。
("The jQuery Plugin Registry is in read-only mode.
New plugin releases will not be processed.")
経過を観察します。

リポジトリ(GitHub) :
https://github.com/criticalbreak5/simple_choices
https://github.com/criticalbreak5/simple_choices/archive/master.zip

2014.12.10 追記
API仕様 :
[ $({対象ブロック}).simple_choices() ]
セレクトボックス・チェックボックス・ラジオボタンと選択肢を生成する。
引数必須説明
第1Objectオプション情報。
オプション必須説明
"control-type"String制御(element)タイプ。
"select" : セレクトボックス、
"checkbox" : チェックボックス、
"radio" : ラジオボタン。

・セレクトボックスの生成規則
 <select id='{control-id}' name='{control-id}'>
 <option id='{control-id}-{choices.key}' value='{choices.key}'>{choices.value}</option>
 </select>

・チェックボックスの生成規則
 <input type='checkbox' id='{control-id}-{choices.key}' name='{control-id}' value='{choices.key}'></input>
 <label id='{control-id}-{choices.key}-label' for='{control-id}-{choices.key}'>{choices.value}</label>
 {option-html}

・ラジオボタンの生成規則
 <input type='radio' id='{control-id}-{choices.key}' name='{control-id}' value='{choices.key}'></input>
 <label id='{control-id}-{choices.key}-label' for='{control-id}-{choices.key}'>{choices.value}</label>
 {option-html}
"control-id"String-制御(element)ID。
なお、本オプションを指定しなかった場合は、"control_id" が適用される。
"choices"Object<String, String>-選択肢(群)の選択値とラベル。
なお、本オプションを指定しなかった場合は、{} が適用される(=選択肢は表示されない)。
"value"String[]-初期選択値。
なお、本オプションを指定しなかった場合は、[] が適用される(=初期選択されない)。
"read-only"String-読み取り専用有無。
読み取り専用有効の場合は、各選択肢に disabled='disabled' が付与される。
"true" : 読み取り専用有効、
その他 : 読み取り専用無効。
なお、本オプションを指定しなかった場合は、"false" が適用される。
"option-html"String-選択肢間のhtmlデータ。※制御タイプがチェックボックス、ラジオボタンの場合のみ、指定可能。
なお、本オプションを指定しなかった場合は、"" が適用される(=選択肢間は詰められる)。


戻り値必須説明
----


使用法 :

posted by red at 00:59| Comment(0) | TrackBack(0) | JavaScript(jQuery Plugin) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック