Top > 開発ガイド > コンポーネント開発逆引きリファレンス > 閲覧/入力モードを切り替える(FormEditor)

閲覧/入力モードを切り替える(FormEditor)

対象バージョン

当ドキュメントはRubricks-0.6.x向けです。

概要

閲覧モードと入力モードの切替を行います。 入力モード時には入力領域がモーダル化され、入力領域以外は操作できないようになります。

イメージ

使い方

FormEditorクラス(JavaScript)を利用します。
閲覧モードから入力モードに切り替えるには、editModeメソッドを呼び出します。
入力モードから閲覧モードに戻るには、readModeメソッドを呼び出します。

サンプル

<div id="name_area">
  <!-- 閲覧モード用DIV -->
  <div>
    <button onclick="rubricks.common.FormEditor.editMode('name_area')">編集</button>
    <span>名前:</span><span>太郎</span>
  </div>

  <!-- 入力モード用DIV -->  
  <div>
    <form action="save_action">
      <span>名前：</span><input type="text" value="太郎">
      <input type="submit" value="保存" onclick="rubricks.common.FormEditor.modaless('name_area')">
      <input type="button" value="キャンセル" onclick="rubricks.common.FormEditor.readMode('name_area', true)">
    </form>
  </div>
</div>

<script type="text/javascript">
  rubricks.common.FormEditor.readMode('name_area');
</script>

※制約事項 モーダルの対象となる要素の親（祖先）要素にposition:static以外を指定しないで下さい。 モーダルが有効にならない場合があります。

API

editMode(element)

• 入力モードになり、入力領域がモーダル化されます。

引数	必須	初期値	型	説明
element	○	-	String	モード切替を行うDOMエレメント、もしくはそのIDを指定します。 該当エレメントは一つ目の子要素として閲覧領域を、二つ目の子要素として入力領域を持つ必要があります。

readMode(element, forms)

• 閲覧モードになり、editModeでモーダル化されたエレメントが非モーダル化されます。

引数	必須	初期値	型	説明
element	○	-	String	モード切替を行うDOMエレメント、もしくはそのIDを指定します。 該当エレメントは一つ目の子要素として閲覧領域を、二つ目の子要素として入力領域を持つ必要があります。
forms	-	-	Boolean/String/Array	入力領域の入力データをリセットするかどうかを指定します。 trueが指定されると、入力領域内の全てのフォームがリセットされます。 文字列もしくは文字列の配列が指定されると、指定された文字列をIDにもつフォーム要素がリセットされます。 引数が指定されない場合は、リセットされません。

modaless(element)

• モードの切替を行わずに、editModeでモーダル化されたエレメントが非モーダル化されます。

引数	必須	初期値	型	説明
element	○	-	String	非モーダル化を行うDOMエレメント、もしくはそのIDを指定します。