ysku's blog

ウェブ・無線通信・組み込みとか

ローディング画面の実装【CakePHP, jQuery BlockUI Plugin】

f:id:yusuke1581:20141112005253j:plain
CakePHPで実装しているシステムにおいて、画面遷移の際の処理に時間がどうしてもかかってしまうため、ローディング画面を実装しました(ボタンをクリックして画面遷移をする際に、ローディング画面を表示させました)
今回は、jQuery BlockUI Pluginを使用しました
jQuery BlockUI Plugin

【環境】
CakePHP 2.5

【手順】
1)
jQuery BlockUI Pluginを手に入れてきます
ここからダウンロードしてきます
http://malsup.com/jquery/block/#download
ファイル名:jquery.BlockUI.js

2)
以下のディレクトリに移動させます
~/app/webroot/js

3)
基本的には他のページでも使用することを考えているので、次のファイルに以下を追加します
ファイル名:~/app/View/Layouts/default.ctp
(bootstrapを使用している場合は、default.ctpではなくbootstrap.ctp)

<?php echo $this->Html->script('jquery.blockUI.js'); ?>

4)
ローディング画面をElementとして作成します
Elementは再利用可能なパーツです
以下を参考にしてください
ビュー - 2.x

以下のディレクトリに移動します
~/app/View/Elements
ここでctpファイルを作成し、以下を書き込みます
ファイル名:blockUI.ctp

<script>
$(function(){
    $('#check').click(function(){
        $.blockUI();
    });
});
</script>

5)
表示させたい画面のctpファイルに以下を追加します

<?php echo $this->element('blockUI'); ?>

これだけで完了です
以上が、jQuery blockUI PluginのCakePHP上での実装の仕方になります