SQLの窓 イラストAC フリー素材

2015年11月03日

WEBアプリ詰め合わせ。その1 : jQuery プラグインの mmenu

WEBアプリ詰め合わせ

今年の後期授業用に日々バージョンアップしているものです。内容もバラエティに富んで来たので、各パーツの解説を書いて行こうかと思っています。

jQuery : mmenu プラグイン

『WEBアプリ詰め合わせ』では、F1 キーでメニューが開きます。もう一度、F1 キーか ESC でメニューは閉じます。
( 画面下部分の明細は、IFRAME なので別ウインドウです。フォーカスが明細にある場合は、メニューは開きません )

初回は、ブラウザから見れる右側から現れるメニューです。インターネットで調べたら、日本語でヒットするものは既に古く、現在の仕様とは違うものでした。デフォルトでは、左からメニューが現れるのですが、右側から表示するのに、オリジナル API を読む必要がありました。
<script>
var mmenu_api;

// jQuery 初期処理
$(function() {

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

	mmenu_api = $("#mmenu").data( "mmenu" );
	$("#mmenu_open").on( "click", function(){
		mmenu_api.open();
	} );

	$(".mm_link").on("click",function(){
		mmenu_api.close();
	});

});

ダウンロードしたファイルの中より、二つの all ファイルを使用しています
<script src="common/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="common/jquery.mmenu.all.css">


メニュー部分
<div id="mmenu">
<ul>
	<li style='padding:20px;'>タイトル</li>
	<li><a class="mm_link" href="pdf/pdf_out.php#" target="target_accept">印刷</a></li>
	<li><a class="mm_link" href="#" target="target_accept">メニュー2</a></li>
	<li><a class="mm_link" href="#" target="target_accept">メニュー3</a></li>
</ul>
</div>




タグ:PHP jquery
posted by at 2015-11-03 22:50 | 講師生活 | このブログの読者になる | 更新情報をチェックする