SQLの窓

2016年10月02日


jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート

2019/10/02 : テンプレートを変更しました

1) toastr.js を追加し、それに伴ってメッセージ表示をメソッド化して options に追加しました。

2) iPhone5 のサイズに合わせて、入力フィールドのタイトル幅を 90px に変更しました。
2019/10/01 : テンプレートを変更しました

1) HTML のチェックを使用できるように、form の submit イベントで処理した上で、submit しないようにしています。

2) options に、画面コントロール用の共通関数を追加しました

3) スマホ画面でちらつかないように、初期画面を非表示にして画面作成完了後に表示するようにしました

4) JavaScript のモバイルチェックを追加し、スマホで画面が隠れるフォーカス処理はしないようにしました。

5) ソースコードのインデントを減らし、可読性を上げる為に、エラーチェック等ではすぐ脱出するようにして、else をなくすようにしました。
デモページ ※ 0001 のデータが存在しています ▼ 以下のテンプレートのデモページでログインして、更新以外をテストできます jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート このログインユーザは Database のルールで更新できないようにしています。この設定は、コンソールから直接 check ツリーのデータを変更する事によって、更新可能へと変更できます。
{
  "rules": {
      ".read": "root.child('check').hasChild(auth.uid)",
      ".write": "root.child('check').child(auth.uid).child('isAdmin').val() == true"
    }
}



テンプレートの構造と機能の概要を印刷する PDF

ソースコード

<!DOCTYPE html>
<html lang="ja">
<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">
<title>2会話・テンプレート(新規)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link id="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.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/css/jquery.mmenu.all.css">
<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>

<link rel="stylesheet" href="../std/mmenu.css">
<link rel="stylesheet" href="../std/basic.css">

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyD9vub84g_ckSvglTzMdLjXe1TV6WC8LCo",
    authDomain: "lightbox-1c915.firebaseapp.com",
    databaseURL: "https://lightbox-1c915.firebaseio.com",
    storageBucket: "lightbox-1c915.appspot.com",
    messagingSenderId: "694762121907"
  };
  firebase.initializeApp(config);
</script>

<style>
.fields {
	width: 90px;
	font-size: 12px;
	vertical-align: middle!important;
}

legend {
	font-size: 18px;
	padding-left: 6px;
}
</style>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options={"closeButton":false,"debug":false,"newestOnTop":false,"progressBar":false,"positionClass":"toast-bottom-center","preventDuplicates":false,"onclick":null,"showDuration":"300","hideDuration":"1000","timeOut":"3000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"}
if ( !$.isMobile ) {
	toastr.options.positionClass = "toast-top-center";
}
var options = {
	key : { title :"キー項目", css : { width : "80px" }, attr : { pattern : "[0-9]+", type: "tel" } },
	row2 : { title : "明細A"  },
	row3 : { title : "明細B"  },
	row4 : { title : "明細C", attr : { pattern : "[0-9]+", type: "tel" }  },
	row5 : { title : "選択", css : { height : "40px" } },
	row6 : { title : "チェック"  },
	row_last : { title :"メッセージ" },
	erow1 : { title : "code"  },
	erow2 : { title : "message"  },

	curbtn: "",
	pass1 : function(){
		// 第一会話へ変更
		$("#form_head").prop("disabled", false );
		$("#form_body").prop("disabled", true );
	},
	pass2 : function(){
		// 第二会話へ変更
		$("#form_head").prop("disabled", true );
		$("#form_body").prop("disabled", false );
	},
	clear : function(){
		// 全てクリア
		$(".fields").next().find("input[type='text'],input[type='tel']").val("");
		$(".fields").next().find("input[type='checkbox']").prop("checked", false);
		$(".fields").next().find("select").prop("selectedIndex", 0);
	},
	error : function(message){
		$("#row_last").next().text( message );
		toastr.error(message);
	},
	info : function(message){
		$("#row_last").next().text( message );
		toastr.success(message);
	}
};

