Top > 開発ガイド > コンポーネント開発Tips集 > 閲覧/入力モード切替

閲覧/入力モード切替

対象バージョン

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

概要

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

利用方法

FormEditorクラス(JavaScript)を利用します。

FormEditorクラス API

editMode(element)

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

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

readMode(element, forms)

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

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

modaless(element)

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

引数	説明
element	非モーダル化を行うDOMエレメント、もしくはそのIDを指定します。

利用例

<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/prototype.js"></script>
<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/scriptaculous.js"></script>
<script type="text/javascript" src="/path/to/javascripts/spinelz_lib/spinelz_util.js"></script>
<script type="text/javascript" src="/path/to/javascripts/rubricks_common.js"></script>
<link rel="stylesheet" href="/path/to/stylesheets/spinelz/modal.css" type="text/css">

<div id="name_area">
  <div>
    <button onclick="FormEditor.editMode('name_area')">編集</button>
    <span>名前:</span><span>太郎</span>
  </div>
  <div>
    <form action="save_action">
      <span>名前：</span><input type="text" value="太郎">
      <input type="submit" value="保存" onclick="FormEditor.modaless('name_area')">
      <input type="button" value="キャンセル" onclick="FormEditor.readMode('name_area', true)">
    </form>
  </div>
</div>

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

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