Wazly
Web Apps
headlines

Senbei

概要


Senbei(せんべい)はフォーム部品の状態保持を補助するjQueryプラグインです。また、フォーム部品それぞれの状態に応じた分岐処理を簡単に設定できるようにします。

チュートリアル


初期化

jQueryとSenbeiを読み込んで、最も簡単なアプリケーションを動作させてみましょう。

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
      <input type="checkbox" class="senbei" name="example" value="1" checked>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="jquery.senbei.js"></script>
      <script>
          var app = senbei({
              name: 'app',
              read: 'localStorage',
              write: 'localStorage',
          });
      </script>
  </body>
  </html>

このHTMLをサーバにアップロードし、ブラウザで表示させてチェックボックスからチェックを外し、ページを閉じ、再び開いてみましょう(リロードではリロード前の状態を保持してしまうので意味がありません)。チェックボックスが外れた状態になっていれば、Senbeiは正常に動作していることになります。

同様に、他のフォーム部品の状態を保持することも可能です。ただし、class="senbei"nameおよびvalueの3つの属性が必須となることを忘れないで下さい。

Senbeiの関連付け

Senbeiをきちんと動作させるには、正しい要素に属性を付ける必要があります。以下に例をいくつか挙げます。

<input type="text" class="senbei" name="example-input-general" value="">
<input type="radio" class="senbei" name="example-input-radio" value="1" checked>
<input type="radio" class="senbei" name="example-input-radio" value="2">
<input type="radio" class="senbei" name="example-input-radio" value="3">
<select class="senbei" name="example-select">
<options value="1">1</options>
<options value="2">2</options>
<options value="3" selected>3</options>
<options value="4">4</options>
</select>

分岐処理の登録

書きかけの項目です。

オプション

書きかけの項目です。

API


書きかけの項目です。