$(function(){

	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		if ( options[ $(this).prop("id") ] ) {
			$(this).text( options[ $(this).prop("id") ].title );
			// 個別 css
			if ( options[ $(this).prop("id") ].css ) {
				$(this).next().find("input,select").css( options[ $(this).prop("id") ].css );
			}
			// 入力チェック用属性
			if ( options[ $(this).prop("id") ].attr ) {
				$(this).next().find("input,select").attr( options[ $(this).prop("id") ].attr );
			}
		}
		$(this).next().find("input,select").addClass("form-control");
	});
	// スマホでロード時の処理のチラつき防止用
	$("#wrapper").css("visibility","visible"); 

	// 第一会話
	options.pass1();

	// 初期フォーカス
	setTimeout( function(){$('#key_fld').focus();}, 100 );

	// 確認処理
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 確認ボタン
		if ( options.curbtn == "button_head" ) {

			// **************************************
			// 第一会話入力チェック
			// **************************************
			if ( $("#key_fld").val().trim() == "" ) {
				options.error( options['key'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );
				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', 
				function(snapshot) {

					if ( snapshot.exists() ) {
						options.error( "データが既に存在します" );
						return;
					}

					// 第二会話へ変更
					options.pass2();

					// フォーカス
					if ( !$.isMobile ) {
						$("#row2_fld").focus();
					}

				},
				function(error){
					$(".result").each(function(){
						$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
					});
					options.error( "Firebase エラーです" );

					console.dir(error);
				}
			);

		}

		// 更新ボタン
		if ( options.curbtn == "button_body" ) {

			// **************************************
			// 第ニ会話入力チェック
			// **************************************
			if ( $("#row2_fld").val().trim() == "" ) {
				options.error( options['row2'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );

				alert("第一会話へ移動します");

				// 第一会話へ変更
				options.pass1();

				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', function(snapshot) {

				if ( snapshot.exists() ) {
					options.error( "データが既に存在します" );

					alert("第一会話へ移動します");

					// 第一会話へ変更
					options.pass1();

					return;
				}

				if ( !confirm("更新してよろしいですか?") ) {
					return false;
				}

				// **************************************
				// 更新
				// **************************************
				// 更新用 JSON
				var update_data = {
					"code" : $("#key_fld").val(),
					"name" : $("#row2_fld").val(),
					"furi" : $("#row3_fld").val()
				}
				myFirebaseRef.set(update_data).then(
					function(){

						options.info( "更新に成功しました" );

						// 第一会話へ変更
						options.pass1();

						// 全てクリア
						options.clear();

						// フォーカス
						$("#key_fld").focus();

					},
					function(error){
						$(".result").each(function(){
							$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
						});
						options.error( "Firebase エラーです" );

						console.dir(error);
					}
				);

			});

		}

	} );

	// **************************************
	// mmenu
	// **************************************
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});


});

</script>
</head>
<body>

<div id="wrapper">
<script>
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css( "visibility", "hidden" );
</script>

	<div id="head">
		<a id="hamburger" href="#mmenu_left">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
		<div id="title">2会話・テンプレート(新規)</div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<fieldset id="form_head">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="key"></td>
						<td>
							<div class="input-group">
								<input type="text" id="key_fld" name="key_fld">
								<button id="button_head" type="submit" class="btn btn-primary btn-sm m-l" onclick="options.curbtn=this.id">確認</button>
							</div>
						</td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset id="form_body">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input type="text" id="row2_fld" name="row2_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row3"></td>
						<td>
							<input type="text" id="row3_fld" name="row3_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row4"></td>
						<td>
							<input type="text" id="row4_fld" name="row4_fld">
						</td>
					</tr>

					<tr>
						<td class="fields" id="row5"></td>
						<td>
							<select name="row5_fld" id="row5_fld">
								<option value="27">大阪</option>
								<option value="26">京都</option>
								<option value="29">奈良</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="fields" id="row6"></td>
						<td>
							<div class="input-group">
								<label for="row6_fld">有り無し</label>
								<input
									type="checkbox"
									id="row6_fld"
									name="row6_fld">
							</div>
						</td>
					</tr>

					<tr>
						<td></td>
						<td>
							<button id="button_body" type="submit" class="btn btn-primary btn-sm" onclick="options.curbtn=this.id">更新</button>
							<button
								type="button"
								class="btn btn-primary btn-warning btn-sm m-l-lg"
								value="キャンセル"
								 onclick='location="index.php"'>キャンセル</button>
						</td>
					</tr>


					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset>
				<legend>Firebase エラー</legend>
				<table class="table table-condensed">

					<tr><td class="fields result error" id="erow1"></td><td></td></tr>
					<tr><td class="fields result error" id="erow2"></td><td></td></tr>

				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	ようこそ jQuery + Bootstrap(css) + mmenu + Firebase	</div>

</div>


<div id="mmenu_left">
<ul>
	<li class="mm_user_title">ページ選択</li>
	<li><a class="mm_link_left" href="#" onclick="location='index.php';void(0)">リセット</a></li>
	<li><a class="mm_link_left" href="https://lightbox.sakura.ne.jp/demo/firebase/static/pass1/index.php">ログイン</a></li>
	<li><a class="mm_link_left" href="#" onclick="firebase.auth().signOut()">ログアウト</a></li>
	<li><a class="mm_link_left" 
			href="http://getbootstrap.com/css/"
			onclick="location='index.php';void(0)"
			target="_blank"
		>Bootstrap(css)</a></li>
	<li><a class="mm_link_left"
			href="http://api.jquery.com/"
			onclick="location='index.php';void(0)"
			target="_blank"
		>jQuery ドキュメント</a></li>
</ul>
</div>


</body>
</html>


関連する記事

jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート



【Googleの最新記事】
posted by lightbox at 2016-10-02 22:31 | Google | このブログの読者になる | 更新情報をチェックする
container 終わり

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

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