jQuery 用テストHTMLテンプレート
|
|
日時: 2014/06/25 19:37
名前: lightbox
|
|
|
ボタンのテンプレート ( No.1 ) |
|
日時: 2014/06/24 11:11
名前: lightbox
|
日時: 2014/06/24 11:11 名前: lightbox
|
アンカーのテンプレート ( No.2 ) |
日時: 2014/06/24 11:45 名前: lightbox
|
コンボボックスのテンプレート ( 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>
|
モーダルダイアログのテンプレート ( 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>
|
日付コントロールのテンプレート ( 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>
|
タブコントロールのテンプレート ( No.6 ) |
日時: 2014/06/24 20:17 名前: lightbox
単純タブ
直前に開いたタブを localStorage に記憶させる
タブ切り替え時にアニメーション
|
カスタム属性を使用した入力フォーマットチェックのテンプレート ( No.7 ) |
日時: 2014/06/25 11:53 名前: lightbox
|
|
|
|