Edited at

inputの値によってHTML要素を出したり消したりするjQueryプラグイン作った

More than 3 years have passed since last update.


inputの値によってHTML要素を出したり消したりするjQueryプラグイン作った


経緯

割とよくあるのが、「このチェックボックスがONのときはこっちのUI表示して、OFFのときはあっちのUI表示して」みたいな仕様。

それをちょっと楽にできるtoggleFormというプラグインを勉強がてら作ってみた


ダウンロード

https://github.com/nmbakfm/toggleForm

ここからダウンロードできます。

ちなみに、bowerを使っていれば、

bower install toggleForm

でもOKです。


使い方

<p>"abc"を入力したらメッセージが表示されるよ</p>

<input id="input-field" type="text" /><br/>
<span id="text-abc">正しい入力です!さすが!</span>

<script type="text/javascript">
$(function(){
$("#input-field").toggleForm({
value: "abc",
targetSelector: "#text-abc"
})
});
</script>

この例だと、inputのフィールドに"abc"が入力されたときに"正しい入力です!さすが!"と褒め称えてくれます。


option

field

value
inputの値がこの値とどういう関係か(operation)で表示されるかどうかが決まります。

operator

=, !=, >, >=, <, <=, checked, unchecked が選択できます。. = がデフォルトです

targetSelector
出したり消したりする要素のセレクタを指定します。

onTargetShown

targetSelectorが表示されたとき、呼ばれるコールバックです。

onTargetHidden

targetSelectorが消えたとき、呼ばれるコールバックです。


まとめ

誰か、githubのREADMEの英語をなおしてください。。。orz