jQueryを使ってメッセージをふわーんとさせる(CakePHP修行 #25)

SPONSORED LINK

Pocket

さて、何かの処理をしたときに現れるメッセージですが、jQueryを使ってふわーんと消してみたいと思います。prototype.jsでもいいのですが、なんか重いイメージがあるのでjQueryで。

以下、作業手順。

■ jQueryをインストール

jQueryのサイトからダウンロード、/app/webroot/jsに設置します。

■ jquery.jsをインクルード

/app/views/layout/default.htmlにてjQueryをインクルード。

<script type="text/javascript" src="/js/jquery.js"></script>

■ メッセージを出すところを変更

Viewsでメッセージを出すところを次のように変更。ちょー簡単。

<?php if (isset($sys_msg)) { ?>
<div id="sys_msg"><?= $sys_msg; ?></div>
<script>
$(document).ready(function() { $("#sys_msg").fadeOut(2000); });
</script>
<?php } ?>

これで作業終了。思ったより簡単ですね。

jquery.gif

↑ ふわーんと消えているところ。動画でアップしようと思ったけど面倒なんで略。

それにしてもjQueryは便利ぽい。ちょっとRubyっぽいのかな?どちらにしてもちょっと極めたいところ。ま、おいおい。

※ CakePHP修業は百式管理人がSNSっぽいものをCakePHPで作ろうとして挫折するまでの日記です。前回までのあらすじはこちらへ。

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.