| コメント |
@DIV
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery テンプレート</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
$("#buttonContent")
.attr("type", "button")
.val("チェック")
.css({
"font-size": "20px",
"background-color": "orange",
"font-weight": "bold",
"border-radius": "10px"
})
.click(function(){
if ( $("#fieldContent1").val().match(new RegExp($("#fieldContent1").data("format"))) == null ) {
$( "#text-message" ).text($("#fieldContent1").data("message"));
$( "#dialog-message" ).dialog({
modal: true,
buttons: [{
text: "確認",
click: function() {
$( this ).dialog( "close" );
$( "#fieldContent1" )
.select()
.focus();
}
}]
});
event.preventDefault();
return;
}
});
});
</script>
</head>
<body>
<input id="buttonContent">
<br>
<input id="fieldContent1" data-format="^.+@.+\..+$" data-message="メールアドレスを入力してください">
<div id="dialog-message" title="入力エラー" style='display:none;'>
<p id="text-message" style="font-weight:bold;color:#CB3232;">
</p>
</div>
</body>
</html>
@END |
メンテナンス