今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. なめらかなアニメ効果付きのグライドナビゲーション「Dynamic glide navigation」
  3. ExcelのようにTableが編集できちゃう「Handsontable」
  4. マウスオーバーで画像を拡大「ZoomPic」
  5. 画像スライドショー「jCarousel」オプションたくさんアルヨ

ポップアップ 通知 - さまざまな機能付き「Tikslus Notyrious」

スポンサーリンク

さまざまな機能が付いているポップアップ通知を実装するプラグイン「Tikslus Notyrious」を紹介します。

jQueryプラグイン「Tikslus Notyrious」

このプラグインを使えば、さまざまな機能付きのポップアップ通知を簡単に実装することができます。以下の機能一覧です。

  • スクロールしてもついてくる
  • アニメーション効果付き
  • プログレスバーを表示(一定時間後にポップアップが消える)
  • ポップアップにボタンを付加
  • ポップアップの位置をいろいろ変える
  • 複数のポップアップを一度に表示

……などなど、全部書くのがめんどくさくなるくらいさまざまな機能があります。

スポンサーリンク

デモページの「ここをクリック!クリック!」というところをクリックしてみてください。

「Tikslus Notyrious」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Tikslus Notyriousのデモでーす。">
<title>Tikslus Notyrious - jQueryプラグイン</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="tikslus_notyrious.min.js"></script>
<script type="text/javascript" src="rainbow.min.js"></script>
<link rel="stylesheet" href="tikslus_notyrious.css"/>
<style>
body {
  height: 2000px;
}
</style>
</head>
<body>
<h1>Tikslus Notyrious のデモでーす。</h1>
<a href='#' id='demo'>ここをクリック!クリック!</a>

<script>
$("#demo").click(function(e){
  e.preventDefault();
  $.fn.tikslusnotyrious({title:'new message',
  message:"ポップアップ!<br />スクロールしてもついてくるよ!<br />しばらく待ってみると…!",
  sticky:false,
  skinPath:'./'
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)