2008年2月8日
Openforce アプリケーション開発

JavascriptHelper

手軽にAjaxやDHTMLのような動作が扱えるヘルパー。

link_to_remote ($name, $options = array(), $html_options = array())

Ajaxイベントを発生させるリンク。殆どRails互換。

$optionsのパラメータ

オプション名 prototype.jsでのオプション名 内容
url url url
submit postBody フォームとして取り扱うIDのエリア
update Ajax.Updaterの第一引数 レスポンスが反映されるエリアのＩＤ
script evalScripts レスポンスが返ってきた時に、その文字列をスクリプトとして評価 (eval) するかどうかを示す。
confirm   確認ダイアログを開いたときのメッセージ内容
loading   ロード時に実行されるJavascript関数
loaded   ロード終了時に実行されるJavascript関数
interactive   ユーザがリモートのドキュメントに対して反応できるようになったら呼ばれる。反応が可能になったときには、ドキュメントのロードが終了する前でも呼ばれる。
success   XMLHttpRequest が完了し、HTTP ステータスコードが 2XX 系の場合に呼ばれる。
failure   XMLHttpRequest が完了し、HTTP ステータスコードが 2XX 系ではない場合に呼ばれる。
complete   XMLHttpRequest が完了したら呼ばれる。(success/failure を優先して使用した方がよい）
before   リクエストが開始される前に呼び出される。
after   リクエストの完了後に呼び出される。

コードサンプル

  <?php echo link_to_remote(
    "表示",
    array(
      'url'=>$sf_context->getModuleName(),
      'submit'=>'ref_area',
      'script'=>true,
      'update'=>'ref_area',
      'loading' => visual_effect('BlindUp', 'ref_area'),
      'loaded' => visual_effect('BlindDown', 'ref_area'),
 
    )
  ) ?>

button_to_remote ($name, $options = array(), $html_options = array())

link_to_remoteをボタンにしただけで、取り扱いは変わらず。

remote_function ($options)

Ajaxリクエストの生Javascriptを返す。オプションはlink_to_remoteとほぼ共通。

コードサンプル 

  <div id="response_area"></div>
 <?php echo javascript_tag(remote_function(
    array(
      'update'=>'response_area',
      'url'=>'module/action',
      'script' => true
    )
  )) ?>
 

visual_effect ($name, $element_id = false, $js_options = array())

指定したエレメントにエフェクトを仕掛ける。

$nameに入る値

出現 Appear ゆっくりと色が濃くなるように出現
BlindDown 上から下にブラインドを下ろすように出現
Grow 中央から広がるように出現
消失 BlindUp 下から上にブラインドを上げるように消失
DropOut 下に落ちていくように消失
Fade ゆっくりと色が薄くなるように消失
Fold BlindUpと同様に下から上に消えていった後に、最上部が右から左に消失
Puff 画面全体に広がりながら、色が薄くなって消失
Shrink 中央に収縮するように消失
Squish 左上に収縮するように消失
SwitchOff 一度点滅した後に、高さが狭くなって消失
その他 Highlight 一瞬明るい色になって、徐々に元の色に戻る
Pulsate 数回点滅した後に停止する
Shake 数回左右に揺れた後に停止する

サンプルはlink_to_remoteを参照

sortable_element ($element_id, $options = array())

並べ替えが出来る。$optionsの値はurl以外はscript.aculo.usのSortable.create互換。

$optionsのパラメータ

  • url : 結果送信先のURL
  • tag : 並べ替え対象のタグ
  • treetag : 並べ替え対象の親のタグ