ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
[JS]アラートやコンファームなどの通知ダイアログとユーザーのアクションを表示するパネルも簡単に実装するスクリプト -alertifyjs
アラートやコンファームやプロンプトの通知ダイアログ、ユーザーがOKやCancelをクリックしたことを伝えるパネルを簡単に実装できるスタンドアローンのスクリプトを紹介します。 alertifyjs alertifyjs -GitHub alertifyjsの特徴 alertifyjsのデモ alertifyjsの使い方 alertifyjsの特徴 alertifyjsは簡単にカスタマイズができる通知システムを実装できるJavaScriptです。 alert, confirm, promptの全通知ダイアログはフルカスタマイズが可能。 通知システムもカスタマイズが可能。 OKとCancelの両方のボタンにコールバックに対応。 ダイアログを連携させることも可能。 alertifyjsのデモ promptの通知ダイアログと通知システムを表示 alertifyjsの使い方 Step 1: 外部ファイ
20 Useful jQuery Notification Plugins and Tutorials | Tripwire Magazine
20 Useful jQuery Notification Plugins and Tutorials by Sonny M. Day | Last updated Dec 18, 2016 | jQuery Plugin Collections | 11 comments Just like jQuery sliders I think jQuery notification plugins have a very crucial potential in enhancing user experience for website visitors. The power of these scripts are oftentimes unnoticed, you see a jQuery notification plugin can be used for providing a ti
jQuery PowerTip
PowerTip is a jQuery tooltip plugin with a smooth user experience that features a very flexible design which is easy to customize, gives you a variety of different ways to create tooltips, supports adding complex data to tooltips, and has a robust API for developers seeking greater integration with their web applications. Download v1.3.2 Zip file with examples, CSS, and script. For older versions,
[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 キーボードナビゲーションにも対応。 表示のアニメーションは、スムーズなフェードインとフェードアウト。 ツールチップは複数設置可。 あらゆる要素にツールチップを表示可能。 ビヘイビアやイベントをもった複雑なコンテンツにも対応。 6KBと超軽量。 jQuery PowerTipのデモ デモは、ベーシックな3種類が用意されています。 Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチ
[JS]シンプルなものから高性能なものまで簡単に通知パネルを実装できるスクリプト -Backbone.Notifier
通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。 デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグインを紹介します。 Backbone.Notifier -GitHub [ad#ad-2] Backbone.Notifierの特徴 Backbone.Notifierのデモ Backbone.Notifierの使い方 Backbone.Notifierの特徴 ページの上部や中央に通知パネルをアニメーションで表示します。 スタイルは通知、エラー、警告、成功など、さまざまなものが揃っています。 スタイルはCSSベースでカスタマイズできます。 通知パネルの表示・非表示のタイミングを調整できます。 通知パネルを連携させることもできます。 Backbone
[CSS]スクリプト無しで実装できる、アニメーションで表示・非表示する通知パネル
通知パネルをフェードのアニメーションで表示し、一定の時間が経ったら非表示にするスタイルシートのチュートリアルを紹介します。 デモページ：通知パネル拡大 実装 実装のポイントを紹介します。 HTML パネルはdiv要素で実装し、パラグラフとバーを内包しています。 <div class="tn-box tn-box-color-1"> <p>Your settings have been saved successfully!</p> <div class="tn-progress"></div> </div> CSS 通知パネルの外観のスタイルです。 .tn-box { width: 360px; position: relative; margin: 0 auto 20px auto; padding: 25px 15px; text-align: left; border-radius:
[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js
ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ：IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=
Messi, simple jQuery message plugin
- A simple message plugin for jQuery - by @marcosesperon About Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user. Display text, html content, images and ajax requests with 5KB code. Check in GitHub: https://github.com/marcosesperon/Messi Usagesh
かわいらしいツールチップ
デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="sweet-tooltip.js"></script> HTML ツールチップはa要素を使用して実装します。 <a href="#" class="sweet-tooltip" data-style-tooltip="style name" data-text-tooltip="Tooltip's text to be disaplayed"
[JS]スクリプト初心者でも簡単にカスタマイズできる、通知パネルをアニメーションで表示するスクリプト -noty
設置が簡単でカスタマイズも簡単にできる、ページの上部・下部・中央・角からアニメーションで通知パネルを表示・非表示するjQueryのプラグインを紹介します。 noty [ad#ad-2] notyのデモ notyの使い方 notyのデモ デモではnotyのさまざまな通知パネルを楽しむことができます。 下記は全てアラートパネルですが、他にもError, Success, Confirmが用意されています。
分かりやすい通知ボックスを作れる「Humane JS」:phpspot開発日誌
Humane JS 分かりやすい通知ボックスを作れる「Humane JS」 JavaScirptなどで完了などを通知する場合に使える通知用ライブラリです。 スキンが数種類あり、選べるのですが、画面中央にアニメーションしながら表示されるということでとても分かりやすいです 通知ライブラリは色々とありますが、分かりやすさ優先でこのライブラリは便利に使えるかも。 もちろん、ページの端にちょこっと表示するようなスキンもあります。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 ブロック要素にいとも簡単にiOS風の通知件数を表
[JS]ドラッグで移動も可能なモーダルウインドウを作成する軽量スクリプト -Simple Modal
アラート、コンファームだけでなく、AJAXコンテンツ、画像、動画など表示するモーダルウインドウを実装するスクリプトを紹介します。 Simple Modal [ad#ad-2] Simple Modalの特徴 Simple Modalのデモ Simple Modalの実装 Simple Modalのダウンロード Simple Modalの特徴 モーダルウインドウを簡単に生成します。 生成したモーダルウインドウは、ドラッグ操作で移動可能です。 コールバック関数を備えています。 画像や動画、AJAXコンテンツにも対応しています。 Simple Modalのデモ デモではSimple Modalのさまざまな実装例があります。
CSS3で実装する、簡単で美しいツールチップのチュートリアル
IE7など古いブラウザでもそれなりに表示される、CSS3で実装するツールチップのチュートリアルを紹介します。 IE7でのキャプチャ 背景色はRGBaとは別に指定しておくと、カラーも反映されます。 実装 元記事では最初に、a要素のtitle属性を利用した実装例がありますが、それは省略して、デモページの実装を紹介します。 HTML ポイントはツールチップに表示するテキストをどこに配置するかで、ここではa要素内のspan要素に配置しています。 <a href="">adipiscing elit<span>This is the first tooltip</span></a> CSS 最初にspan要素は非表示にし、CSS3を使ってツールチップを美しくデザインします。 span要素はホバー時に表示にします。 a span{ display:none; color:#fff; backgroun
簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」:phpspot開発日誌
Notifier.js ? Elegant Javascript notifications | Srirangan 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」。 次のようなオシャレなアイコン付きの通知を表示できます。一定期間が終われば１個のアイテムはそれぞれ消えていく流行りのインタフェースです。 Notifier.success('User registration successful') のように関数を呼び出すだけで簡単に使うことができるので、使いやすそうです。 アイコンを変えるには、success の代わりに info や warning, error, notify といったメソッドを使えばOKです。 後から出てきただけあって、ポップアップなんかよりも邪魔にならないというところがいいですね 関連エントリ ピュアCSSでページ上に通知を出すチ
ページの右上等に分かりやすく通知を表示できたりする「jsMessage」:phpspot開発日誌
Message library ページの右上等に分かりやすく通知を表示できたりする「jsMessage」 ページの右上にアニメーションしながら流れるように通知を流すようなことが出来ます。 通知だけではなくてダイアログのような物を実装することも出来ます。 スキンにも対応しておりルックアンドフィールを変えることも容易 関連エントリ Twitter風にエラーや通知をページ上部に表示させるjQueryプラグイン 通知件数表示付きのメニュー実装jQueryプラグイン「Notification Menu」 HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 Android風の簡単な通知を実現する「jQueryToast」
ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」:phpspot開発日誌
ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」 2011年07月14日- jQuery Tutorial Plugin | Particle Bits ページ上にそのままチュートリアルを乗っけて使い方を分かりやすく説明できるjQueryプラグイン「jQuery Tutorial」. チュートリアルといえばキャプチャしたビデオでもいいのですが、ページ上にそのまま表示したほうが分かりやすい事も多そうです。 そんな際に使えるプラグインです。 実装されたサイト 「StartDemo」を押せば矢印カーソルとポップアップで説明を入れられる 「Next」を押せば次の説明へ移動。 という具合に見たまま注釈を入れられるので便利ですね。 使い方についてですが、サイト上で動くチュートリアルのデモでその使い方をチュートリアルしてくれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Daniel Raftery. Software Engineer.
商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kit
IDEA * IDEA
