SQLの窓

2020年06月07日


jQuery の $.get を使用した ajax のテンプレート

ファイルのアップロードや FormData オブジェクトを使う場合は、$.ajax を使用しますが、簡単なデータの参照であればこれで十分ですし、PHP 側との連携のサンプルとして PHP の機能部分もいろいろ意味があります。

ブラウザ側
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" />


<script>

$(function(){

	$("#btn").on( "click", function(){

		// TABLE データ部分のクリア	
		$("#tbl").html("");

		$.get({
			url: "https://yourdomain.jp/test1.php",
			cache: false,
			data: { "scode" : $("#scode").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			//console.log( "data:" + JSON.stringify(data, null, "    ") );

			$.each(  data, function( index, obj ){
				console.log( obj.scode + " : " + obj.sname ) ;

				var row = $("<tr></tr>");
				$( "<td></td>" ).text( obj.scode ).appendTo( row );
				$( "<td></td>" ).text( obj.sname ).appendTo( row );
				$( "<td></td>" ).text( obj.furi ).appendTo( row );
				$( "<td></td>" ).text( obj.syozoku ).appendTo( row );
				$( "<td></td>" ).text( obj.gender ).appendTo( row );
				$( "<td></td>" ).text( obj.create ).appendTo( row );
				$( "<td></td>" ).text( obj.update ).appendTo( row );
				$( "<td></td>" ).text( obj.kyuyo ).appendTo( row );
				$( "<td></td>" ).text( obj.teate ).appendTo( row );
				$( "<td></td>" ).text( obj.boss ).appendTo( row );
				$( "<td></td>" ).text( obj.birthday ).appendTo( row );
				$( "#tbl" ).append( row );

			});

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );

		})
		.always(function() {
			//console.log("いつも通る");
		})
		;
	});


});

</script>

<style>
td {
	white-space: nowrap;
}
</style>

</head>
<body>

<input type="text" id="scode" style='width:60px;' value="0001" maxlength="4">
<input class="btn btn-primary mb-3 ml-3" id="btn" name="btn" type="button" value="実行">

<table class="table table-striped table-hover table-responsive">
	<tbody id="tbl">
	</tbody>
</table>


</body>
</html>

$.get の cache: false は、内部で番号が QueryString に与えられます。確認はデベロッパーツールの Network で可能です。

done で php 側のエラー時の処理は未実装ですが、obj.status を typeof でチェック( "undefined" )すればいいでしょう

bootstrap で容易にレスポンシブのテーブルが作成できます。bootstrap では、tbody が必要です。


サーバ側 ( test1.php ) / ロリポップ使用
<?php
error_reporting( E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED );
session_cache_limiter('nocache');
session_start();

header( "Content-Type: application/json; charset=utf-8" );
header( "Access-Control-Allow-Origin: *" );

$dsn = 'mysql:host=mysql145.phy.lolipop.lan;dbname=LAA1234567-contactsphp';
$user = '1234567';
$password = "password";

try {

	// ***************************
	// 接続
	// ***************************
	$dbh = new PDO($dsn, $user, $password);
	$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

}
catch (PDOException $e) {

	print '接続に失敗しました: ' . $e->getMessage();
	exit;

}

$sql = <<<SQL

select * from 社員マスタ where 社員コード <= ?

SQL;

try {

	$stmt = $dbh->prepare($sql);
	$stmt->bindValue(1, $_GET["scode"], PDO::PARAM_STR);
	$stmt->execute();

	$json = [];

	while ($row = $stmt->fetch(PDO::FETCH_BOTH, PDO::FETCH_ORI_NEXT)) {

		$obj = new stdClass;
		$obj->scode = $row["社員コード"];
		$obj->sname = $row["氏名"];

		$obj->furi = $row["フリガナ"];
		$obj->syozoku = $row["所属"];
		$obj->gender = $row["性別"];
		$obj->create = $row["作成日"];
		$obj->update = $row["更新日"];
		$obj->kyuyo = $row["給与"];
		$obj->teate = $row["手当"];
		$obj->boss = $row["管理者"];
		$obj->birthday = $row["生年月日"];

		$json[] = $obj;

	}
	
	print json_encode($json, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

	// ***************************
	// ステートメントの解放
	// ***************************
	$stmt = null;
}
catch (Exception $e) {

	print <<<ERRJSON
	{
		"status" : "error"
	}
ERRJSON;

}

?>

Content-Type: application/json によって、jQuery 側では受けたデータが JSON オブジェクトになります

Access-Control-Allow-Origin: * によって、他のドメインからこの PHP を呼び出す事ができるようになります( そもそも、http から https は呼び出せませんが )

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) は接続より後の処理で try 〜 catch が使えるようにします

