script.aculo.us-インプレース編集

インプレース編集は、Web 2.0.styleアプリケーションの特徴の1つです。

インプレース編集とは、<p>、<h1>、または<div>などの編集不可能なコンテンツを取得し、ユーザーがクリックするだけでコンテンツを編集できるようにすることです。

これにより、静的要素が編集可能なゾーン（単一行または複数行）に変わり、送信ボタンとキャンセルボタン（またはオプションに応じてリンク）がポップアップして、ユーザーが変更をコミットまたはロールバックできます。

次に、Ajaxを介してサーバー側の編集を同期し、要素を再び編集不可にします。

script.aculo.usのインプレース編集機能を使用するには、prototypes.jsモジュールとともにcontrols.jsおよびeffects.jsモジュールをロードする必要があります。したがって、script.aculo.usの最小負荷は次のようになります-

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

インプレーステキストエディターの作成

全体の構文は次のとおりです-

new Ajax.InPlaceEditor(element, url [ , options ] )

Ajax.InPlaceEditorのコンストラクタは、3つのパラメータを受け入れます-

ターゲット要素は、要素自体への参照またはターゲット要素のIDのいずれかです。
Ajax.InPlaceEditorの2番目のパラメーターは、編集された値が完了したときに接続されるサーバー側スクリプトのURLを指定します。 *通常のオプションのハッシュ。

オプション

Ajax.InPlaceEditorオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Sr.No	Option & Description
1	okButton* 「OK」ボタンを表示するかどうかを示すブール値。デフォルトはtrueです。
2	okText [OK]ボタンに配置するテキスト。デフォルトは「ok」です。
3	cancelLink キャンセルリンクを表示するかどうかを示すブール値。デフォルトはtrueです。
4	cancelText キャンセルリンクのテキスト。デフォルトは「キャンセル」です。
5	savingText 保存操作（[ok]ボタンをクリックして開始された要求）の処理中に、コントロールの値として表示されるテキスト文字列。デフォルトは「保存」です。
6	clickToEditText マウスオーバー時にコントロールの「ツールチップ」として表示されるテキスト文字列。
7	rows 編集コントロールがアクティブなときに表示される行の数。 1より大きい数値を指定すると、テキストフィールド要素ではなくテキストエリア要素が使用されます。デフォルトは1です。
8	cols アクティブモードのときの列数。省略した場合、列の制限はありません。
9	size colsと同じですが、行が1の場合にのみ適用されます。
10	highlightcolor マウスオーバー時にテキスト要素の背景に適用する色。デフォルトは淡黄色です。
11	highlightendcolor ハイライトの色が効果としてフェードする色。注意-一部のブラウザではサポートが不完全なようです。
12	loadingText ロード操作中にコントロール内に表示されるテキスト。デフォルトは「ロード中」です。
13	loadTextURL エディターがアクティブモードになったときにエディターの初期値を読み込むために接続するサーバー側リソースのURLを指定します。デフォルトでは、バックエンドのロード操作は行われず、初期値はターゲット要素のテキストです。
14	externalControl エディターをアクティブモードにするトリガーとなる「外部コントロール」として機能する要素。これは、コントロールの編集をトリガーする別のボタンまたは他の要素が必要な場合に便利です。
15	ajaxOptions 基礎となるPrototype Ajaxオブジェクトに渡され、オプションハッシュとして使用するハッシュオブジェクト。

コールバックオプション

さらに、optionsパラメーターで次のコールバック関数のいずれかを使用できます。

Sr.No

Function & Description

1

onComplete

保存要求が正常に完了したときに呼び出されるJavaScript関数。デフォルトでは、エディターにハイライト効果が適用されます。

2

onFailure

保存要求の失敗時に呼び出されるJavaScript関数。デフォルトでは、失敗メッセージを示すアラートが発行されます。

3

callback

リクエストに送信されるクエリ文字列を取得するために、保存リクエストを送信する直前に呼び出されるJavaScript関数。既定の関数は、クエリパラメーター「値」をテキストコントロールの値に等しくするクエリ文字列を返します。

CSSスタイリングとDOM idオプション

また、次のいずれかのオプションを使用して、インプレースエディタの動作を制御することもできます-

Sr.No

Option & Description

1

savingClassName

保存操作の進行中に要素に適用されるCSSクラス名。このクラスは、保存URLへの要求が行われたときに適用され、応答が返されたときに削除されます。デフォルト値は「inplaceeditor-saving」です。

2

formClassName

エディター要素を含めるために作成されたフォームに適用されるCSSクラス名。デフォルトは「inplaceeditor-form」です。

3

formId

エディター要素を含めるために作成されたフォームに適用されるID。

例

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

