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>
posted by
at 2015-11-03 22:50
|
講師生活
|
|
