ローディング画面の実装【CakePHP, jQuery BlockUI Plugin】
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'); ?>