json_encode では、テスト中は内容をチェックしやすいようにエスケープせずに整形してあります



posted by lightbox at 2020-06-07 17:44 | jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月23日


jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方

オンラインで実行



画像を背景画像に使用する応用編もありますが、まずは title 属性 で試した後、contents オプションでバルーンをカスタマイズする方法から入るといいと思います。

※ サンプルの contents には、Google Chrome で動作する HTML5 のコンテンツ( カレンダー )を使用しています

jquery.balloon.js ダウンロードページ

設置サンプルコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://winofsql.jp/js/jquery.balloon112.js"></script>

<script>
$(function(){

	$('#target1').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出し端に付く正三角形のサイズ(高さ)
		tipSize: 20,
		// 吹き出しの CSS 設定です
		css: {
			"color": "#0000ff",
			"font-size": "20px",
			"font-weight": "bold",
			"border": "solid 2px #111",
			"padding": "20px",
			"background-color": "#eee",
			"opacity": 1,
		}
	});

	$('#target2').balloon({
		// 吹き出しを右に出すと画面の邪魔にならない場合が多いです
		position: "right",
		// 吹き出し端に付く正三角形のサイズ(高さ)
		tipSize: 20,
		// 吹き出しの CSS 設定です
		css: {
			"height": "270px",
			"opacity": "1",
			"color": "#000",
			"font-size": "16px",
			"border-radius": "10px",
			"border": "solid 2px #A63814",
			"padding": "10px",
			"background-color": "#eee",
			"opacity": 1,
		},
		// CSS の対象となる、吹き出しの内部コンテンツを定義します
		"html": true,
		"contents": '<img src="https://winofsql.jp/image/sab.gif"> ここには HTML を記述できます<br>▼ Google Chrome だと日付コントロール<br><input type="date">'
	});

});
</script>
<pre>


▼ HTML の title 属性内を使用するシンプルなバルーン

<span
	style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
	id="target1"
	 title="日本語表示あいうえお"
>この要素内の title 属性を使う</span>

▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編

<span
	style='display:inline-block;border: solid 1px #ccc;padding: 20px;background-color:#333;color:#fff'
	id="target2"
>contents オプションで HTML をバルーン内に表示</span>


</pre>



▼ HTML の title 属性内を使用するシンプルなバルーン

この要素内の title 属性を使う

▼ プラグイン側で、HTML の コンテンツを文字列を作成する応用編

contents オプションで HTML をバルーン内に表示


関連する記事
jQuery プラグイン jquery.balloon.js で、画像吹き出しを使って吹き出しの中央に文章を配置する




posted by lightbox at 2020-05-23 18:22 | jQuery | このブログの読者になる | 更新情報をチェックする

jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック

このサンプルは、css 用ですが、script でも同じです。bootstrap を組み込むと、たいていなんらかの変化が出るので確認に使用してます。

特定の要素の下に追加、削除を想定しているので id を持つ要素だともっと簡単ですが、ここではそのページの最後の link 要素を使用しています > 『$("link").eq($("link").length-1)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

<script>

$(function(){

	// Bootstrap 削除
	$("#btn-remove").on("click", function(){

		if ( $("#bootstrap").length != 0 ) {
			$("#bootstrap").remove();
		}

	});

	// Bootstrap 適用
	$("#btn-apply").on("click", function(){

		if ( $("#bootstrap").length == 0 ) {

			var link = $("<link id='bootstrap'>");
			link.prop({
				"rel": "stylesheet",
				"href": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
			});

			// 最後の link の後に追加
			var target = $("link").eq($("link").length-1);
			link.insertAfter(target);
		}

	});

});
</script>

<div>
	<p>
		<input type="button" id="btn-remove" value="Bootstrap 削除">
		<input type="button" id="btn-apply" value="Bootstrap 適用">
	</p>
</div>


タグ:jquery Bootstrap
posted by lightbox at 2020-05-23 12:49 | jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月19日


FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する



デモページ1( INPUT要素 type="file" )

デモページ2( ドラッグ & ドロップ )


type="file" でローカルのファイルを指定して、キャラクタセットを指定して読み込みます。ここでは、input 要素に multiple を指定していないのでファイルは一つしか指定できませんが、multiple を指定して追加の処理(cssファイルを読み込んでテーブルの見た目を調整する等)を行うのもいいでしょう。

※ 処理は、multiple を想定して files.length ぶんループしています
※ JavaScript のコレクション処理は、$.each を使う必要があります。