表示されたら、テキストをクリックして編集します。このかなり単純なPHPスクリプトは、キー「value」を持つクエリパラメーターの値を大文字に変換し、結果を応答に書き戻します。

transform.phpスクリプトの内容は次のとおりです。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

これにより、次の結果が生成されます–

インプレースコレクションエディターのオプション

_Ajax.InPlaceCollectionEditor、_というもう1つのオブジェクトがあります。このオブジェクトは、インプレース編集をサポートし、指定されたオプションから値を選択するオプションを提供します。

全体の構文は次のとおりです-

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Ajax.InPlaceCollectionEditorのコンストラクターは、3つのパラメーターを受け入れます。

ターゲット要素は、要素自体への参照またはターゲット要素のIDのいずれかです。
Ajax.InPlaceEditorの2番目のパラメーターは、編集された値が完了したときに接続されるサーバー側スクリプトのURLを指定します。 *通常のオプションのハッシュ。

オプション

コレクションオプションの追加は別として、インプレースコレクションエディターのオプションのリストは、インプレーステキストエディターから継承されたオプションのサブセットです。

Sr.No	Option & Description
1	okButton* 「OK」ボタンを表示するかどうかを示すブール値。デフォルトはtrueです。
2	okText [OK]ボタンに配置するテキスト。デフォルトは「ok」です。
3	cancelLink キャンセルリンクを表示するかどうかを示すブール値。デフォルトはtrueです。
4	cancelText キャンセルリンクのテキスト。デフォルトは「キャンセル」です。
5	savingText 保存操作（[ok]ボタンをクリックして開始された要求）の処理中に、コントロールの値として表示されるテキスト文字列。デフォルトは「保存」です。
6	clickToEditText マウスオーバー時にコントロールの「ツールチップ」として表示されるテキスト文字列。
7	Highlightcolor マウスオーバー時にテキスト要素の背景に適用する色。デフォルトは淡黄色です。
8	Highlightendcolor ハイライトの色が効果としてフェードする色。注意-一部のブラウザではサポートが不完全なようです。
9	Collection 要素の選択オプションを設定するために使用されるアイテムの配列。
10	loadTextUrl エディターがアクティブモードになったときにエディターの初期値を読み込むために接続するサーバー側リソースのURLを指定します。デフォルトでは、バックエンドのロード操作は行われず、初期値はターゲット要素のテキストです。このオプションを有効にするには、コレクションオプションで提供されるアイテムの1つを返して、select要素の初期値として設定する必要があります。
11	externalControl エディターをアクティブモードにするトリガーとなる「外部コントロール」として機能する要素。これは、コントロールの編集をトリガーする別のボタンまたは他の要素が必要な場合に便利です。
12	ajaxOptions 基礎となるPrototype Ajaxオブジェクトに渡され、オプションハッシュとして使用するハッシュオブジェクト。

コールバックオプション

さらに、オプションパラメータで次のコールバック関数のいずれかを使用することができます-

Sr.No

Function & Description

1

onComplete

保存要求が正常に完了したときに呼び出されるJavaScript関数。デフォルトでは、エディターにハイライト効果が適用されます。

2

onFailure

保存要求の失敗時に呼び出されるJavaScript関数。デフォルトでは、失敗メッセージを示すアラートが発行されます。

CSSスタイリングとDOM idオプション

また、次のいずれかのオプションを使用して、インプレースエディタの動作を制御することもできます-

Sr.No

Option & Description

1

savingClassName

保存操作の進行中に要素に適用されるCSSクラス名。このクラスは、保存URLへの要求が行われたときに適用され、応答が返されたときに削除されます。デフォルト値は「inplaceeditor-saving」です。

2

formClassName

エディター要素を含めるために作成されたフォームに適用されるCSSクラス名。デフォルトは「inplaceeditor-form」です。

3

formId

エディター要素を含めるために作成されたフォームに適用されるID。

例

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

transform.phpスクリプトの内容は次のとおりです。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

transform.phpスクリプトの内容は次のとおりです。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

表示されたら、表示されたオプションのいずれかをクリックして選択します。このかなり単純なPHPスクリプトは、キー「value」を持つクエリパラメーターの値を大文字に変換し、結果を応答に書き戻します。

上記の表で説明したさまざまなオプションを使用してコードをよりよく理解するには、オンラインコンパイラを使用してください。

これにより、次の結果が生成されます–

Script.aculo.us-scriptaculous-inplace-editing

script.aculo.us-インプレース編集

インプレーステキストエディターの作成

オプション

コールバックオプション

CSSスタイリングとDOM idオプション

例

インプレースコレクションエディターのオプション

オプション

コールバックオプション

CSSスタイリングとDOM idオプション

例

目次