My Photo

« 秀丸エディタのマクロにおける配列 | Main | 2013秋アニメ感想 »

January 05, 2014

confirm()をjquery.alerts.jsで代替する

WEBアプリケーションで確認ダイアログにはJavaScriptの window.confirm() を使うが、表示されるダイアログのデザインやボタンの文言を変更などいったカスタマイズはできない。
そこで jquery.alerts.js の jConfirm() で代替する。

jquery.alerts.js は公式ページがすでになくなっていてるので開発は停止しているようだ。しかし、404ページの下にarchivesというリンクがあって、その先のページでダウンロードできる。
注意点は以下。
・要jQuery UI。
・新しいjQuery(1.9.0以降?)では動かない。廃止されたメソッドを使用しているのが原因のようだ。

<link rel="stylesheet" href="css/jquery_ui/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="css/jquery_ui/jquery.alerts.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript">
function customConfirm(param) {
	jConfirm('Can you confirm this?', 'タイトル', function(r) {
		console.log("param=[" + param + "],r=[" + (r == true ? "true" : "false") + "]");
	});
}
</script>
</head>
<body>
<form name="form" action="/test.php" method="post">
<input type="button" value="確認1" onclick="customConfirm('abc');" /><br />
</form>

ダイアログのデザインは jquery.alerts.css を編集してカスタマイズできる。
ただし、ボタンの「OK」、「Cancel」の文言は jquery.alerts.js に書いてあるのでそれを編集する。
以下、jquery.alerts.css の一部を抜き出してシンプルにしたサンプル。

<link rel="stylesheet" href="css/jquery_ui/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery_ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.alerts.js"></script>
<script type="text/javascript">
function customConfirm(param) {
	jConfirm('Can you confirm this?', 'タイトル', function(r) {
		console.log("param=[" + param + "],r=[" + (r == true ? "true" : "false") + "]");
	});
}
</script>
<style type="text/css">
#popup_container {
    min-width:300px; /* Dialog will be no smaller than this */
    max-width:600px; /* Dialog will wrap after this width */
    border:solid 5px #999;
    background:#fff;
    color:#000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
#popup_title {
    margin:0; padding:0;
    border:solid 1px #fff;
    border-bottom:solid 1px #999;
    background:#ccc;
    color:#666;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    line-height:1.75em;
    cursor:default;
}
#popup_content {
	margin:0; padding:1em 1.75em;
/*	background:transparent url("img/icon/color/information.png") no-repeat 16px 16px;	*/
}
#popup_message { padding-left:20px; }
#popup_panel { text-align:center; margin:1em 0 0 1em; }
</style>
</head>
<body>
<form name="form" action="/test.php" method="post">
<input type="button" value="確認1" onclick="customConfirm('abc');" /><br />
</form>

jQueryUIについての参考サイト:
jQuery UI
jQuery UI 導入方法

参考サイト:
ウィンドウ、モーダル|jQuery plugin|Ajax|PHP & JavaScript Room
非常にきれいなアラートを表示する「jQuery Alert Dialogs」-JavaScript Library Archive
">

« 秀丸エディタのマクロにおける配列 | Main | 2013秋アニメ感想 »

JavaScript」カテゴリの記事

Comments

Post a comment

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/26461/58890324

Listed below are links to weblogs that reference confirm()をjquery.alerts.jsで代替する:

« 秀丸エディタのマクロにおける配列 | Main | 2013秋アニメ感想 »

April 2017
Sun Mon Tue Wed Thu Fri Sat
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
無料ブログはココログ

日本blog村

  • にほんブログ村 IT技術ブログへ
  • にほんブログ村 アニメブログへ
  • にほんブログ村 サッカーブログ アルビレックス新潟へ

好きな音楽家

メモ

XI-Prof