■

JQuery UI を使った JqueryUiHelper を作ってみた。
事前に layout/default.ctp などで、jquery.js、jquery-ui.js、jquery-ui.cssを読み込んでおく。
css は http://ui.jquery.com/themeroller/ で作った物をリネームして使っている。

とりあえず、今の仕事でよく使う2機能のみだが晒してみる。

sort() は tbody id="sort"などの中身をソートし、ソート結果をAjaxでDBに反映させる。
flash_dialog() は $session->flash() の代わりに使う。dialogに$session->flash()の結果を表示し、その後消える。dialog表示することでレイアウトが崩れない。

<?php
class JqueryUiHelper extends AppHelper
{
    public $helpers = array('Javascript', 'Session');

    //Ajaxのインジケータ要素ID(imgタグ)
    public $indicator = '#ajax_load';

    //dialogの表示期間(ミリ秒)
    public $dialog_timout = 3000;

    /**
     * jQuery.sotable()
     *
     * @param  string  $id     ソート対象 DOM ID
     * @param  string  $url    ソート処理URL
     * @return string          ソート用スクリプト
     */
    public function sort($id = '#sort', $url = 'sort')
    {
        $script = <<<EOD
jQuery(document).ready(function($){
    $("{$id}").sortable({
        stop:function(e, ui){
            $('{$this->indicator}').show();
            $.post('{$this->url($url)}', $("{$id}").sortable('serialize'), function(ms,st){
                $('{$this->indicator}').hide();
            });
        }
    });
});
EOD;
        return $this->Javascript->codeBlock($script);
    }


    /**
     * CakePHP のフラッシュメッセージを jQuery.dialog()で表示する
     *
     * @param   string  $title  ダイアログ・タイトル
     * @param   string  $key    フラッシュメッセージのキー
     * @return  string
     */
    public function flash_dialog($title = 'Message Box', $key = 'flash')
    {
        if ($this->Session->check('Message.' . $key)) {
            $this->Session->flash($key);
            $script = <<<EOD
jQuery(document).ready(function($){
    $("#flashMessage").attr('title', '{$title}').dialog();
    setTimeout(function () {
          $("#flashMessage").dialog("close");
     }, {$this->dialog_timout});
});
EOD;
            return $this->Javascript->codeBlock($script);
        }
    }

}