Web上でときどき見る「登録しました」などのメッセージ表示エリアがスーッと消えてなくなる動きを自分もやってみた。
簡単ながら社内システムなどで今後も使えそうなのでメモ。
業務アプリの多くがDBにデータいれて、取り出して、表示…という単調な部分が多いので少しこういう動きのあるものが加わるだけで操作が楽しくなるという不思議。
head内でjQueryを読み込む
<script type="text/javascript" src="<?= base_url()?>js/jquery-1.5.2.min.js"></script>
エラーの場合に表示するメッセージにidをつける
ここではid=’msg’としている。setTimeoutでスーッと消したいid名を指定する。
<?php if($error != ""): ?> <div id="msg" class="alert-danger"><?php echo $error ?></div> <?php endif; ?> <script> $(function(){ setTimeout(function(){ $('#msg').fadeOut("slow"); },800); }); </script>
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
- 作者: 西畑一馬
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2010/02/12
- メディア: 大型本
- 購入: 27人 クリック: 1,467回
- この商品を含むブログ (48件) を見る
jQuery本格入門 ?JavaScript開発・デザイン効率化の基礎から Ajax・QUnitまで
- 作者: 沖林正紀
- 出版社/メーカー: 技術評論社
- 発売日: 2012/01/06
- メディア: 大型本
- 購入: 4人 クリック: 24回
- この商品を含むブログを見る