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

3292 ワード
jQuery Plugin JavaScript JavaScript テキストリンク

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

経緯

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

それをちょっと楽にできる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

【洛谷】P 1424小魚の航路(改良版)——暴力orサイクル?
2017年企業運維経典面接問題まとめ(2)