input に accept="text/*" を指定できますが、csv は対象では無かったので使用していません。画像を使う場合には絶対に使用する必要があるでしょう。

ソースコード( INPUT要素 type="file" )
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){
	$("#fire_reader").on("change", function(){

		// テーブルのクリア
		$("#tbl").html("");

		// multiple でなければループは一回だけ
		for( i = 0; i < this.files.length; i++ ) {

			// FileReader は毎回作成(同時に複数のファイルを扱えない)
			var reader = new FileReader();

			// FileReader にデータが読み込まれた時のイベント
			var rows = "";
			var cols = "";
			var tr = null;
			$(reader).on("load", function () {

				// \r を全て削除
				var data = this.result.replace(/\r/g,"");

				// \n で行を分ける
				rows = this.result.split("\n");
				$.each( rows, function( idx, value ){
					// 空行を無視
					if ( value == "" ) {
						return;
					}
					cols = value.split(",");
					// 行を作成
					tr = $("<tr></tr>").appendTo("#tbl");
					$.each( cols, function( idx, value ){
						// TD を追加して、テキストをセット

						switch( idx ) {
							case 7:
							case 8:
								// 数値項目はカンマ編集で右寄せ
								$("<td></td>").appendTo(tr)
									.text(value.number_format())
									.css({"text-align": "right" });
								break;

							default:
								$("<td></td>").appendTo(tr)
									.text(value);
						}

					} )
				} )
			});

			// 上記イベントを発動するための処理( this.files[i] は blob )
			if (this.files[i]) {
				// CSV は通常 shift_jis なので、指定します
				reader.readAsText(this.files[i],"shift_jis");
			}
		}
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});
</script>
</head>
<body>
	<div id="head">
		<input type="file" id="fire_reader" name="fire_reader">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

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


</body>
</html>


ソースコード( ドラッグ & ドロップ )
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
	font-size:16px;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}
#list {
	border-collapse: collapse;
}
#list td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
#file_drop {
	height:30px;
	padding:10px;
	text-align: center;
	margin-bottom:8px;
	border: solid #000000 1px;
}
</style>
</head>
<body>
<div id="file_drop">ここにドロップ</div>
<table id="list"></table>
<script>

