ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
jQuery 用テストHTMLテンプレート
日時: 2014/06/25 19:37
名前: lightbox







<!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() {



});
</script>

</head>
<body>



</body>
</html>
メンテナンス

ボタンのテンプレート ( No.1 )
日時: 2014/06/24 11:11
名前: lightbox


日時: 2014/06/24 11:11
名前: lightbox
<!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(){
			console.log("ボタンがクリックされました");
		});

});
</script>

</head>
<body>

<input id="buttonContent">

</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
アンカーのテンプレート ( No.2 )
日時: 2014/06/24 11:45
名前: lightbox
<!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() {

	// 通常リンク
	$("#anchorContent1")
		.attr({
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})
		.text("Google")
		.css({
			"font-size": "20px",
			"font-weight": "bold"
		})
		.click(function(){
			console.log("アンカーがクリックされました");
		});

	// ボタンがわり
	$("#anchorContent2")
		.attr("href", "#")
		.text("ボタンのかわり")
		.css({
			"font-size": "20px",
			"font-weight": "bold"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました");

			// クリックする事によって起こる # の機能をキャンセル
			event.preventDefault();
		});

	// jQuery UI でアンカーをボタン化
	$("#anchorContent3")
		.button()
		.text("ボタンのかわり")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "10px"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました");

			// クリックする事によって起こるかもしれない処理をキャンセル
			event.preventDefault();
		});

});
</script>

</head>
<body>

<a id="anchorContent1"></a>
<br><br>
<a id="anchorContent2"></a>
<br><br>
<a id="anchorContent3"></a>

</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
コンボボックスのテンプレート ( No.3 )
日時: 2014/06/24 14:47
名前: lightbox
<!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() {

	var optionValueText = [
		[
			"A",
			"B",
			"C",
			"D",
			"E",
			"F",
			"G",
			"H",
			"I",
			"J"
		],
		[
			"あああ",
			"いいい",
			"ううう",
			"えええ",
			"おおお",
			"かかか",
			"ききき",
			"くくく",
			"けけけ",
			"こここ"
		]
	];

	$("#selectContent")
		.prop("length", 10)
		.change(function(){
			console.log("選択が変更されました");
		})
		.children()
		.each(function(idx){
			$(this).val(optionValueText[0][idx]);
			$(this).text(optionValueText[1][idx]);
		});

});
</script>

</head>
<body>

<select id="selectContent">
</select>


</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
モーダルダイアログのテンプレート ( No.4 )
日時: 2014/06/24 15:51
名前: lightbox
<!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() {

	$("#dialog1")
		.attr("type","button")
		.val("通常モーダルダイアログ")
		.css("width", "250px")
		.click(function(){
			$( "#dialog-message" ).text("ダイアログ内部のメッセージです")
				.dialog({
					modal: true,
					title: "ダイアログのタイトルです",
					close: function() {
						console.log("x ボタンがクリックされました");
					},
					buttons: [
						{ 
							text: "確認",
							click: function() {
								$( this ).dialog( "close" );
								console.log("確認 ボタンがクリックされました");
							}
						},
						{
							text: "キャンセル",
							click: function() {
								$( this ).dialog( "close" );
								console.log("キャンセル ボタンがクリックされました");
							}
						}
					]
				});

		});

	$("#dialog2")
		.attr("type","button")
		.val("モーダルダイアログ(IFRAME 利用)")
		.css("width", "250px")
		.click(function(){
			$( "#dialog-iframe" )
				.dialog({
					modal: true,
					title: "ダイアログのタイトルです",
					width: 720,
					close: function() {
						console.log("x ボタンがクリックされました");
					},
					buttons: [
						{ 
							text: "確認",
							click: function() {
								$( this ).dialog( "close" );
								console.log("確認 ボタンがクリックされました");
							}
						},
						{
							text: "キャンセル",
							click: function() {
								$( this ).dialog( "close" );
								console.log("キャンセル ボタンがクリックされました");
							}
						}
					]
				});

		});

});
</script>

</head>
<body>

<input id="dialog1">
<br><br>
<input id="dialog2">


<div id="dialog-message" title="" style='display:none;'>
</div>

<div id="dialog-iframe" title="" style='display:none;'>
<iframe
	src="about:blank"
	name="iframe_win"
	id="iframe_win"
	frameborder="0"
	scrolling="no"
	width="680"
	height="380"
	style=''
></iframe>
</div>

</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
日付コントロールのテンプレート ( No.5 )
日時: 2014/06/24 16:34
名前: lightbox
<!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 UI datepicker 用デフォルトオプション
// ***********************************************
var datepicker_option = {
	dateFormat: 'yy/mm/dd',
	dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
	monthNames:  ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
	showMonthAfterYear: true,
	yearSuffix: '年',
	changeYear: true,
	showAnim: 'fadeIn',
	yearRange: "1950:2014"
}

// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	// ***********************************************
	// datepicker プラグイン
	// ***********************************************
	$("#dateContent").datepicker(datepicker_option);

	$("#buttonContent")
		.attr("type", "button")
		.val("日付チェック")
		.css({
			"font-size": "20px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			// 日付妥当性チェック
			if ( !($( "#dateContent" ).val().isDate()) ) {
				alert("日付が正しくありません");
				$( "#syainBirth" )
				.select()
				.focus();
				return;
			}
		});

});

// ***********************************************
// 日付妥当性チェックを String オブジェクトに追加
// ***********************************************
String.prototype["isDate"] = function() {
	var str = this.valueOf();
	if ( str == "" ) {
		return true;
	}
	if ( !str.match(/^\d{4}\/[\d]+\/[\d]+$/) ) { 
		return false; 
	} 
	var parts = str.split( "/" );
	var nYear = Number(parts[0]); 
	var nMonth = Number(parts[1]) - 1;
	var nDay = Number(parts[2]);
	// 月,日の妥当性チェック 
	if ( 0 <= nMonth && nMonth <= 11 && 1 <= nDay && nDay <= 31 ) { 
		var dt = new Date(nYear, nMonth, nDay); 
		if( isNaN(dt) ) { 
			return false; 
		}
		else if(
			dt.getFullYear() == nYear &&
			dt.getMonth() == nMonth &&
			dt.getDate() == nDay ) {
			return true;
		}
		else{ 
			return false;
		}
	}
	else{ 
		return false;
	}
};
</script>

</head>
<body>

<input id="buttonContent">
<br>
<input id="dateContent">



</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
タブコントロールのテンプレート ( No.6 )
日時: 2014/06/24 20:17
名前: lightbox
単純タブ
<!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() {

	$( "#mytabs" ).tabs({
		active: 0,
		activate: function( event, ui ) {
			console.log( $(event.currentTarget).text()  );
		}
	});

});
</script>

</head>
<body>

<div id="mytabs">
	<ul>
		<li><a href="#tabs-1">画像(1)</a></li>
		<li><a href="#tabs-2">画像(2)</a></li>
		<li><a href="#tabs-3">画像(3)</a></li>
	</ul>
	<div id="tabs-1">
	<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-2">
	<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-3">
	<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
	</div>
</div>

</body>
</html>
直前に開いたタブを localStorage に記憶させる
<!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() {

	var target_tab = 0;
	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
		target_tab = localStorage["old_active"];
	}
	$( "#mytabs" ).tabs({
		active: target_tab,
		activate: function( event, ui ) {
			console.log( $(event.currentTarget).text()  );
			localStorage["old_active"] = $( this ).tabs( "option", "active" );
		}
	});

});
</script>

</head>
<body>

<div id="mytabs">
	<ul>
		<li><a href="#tabs-1">画像(1)</a></li>
		<li><a href="#tabs-2">画像(2)</a></li>
		<li><a href="#tabs-3">画像(3)</a></li>
	</ul>
	<div id="tabs-1">
	<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-2">
	<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-3">
	<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
	</div>
</div>

</body>
</html>
タブ切り替え時にアニメーション
<!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() {

	var target_tab = 0;
	if ( typeof(localStorage["old_active"]) != 'undefined' ) {
		target_tab = localStorage["old_active"];
	}
	$( "#mytabs" ).tabs({
		show: { effect: "fade" },
		hide: { effect: "fade" },
		active: target_tab,
		activate: function( event, ui ) {
			console.log( $(event.currentTarget).text()  );
			localStorage["old_active"] = $( this ).tabs( "option", "active" );
		}
	});

});
</script>

</head>
<body>

<div id="mytabs">
	<ul>
		<li><a href="#tabs-1">画像(1)</a></li>
		<li><a href="#tabs-2">画像(2)</a></li>
		<li><a href="#tabs-3">画像(3)</a></li>
	</ul>
	<div id="tabs-1">
	<img src="https://lh5.googleusercontent.com/-MKN_5OfQ3A8/TwA4HxMhKNI/AAAAAAAAEM0/hIDpgmlXI8w/s400/P1000953.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-2">
	<img src="https://lh3.googleusercontent.com/--p3XLLRSMLs/TjQLJaWhuwI/AAAAAAAADJI/7oxoPiJShFw/s400/P1000881.JPG" style="border: solid 1px #000000" />
	</div>
	<div id="tabs-3">
	<img src="https://lh6.googleusercontent.com/-zUdJQeL-WxA/Tj0ZltROUMI/AAAAAAAADNw/35vSSD19BYo/s400/P1000897.JPG" style="border: solid 1px #000000" />
	</div>
</div>

</body>
</html>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス
カスタム属性を使用した入力フォーマットチェックのテンプレート ( No.7 )
日時: 2014/06/25 11:53
名前: lightbox
<!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>
このアーティクルの参照用URLをクリップボードにコピー メンテナンス