jQueryUI dialogを利用してalert関数を作成
alertするパターン毎にdivタグをHTMLにべた書きは面倒。
Dialog | jQuery UIを見てみると、
divタグをHTMLに記述してそれをalertで利用するような使い方で書いてある。
alertの種類分作ってられないので関数の中でdivを作ってから
ダイアログ表示後に後片付けするような関数を作ってみる。
毎度毎度dom生成するから重い?
定義:alertDialog関数
引き数オブジェクト
キー | 内容 |
---|---|
title | ダイアログのタイトル |
body | ダイアログの本文 |
close | ダイアログを閉じたときに実行する関数 |
使い方
$(function() { $("#btnAlert").on("click", function(){ alertDialog({title:"title",body:"body", close: function(){ console.log("ダイアログを閉じました。") }}); }); });
デモ
アラートを終了したら再度アラートをしてみる。
alertDialog({title:"title",body:"body", close:function(){ alertDialog({title:"title2回目",body:"body2回目", close:function(){} }); }});
ソース
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script type="text/javascript"> function alertDialog(_options){ var default_option = { title:"", body:"", close:function(){ return true; } } var options = $.extend(default_option , _options, {}); var dom = $("<div />", { title: options.title, html: options.body }); dom.dialog({ modal: true, close: function(){ var dom = $(this); dom.dialog("destroy"); dom.remove(); options.close(); }, buttons: [ { text: "Ok", click: function() { $(this).dialog("close"); } } ] }); }; </script> <script type="text/javascript"> $(function() { $("#btnAlert").on("click", function(){ alertDialog({title:"title",body:"body"}); }); }); </script> <button id="btnAlert">デモ</button>