$("#file_drop").on("dragenter", function(e){
	e.stopPropagation();
	e.preventDefault();

	$(this).css("background-color","#ddd");

	console.log("dragenter");
	
} );
$("#file_drop").on("dragover", function(e){
	e.stopPropagation();
	e.preventDefault();	

} );
$("#file_drop").on("dragleave", function(e){
	e.stopPropagation();
	e.preventDefault();	

	$(this).css("background-color","#fff");
} );
$("#file_drop").on("drop", function(e){
	e.stopPropagation();
	e.preventDefault();		

	$(this).css("background-color","#fff");

	var files = e.originalEvent.dataTransfer.files;
	for( i = 0; i < files.length; i++ ) {

		// FileReader は毎回作成(同時に複数のファイルを扱えない)
		var reader = new FileReader();

		// FileReader に画像が読み込まれた時のイベント
		var token1 = "";
		var token2 = "";
		var tr = null;
		$(reader).on("load", function () {
			token1 = this.result.split("\n");
			$.each( token1, function( idx, value ){
				// 空行を無視
				if ( value == "" ) {
					return;
				}
				token2 = value.split(",");
				// 行を作成
				tr = $("<tr></tr>").appendTo("#list");
				$.each( token2, function( idx, value ){
					// TD を追加して、テキストをセット
					$("<td></td>").appendTo(tr)
						.text(value);
				} )
			} )
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (files[i]) {
			reader.readAsText(files[i],"shift_jis");
		}
	}
	
} );

$(document).on('dragenter', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('dragover', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('drop', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});


</script>
</body>
</html>


関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存




posted by lightbox at 2020-05-19 21:27 | jQuery | このブログの読者になる | 更新情報をチェックする

2020年05月05日


jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート

実際のアプリケーションの UI 部分のみ取り出して、ブラウザでテストできるように構成しました。特に jQuery の ajax を用いたテンプレートとして流用できると思います。

初回の キー入力部分では、$.get で GET 読み込みを行っています。第二パスである更新時は $.ajax で POST を使用して送信しています。( POST では FormData オブジェクトを使用しています )

更新確認には、bootstrap のダイアログを使用して、一つのフォームで二つのデータ送信がコードとして別々に読めるようになっています。

実際の FORM の中に入力フィールドを配置して、HTML のチェック機能を利用できるようにしています。ブラウザの送信は、preventDefault() でキャンセルして、ajax でデータを送信するスタイルとなっています。

※ submit_type == "pass1" は、第一パス(キーの送信)です
<!DOCTYPE html>
<html>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<style>
body {
	margin: 20px;
}
</style>

<script>
// ▼ このコードのみでのテスト用変数
var submit_type = "pass1";
//var submit_type = "pass2";

$(function(){

	if ( submit_type == "pass1" ) {
		$("[name^='fld_'],#ref_btn").prop('disabled', true);
	}
	if ( submit_type == "pass2" ) {
		$("input[name='key_code']").prop('readonly', true);
		$("[name^='fld_'],#ref_btn").prop('disabled', false);
	}

	// **************************************
	// 確認処理
	// **************************************
	$("#base").on( "submit", function(event){

		// 更新確認ダイアログの表示の為、本来の送信処理はキャンセル
		event.preventDefault();

		// 入力したコードよりデータを取得する
		if ( submit_type == "pass1" ) {

			console.log("key_code");
			console.log(key_code);

			// Ajax で GET する
			$.get({
				url: "app-get.php",
				cache: false,
				data: { "key_code" : $(this).find("input[name='key_code']" ).val() }
			})
			.done(function( data, textStatus ){
				console.log( "status:" + textStatus );
				console.log( "data:" + JSON.stringify(data, null, "    ") );

				if ( data.status == 0 ) {

					// *************************************
					// コード部分を入力不可に設定
					// *************************************
					$("input[name='key_code']").prop('readonly', true);

					// *************************************
					// 明細部分を入力可能に変更
					// *************************************
					$("[name^='fld_'],#ref_btn").prop('disabled', false);

					// 氏名
					$("input[name='fld_name']").val( data.row["氏名"] );
					// フリガナ
					$("input[name='fld_kana']").val( data.row["フリガナ"] );
					// 給与
					$("input[name='fld_kyuyo']").val( data.row["給与"] );

					// 所属
					$("input[name='fld_syozoku']").val( data.row["所属"] );
					$("#ref_syozoku").text( data.row["所属名"] );

					// 性別
					$("select[name='fld_seibetu']").val( data.row["性別"] );
					// 生年月日
					$("input[name='fld_birth']").val( data.row["生年月日"].substring(0,10) );

					// フォーカスを設定
					$("input[name='fld_name']").focus();

					// コードをローカルストレージに保存
					localStorage["code"] = parent.$("input[name='key_code']").val();


					// エラーが無ければ次の処理を行えるようにする
					submit_type = "pass2";

				}

				// 対象データが無い場合
				if ( data.status == 1 ) {
					// エラーメッセージを表示
					toastr.error("入力された社員コードは存在しません");

					// エラー部分にフォーカスをセット
					$("input[name='key_code']").focus();
					// エラーが発生したフィールド内の文字列を選択する
					$("input[name='key_code']").select();

				}

				if ( data.status == -1 ) {
					// エラーメッセージを表示
					toastr.error("システムエラーです : SQL にあやまりがあります");

				}
				
			})
			// 失敗
			.fail(function(jqXHR, textStatus, errorThrown ){
				console.log( "status:" + textStatus );
				console.log( "errorThrown:" + errorThrown );

				// エラーメッセージを表示
				toastr.error("システムエラーです");

			})
			// 常に実行
			.always(function() {
			})
			;

		}


		// Bootstrap の モーダルダイアログの表示
		if ( submit_type == "pass2" ) {
			$("#update_check").modal();
		}

	});

	// **************************************
	// Bootstrap OK ボタン
	// ※ ここで第二パスの送信処理を確定
	// **************************************
	$("#data_update").on("click", function(){

		// Ajax で POSTする

		// 新規送信用オブジェクト
		var formData = new FormData();

		// ファイルオブジェクト
		formData.append("key_code", $("input[name='key_code']").val() );
		formData.append("fld_name", $("input[name='fld_name']").val() );
		formData.append("fld_kana", $("input[name='fld_kana']").val() );
		formData.append("fld_seibetu", $("select[name='fld_seibetu']").val() );
		formData.append("fld_birth", $("input[name='fld_birth']").val() );
		formData.append("fld_kyuyo", $("input[name='fld_kyuyo']").val() );
		formData.append("fld_syozoku", $("input[name='fld_syozoku']").val() );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "app-update.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// *************************************
			// コードを入力可に設定
			// *************************************
			$("input[name='key_code']").prop('readonly', false);

			// *************************************
			// 明細部分を入力不可に変更
			// *************************************
			$("[name^='fld_'],#ref_btn")
				.prop('disabled', true);

			// 氏名のクリア
			$("input[name='fld_name']").val( "" );
			// フリガナのクリア
			$("input[name='fld_kana']").val( "" );
			// 給与のクリア
			$("input[name='fld_kyuyo']").val( "" );

			// 所属のクリア
			$("input[name='fld_syozoku']").val( "" );
			$("#ref_syozoku").text("");

			// 性別の初期化
			$("select[name='fld_seibetu']").val( "0" );
			// 生年月日の初期化
			$("input[name='fld_birth']").val( "" );

			// フォーカスを設定
			$("input[name='key_code']").focus();
			
			// エラーが無ければ次の処理を行えるようにする
			submit_type = "pass1";

			toastr.info("更新されました");


		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "code:" + jqXHR.status );
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		.always(function() {
		})
		;



	});

});
</script>
</head>
<body>
<div style='float:right'>
	<input
		id="action_reset"
		type="button"
		value="リセット"
		class="btn btn-danger mr-3"
		onclick="location.href='syain-upd.html'">

	<input
		id="action_copy"
		type="submit"
		value="送信"
		class="btn btn-primary"
		onclick="$('#action').click();">
</div>

<form id="base" method="post" target="_self" style='clear:both'>
	<div>
		<div class="left">社員コード</div>
		<div class="right">
			<input
				type="text"
				id="key_code"
				name="key_code"
				class="unit"
				value="" required >
		</div>
	</div>
	<div>
		<div class="left">氏名</div>
		<div class="right">
			<input
				type="text"
				id="fld_name"
				name="fld_name"
				class="unit"
				value="" required >
		</div>
	</div>
	<div>
		<div class="left">フリガナ</div>
		<div class="right">
			<input
				type="text"
				id="fld_kana"
				name="fld_kana"
				class="unit"
				value=""  >
		</div>
	</div>
	<div>
		<div class="left">給与</div>
		<div class="right">
			<input
				type="text"
				id="fld_kyuyo"
				name="fld_kyuyo"
				class="unit"
				value="" required maxlength='7' pattern='\d+' >
		</div>
	</div>
	<div>
		<div class="left">所属</div>
		<div class="right">
			<div class="input-group">
				<input
					type="text"
					id="fld_syozoku"
					name="fld_syozoku"
					class="unit"
					value=""
					maxlength="4">
		
			</div>
		</div>
	</div>
 
	<div>
		<div class="left">性別</div>
		<div class="right">
			<select class="unit" name="fld_seibetu" id="fld_seibetu" >
				<option value="0">男性</option>
				<option value="1">女性</option>
			</select>
		</div>
	</div>

	<div>
		<div class="left">生年月日</div>
		<div class="right">
			<div class="input-group">
				<input type="text" id="fld_birth" name="fld_birth">
				<button
					type="button"
					class="btn"
					onclick='$(this).prev().val("");'>×</button>
			</div>
		</div>
	</div>

	<div>
		<input
		id="action"
			type="submit"
			value="送信"
			class="btn btn-primary unit mt-5"
			title="mt5 は margin-top の略で 1〜5">
	</div>

</form>

<div class="modal fade" id="update_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">

			<div class="modal-header">
				<h5 class="modal-title">確認</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			
			<div class="modal-body">
			更新しますか?
			</div>

			<div class="modal-footer">
				<button id="data_update" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
			</div>

		</div>
	</div>
</div>
</body>
</html>


このページのPDF




posted by lightbox at 2020-05-05 10:03 | jQuery | このブログの読者になる | 更新情報をチェックする

2019年05月07日


jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )

このブログで実装しているものを jQuery に置き換えたものです。リンクは、スクロールしていない先頭では表示されませんが、少しスクロールすると表示されます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){

	// ページ右下固定位置のリンク
	var scroll_top = $("<a id='scroll_top'>▲</a>")
	scroll_top.prop("href","javascript:void(0)");
	scroll_top.css({ 
		"position": "fixed",
		"opacity": "0.5",
		"text-decoration": "none",
		"font-size" : "40px",
		"color" : "rgba(255,255,255,0.85)",
		"text-shadow" : "1px 1px 2px #656a6f",
		"right" : "3%",
		"bottom" : "5rem",
		"display" : "none"
	});

	// クリックした時の処理
	scroll_top.on("click", function(){
		window.scroll(0,0);
	});

	// ページの最後に追加
	$("body").append( scroll_top );

	// スクロールが無い先頭部分では表示しない
	$(window).on("scroll",function(){
		var scroll = $("html").scrollTop();
		if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
			$("#scroll_top").css("display","none");
		}
		if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
			$("#scroll_top").css("display","");
		}
	});	

});
</script>







タグ:スクロール
posted by lightbox at 2019-05-07 22:01 | jQuery | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり