▼ リンクが間違っていてたので訂正しました(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 パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
