*

[CakePHP, jQuery]Ajaxでメッセージをゆっくり消す

公開日: : CakePHP

SNS作りをさぼってるわけじゃないんですよ。
作るだけなら簡単だけど、ブログにまとめる時間がないだけで。

SNS系のまとめページはこちら->SNSまとめページ

さて、今回はCakePHPでふわっとメッセージを消しましょう。

必要なもの

scriptを動かすために、jQueryが必要です。

jQueryの設定

今回はdefault.ctpにjqueryを読み込むように仕込みます。

/app/View/Layouts/default.ctpを開いて、に囲まれた部分に記述をします。

<head>
	<?php echo $this->Html->charset(); ?>
	<title>
		<?php echo $cakeDescription ?>:
		<?php echo $this->fetch('title'); ?>
	</title>
	<?php
		echo $this->Html->meta('icon');

		echo $this->Html->css('cake.generic');

		echo $this->fetch('meta');
		echo $this->fetch('css');
		echo $this->fetch('script');
	?>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>

この16行目が追加した部分です。
なお、バージョンについては新しい古いがあるので、注意。

実際に消す部分

実装したいViewにスクリプトを仕込みます。

<script>
$(function(){
	setTimeout(function () {
		$('#flashMessage').fadeOut("slow");
	}, 1000);
});
</script>

「#flashMessage」というIDがどこから出てきたかというと、実際にメッセージを出して、要素の検証を行うことで確認出来ます(Chromeです)。
cakephp

cakephp
こんな感じで確認出来ます。

その要素に対し、1秒掛けてゆっくりフェードアウトしてね、と指定するとこんなソースになります。
これをゆっくり消したいViewに仕込めばOK。

全部に反映させたいならdefault.ctpのbodyタグの間にでも記述してください。

ad

関連記事

Wannabenote

[CakePHP]SNSを作ろう ブログ編2~MVCの作成~

SNSを作ろうまとめページはこちら。 前回の続き。 ブログ編は基本的にこちらのチュートリ

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編4~閲覧画面作成~

SNSを作ろうまとめページはこちら→SNSを作ろうまとめページ SNSを作ろう ブログ編3~投

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編3~投稿画面作成~

SNSを作ろうまとめページはこちら→SNSを作ろうまとめページ 前回(SNSを作ろう ブログ編

記事を読む

Wannabenote

[CakePHP]SyntaxHighlighterを利用する

ソースを綺麗に表示する このサイトでも利用しているのですが、ソースを表示して、かつ予約語などを別色

記事を読む

Wannabenote

[CakePHP]bakeコマンドでViewを作る

CakePHP関連まとめページはこちら。 最後はViewを焼いてみます。 Viewを焼き上げ

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編

SNSを作ろうまとめページはこちら。 前回の続き。 さて、私が今作りたいのはブログがメイ

記事を読む

logo

[CakePHP]bakeコマンドでModelを作る

CakePHP関連まとめページはこちら。 bakeコマンドを使う チュートリアルとか本とか読んで

記事を読む

logo

[CakePHP]bakeコマンドでControllerを作る

CakePHP関連まとめページはこちら。 今度はControllerをbakeコマンドで焼き上げて

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編5~編集画面作成~

SNSを作ろうまとめページはこちら CakePHPで閲覧画面を作った続きです。 投稿を手軽に

記事を読む

Wannabenote

[CakePHP]SNSを作ろう CakePHPインストール編

SNSを作ろうまとめページはこちら はい。こないだのsymfonyはなかったことにします。

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