SQLの窓

2015年11月13日


jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く

リンクが間違っていてたので訂正しました(2015/11/13)
デモページ

デモページ内の薄い灰色の部分は、IFRAME です。
jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応 で、F1 キーのヘルプ機能を抑制したので、かわりに jQuery プラグイン の mmenu でメニューを開くようにしています。( 開いている状態で F1 キーを押すと、メニューは閉じるようになっています )

mmenu は、本体のページに実装されるので、IFRAME の上に重なる形で開いたり閉じたりします。本来は、単一のページ上で使われる為か、メニューのリンクをクリックしてもメニューが閉じないので、後からメニューに対して処理できるように、mmenu の API を取得して使用しますF1 キーで、左側のメニューを開いた後、F2 で右側のメニューを開くと、自動的に左側のメニーは閉じます。これはもともとの動作ですが、通常とは違う形で元のページもスライドします。そして、メニーを閉じると元に戻るのですが、これも全て元々の動作です。

ライブラリは、CDN(cdnjs.com) でホスティングされているので、ダウンロードする事無く実装する事ができます。ダウンロードする場合は、配布ページよりダウンロード可能です。

▼ 配布ページ


ライセンスは、MIT ライセンスが使われていますが、『if you are going to use it in a commercial project, please donate.』とあって、商用の場合は寄付(donationware)をお願いしますとの事です。いわゆる、『カンパウェア』のようです
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<?= $_SESSION["charset"] ?>">
<title>PHPテンプレート</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/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>

<?php
// *************************************
// mmenu 用の CDN ホスディング
// *************************************
?>
<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="css.php">

<link rel="stylesheet" href="iframe_css.php">
<script src="iframe_js.php"></script>

<style>
<?php
// *************************************
// mmenu 用のスタイルのカスタマイズ
// *************************************
?>
.mm-title {
	color: black!important;
}
.mm_user_title {
	padding: 20px!important;
}
</style>
<script>
// mmenu に対しての処理用
var mmenu_api_left;
var mmenu_api_right;

$(function() {

	$("#mmenu_left").mmenu({
		navbar: {
			title: "オプションメニュー 左"
		},
		offCanvas: {
			position  : "left",
			zposition : "front"
		}
	});

	// mmenu に対して処理を行うオブジェクトを取得
	mmenu_api_left = $("#mmenu_left").data( "mmenu" );

	// メニューをクリックした時に、メニューを閉じる
	$(".mm_link_left").on("click",function(){
		mmenu_api_left.close();
	});


	$("#mmenu_right").mmenu({
		navbar: {
			title: "オプションメニュー 右"
		},
		offCanvas: {
			position  : "right",
			zposition : "front"
		}
	});

	// mmenu に対して処理を行うオブジェクトを取得
	mmenu_api_right = $("#mmenu_right").data( "mmenu" );

	// メニューをクリックした時に、メニューを閉じる
	$(".mm_link_right").on("click",function(){
		mmenu_api_right.close();
	});


// F1 キーで HELP を起動させないようにする
// ※ document のかわりに window でも動作するはずです(IFRAME内は window です)
// ※ $( "body" ) は不可です
	$( [document,$( "iframe" ).get(0).contentWindow] )
		// IE 用
		.on( "help", false )
		// IE 以外の一般処理用
		.on( "keydown", function(e){
			if ( e.keyCode == 0x70 ) {

				// F1 キーでメニューを開いたり閉じたりします
				if($('#mmenu_left').is(':visible')) {
					mmenu_api_left.close();
				}
				else {
					mmenu_api_left.open();
				}

				return false;
			}
			if ( e.keyCode == 0x71 ) {

				// F2 キーでメニューを開いたり閉じたりします
				if($('#mmenu_right').is(':visible')) {
					mmenu_api_right.close();
				}
				else {
					mmenu_api_right.open();
				}

				return false;
			}
		});

});

</script>
</head>
<body>
<div id="wrapper">
	<div id="head_unit">
		<form
			method="get"
			target="target_accept"
			action="accept_r.php">

			<input
				type="text" 
				name="tx1">

			<input
				type="button"
				value="リセット"
				style="background-color:white;"
				onclick="location.reload(true);">

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

		</form>
	</div>
	<iframe
		src="accept_r.php"
		id="<?= $_SESSION["iframe_id"] ?>"
		name="target_accept"
		frameborder="0"
	></iframe>
</div>

<div id="mmenu_left">
<ul>
	<li class="mm_user_title">jQuery mmenu</li>
	<li><a class="mm_link_left" href="http://winofsql.jp/if_skeleton/lightbox99/pdf/pdf_out.php" target="target_accept">PDF</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー2</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー3</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー4</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー5</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー6</a></li>
	<li><a class="mm_link_left" href="accept_r.php" target="target_accept">初期ページ</a></li>
</ul>
</div>

<div id="mmenu_right">
<ul>
	<li class="mm_user_title">jQuery mmenu</li>
	<li><a class="mm_link_right" href="http://winofsql.jp/if_skeleton/lightbox99/pdf/pdf_out.php" target="target_accept">PDF</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー2</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー3</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー4</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー5</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー6</a></li>
	<li><a class="mm_link_right" href="accept_r.php" target="target_accept">初期ページ</a></li>
</ul>
</div>

</body>
</html>




【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-13 14:56 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

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

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり