HTML 画面定義テンプレート

HTML 画面定義テンプレート

日時： 2018/02/15 05:36
名前： lightbox

テキストエリア POST 送信

オンライン実行

拡張子:<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title></title>
<style>
* {
	font-size: 16px;
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){

});

function checkForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return false;
	}

	if ( $("textarea[name='text']").val().trim() == "" ) {
		alert("必須入力です")
		$("textarea[name='text']").focus();
		return false;
	}

	return true;
}
</script>
</head>
<body>

<form method="post" target="_self" onsubmit="return checkForm();">
	<textarea name="text" style="width:400px;height:100px;"></textarea>
	<br>

	<input type="submit" name="send" value="送信">
</form>

</body>
</html>

JavaSctipt テスト用 : プラグイン等実装バージョン ( No.1 )

日時： 2018/02/15 05:36
名前： lightbox

オンライン実行

拡張子:<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<style>
* {
	font-size: 16px;
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}

/* PC 用の表示 */
@media screen and ( min-width:480px ) {
	#content {
		margin: 20px;
	}
}
/* スマホ 用の表示 */
@media screen and ( max-width:479px )
{
	body {
		width: 100%!important;
		margin: 0px;
	}
	.unit {
		width: 100%;
	}
}
</style>
<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if ( $.isMobile ) {
	// スマホの場合は表示画面下の中央
	toastr.options.positionClass = "toast-bottom-center";
}

$(function(){

	$('#qrcode')
		.css({ "margin" : "20px" })
		.qrcode({width: 160,height: 160,text: location.href });
		

});
</script>
</head>
<body>

<div id="qrcode"></div>

</body>
</html>

JavaSctipt テスト用 : プラグイン等実装バージョン(タイトル・コンテンツエリア付き) ( No.2 )

日時： 2018/02/15 05:37
名前： lightbox

オンライン実行



拡張子:<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<style>
* {
	font-size: 16px;
	font-family: "ヒラギノ角ゴPro W6","Hiragino Kaku Gothic Pro W6","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Verdana,Arial,Helvetica,sans-serif;
}
#head {
	background-color: #404040;
	padding: 10px 0 10px 25px;
}
#head * {
	color: #ffffff;
}

/* PC 用の表示 */
@media screen and ( min-width:480px ) {
	#content {
		margin: 20px;
	}
}
/* スマホ 用の表示 */
@media screen and ( max-width:479px )
{
	body {
		width: 100%!important;
		margin: 0px;
	}
	.unit {
		width: 100%;
	}
}
</style>
<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if ( $.isMobile ) {
	// スマホの場合は表示画面下の中央
	toastr.options.positionClass = "toast-bottom-center";
}

$(function(){

	$("#action").on("click", function(){
		toastr.info("ボタンがクリックされました");
	});

	$('#qrcode')
		.css({ "margin" : "20px" })
		.qrcode({width: 160,height: 160,text: location.href });
		

});
</script>
</head>
<body>
<div id="head">
	<div id="title">
		<a href="./">HTML 基本テンプレート</a>
	</div>
</div>

<div id="content">

	<input id="action" type="button" value="実行" class="btn btn-primary">

</div>

<div id="qrcode"></div>

</body>
</html>

プライバシーポリシー