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

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

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

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

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

script.aculo.usのインプレース編集機能を使用するには、prototype.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つ以上を使用できます。

シニア番号	オプションと説明
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と同じですが、rowsが1の場合にのみ適用されます。
10	highlightcolor マウスオーバー時にテキスト要素の背景に適用する色。デフォルトは淡黄色です。
11	highlightendcolor ハイライトカラーがエフェクトとしてフェードインする色。 Note −一部のブラウザではサポートが不十分なようです。
12	loadingText ロード操作中にコントロール内に表示されるテキスト。デフォルトは「読み込み中」です。
13	loadTextURL エディターがアクティブモードに入ったときにエディターの初期値をロードするために接続するサーバー側リソースのURLを指定します。デフォルトでは、バックエンドのロード操作は行われず、初期値はターゲット要素のテキストです。
14	externalControl エディタをアクティブモードにすることをトリガーする「外部コントロール」として機能する要素。これは、別のボタンまたは他の要素でコントロールの編集をトリガーする場合に役立ちます。
15	ajaxOptions オプションハッシュとして使用するために、基になるPrototypeAjaxオブジェクトに渡されるハッシュオブジェクト。

コールバックオプション

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

シニア番号	機能と説明
1	onComplete 保存リクエストが正常に完了したときに呼び出されるJavaScript関数。デフォルトでは、エディターにハイライト効果が適用されます。
2	onFailure 保存要求の失敗時に呼び出されるJavaScript関数。デフォルトでは、失敗メッセージを示すアラートが発行されます。
3	callback リクエストに送信されるクエリ文字列を取得するために、保存リクエストを送信する直前に呼び出されるJavaScript関数。デフォルトの関数は、クエリパラメータ「value」をテキストコントロールの値と等しくするクエリ文字列を返します。

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

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

シニア番号	オプションと説明
1	savingClassName 保存操作の進行中に要素に適用されるCSSクラス名。このクラスは、保存URLへの要求が行われたときに適用され、応答が返されたときに削除されます。デフォルト値は「inplaceeditor-saving」です。
2	formClassName editor要素を含むために作成されたフォームに適用されるCSSクラス名。デフォルトは「inplaceeditor-form」です。
3	formId editor要素を含むために作成されたフォームに適用される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を指定します。
通常のオプションハッシュ。

オプション

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

シニア番号	オプションと説明
1	okButton 「OK」ボタンを表示するかどうかを示すブール値。デフォルトはtrueです。
2	okText [OK]ボタンに配置するテキスト。デフォルトは「ok」です。
3	cancelLink キャンセルリンクを表示するかどうかを示すブール値。デフォルトはtrueです。
4	cancelText キャンセルリンクのテキスト。デフォルトは「キャンセル」です。
5	savingText 保存操作（[OK]ボタンをクリックして開始された要求）の処理中にコントロールの値として表示されるテキスト文字列。デフォルトは「保存中」です。
6	clickToEditText マウスオーバー時にコントロールの「ツールチップ」として表示されるテキスト文字列。
7	Highlightcolor マウスオーバー時にテキスト要素の背景に適用する色。デフォルトは淡黄色です。
8	Highlightendcolor ハイライトカラーがエフェクトとしてフェードインする色。 Note −一部のブラウザではサポートが不十分なようです。
9	Collection selectelementオプションを設定するために使用されるアイテムの配列。
10	loadTextUrl エディターがアクティブモードに入ったときにエディターの初期値をロードするために接続するサーバー側リソースのURLを指定します。デフォルトでは、バックエンドのロード操作は行われず、初期値はターゲット要素のテキストです。このオプションを意味のあるものにするためには、コレクションオプションで提供される項目の1つを返して、select要素の初期値として設定する必要があります。
11	externalControl エディターをアクティブモードにするトリガーとなる「外部コントロール」として機能する要素。これは、別のボタンまたは他の要素でコントロールの編集をトリガーする場合に役立ちます。
12	ajaxOptions オプションハッシュとして使用するために、基になるPrototypeAjaxオブジェクトに渡されるハッシュオブジェクト。

コールバックオプション

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

シニア番号	機能と説明
1	onComplete 保存リクエストが正常に完了したときに呼び出されるJavaScript関数。デフォルトでは、エディターにハイライト効果が適用されます。
2	onFailure 保存要求の失敗時に呼び出されるJavaScript関数。デフォルトでは、失敗メッセージを示すアラートが発行されます。

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

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

シニア番号	オプションと説明
1	savingClassName 保存操作の進行中に要素に適用されるCSSクラス名。このクラスは、保存URLへの要求が行われたときに適用され、応答が返されたときに削除されます。デフォルト値は「inplaceeditor-saving」です。
2	formClassName editor要素を含むために作成されたフォームに適用されるCSSクラス名。デフォルトは「inplaceeditor-form」です。
3	formId editor要素を含むために作成されたフォームに適用される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";
   }
?>

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

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

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