javascript: iframe switchSysBar 左欄打開關閉，兼容各瀏覽器操作（edit) 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no" name="format-detection">
        <meta content="email=no" name="format-detection">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="full-screen" content="yes">
        <meta name="browsermode" content="application">
        <meta name="x5-orientation" content="portrait">	
<title>關閉左側欄</title>
<meta name="author" content="geovindu,Geovin Du,涂聚文"/>
 <script language="javascript" type="text/javascript">
		var screenW = 640, screenH = 480;
		if (parseInt(navigator.appVersion)>3) {
		 screenW = screen.width;
		 screenH = screen.height;
		}
		else if (navigator.appName == "Netscape" 
		    && parseInt(navigator.appVersion)==3
		    && navigator.javaEnabled()
		   ) 
		{
		 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
		 var jScreenSize = jToolkit.getScreenSize();
		 screenW = jScreenSize.width;
		 screenH = jScreenSize.height;
		}
		
		function switchSysBar(){

			if(document.getElementById("frmMenu").style.display == "none"){
				var iswitch = "img/arrow01.png";
				var switchhtml = "<img border=\"0\" Title=\"關閉左側欄\" style=\"cursor:hand;\" src=\"" + iswitch + "\"/>";				
				switchPoint.innerHTML = switchhtml;
                                document.getElementById("switchbar").width="5px";
				document.getElementById("frmMenu").style.display = "";
			}
			else{
				var iswitch = "img/arrow02.png";
				var switchhtml = "<img border=\"0\" Title=\"打開左側欄\" style=\"cursor:hand;\" src=\"" + iswitch + "\"/>";
                 switchPoint.innerHTML = switchhtml;
				document.getElementById("switchbar").width="5px";				
				document.getElementById("frmMenu").style.display = "none";
				document.getElementById("frmMenu").width="180px";
			}
		}
	</script>	
</head>

<body>
	
       <table id="maintable" height="100%" width="100%" cellSpacing="0" cellPadding="0" align="left" border='0'>
	    	<tr>
	    		<td width="100%" height="80" colspan="3" valign="top">
	    			<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="344"><img src="img/index_r1_c1.jpg" style="width:344px; height:53px;" alt=""/></td>
                <td style="text-align: center; padding-top: 17px;"> </td>
                <td width="190"><img src="img/index_r1_c15.jpg" style="width:190px; height:53px;"  alt=""/></td>
                <td width="145"><img src="img/index_r1_c19.jpg" style="width:145px; height:53px;"  alt=""/></td>
              </tr>
            </table>
             <table width="100%" border="0" cellpadding="0" cellspacing="0" background="img/index_r2_c10.jpg">
                <tr>
                    <td id="Tab" style="float:left; background-image:url('img/index_r2_c10.jpg')">
                        <a id="HyperLink1" title="內聯網首頁" href="Default.aspx">主頁</a>    <span id="lblDate">今天日期：2022/2/17 Thursday</span>    <span id="Label1">深圳寫字樓:塗聚文</span></td>
                    <td style="width: 10%"><img src="img/index_r2_c19.jpg" style="width:145px; height:37px;" alt="" /></td>
                </tr>
            </table>
	    		</td>
	    	</tr>
	       	<tr valign="top">
	         	<td id="frmMenu" style="background-color:#faecd1;width:40px;height:auto;"  noWrap>
		         	<iframe name="navigate" src="menu.html" style="HEIGHT: 100%; VISIBILITY: inherit; Z-INDEX: 2"frameborder="0" scrolling="yes" marginwidth="0"></iframe>
	         	</td>
	         	<td id="switchbar" style="background-color:#faecd1;width:0.1px; border-right:#FF0000 dotted 0.1px;" valign="middle">
		         	<a onclick="javascript:switchSysBar();" id="switchPoint">
		         		<img id="Img1" style="cursor:hand;" src="img/arrow01.png" alt="關閉左側欄" title="關閉左側欄"/>
		         	</a>
				</td>
	         	<td valign="top" width="100%">	         	  
	         		<iframe id="L_WorkArea"  name="L_WorkArea" src="main.html"  frameborder="0" scrolling="yes" marginwidth="0" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 2"></iframe>
				</td>
	       	</tr>
	       	<tr>
	    		<td width="100%" height="20" colspan="3" valign="top">
	    		</td>
	    	</tr>
		</table>
	
</body>
</html>

　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple menu left</title>

    <link rel="stylesheet" href="bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/BootSideMenu.css">

    <!--[if lt IE 9]>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .user {
            padding: 5px;
            margin-bottom: 5px;
            text-align: center;
        }
    </style>
</head>
<body>


<div class="container">

    <!-- Static navbar -->
    <nav class="navbar navbar-default" w3-include-html="examples/inc/navbar.html"></nav>
    <!-- /Static navbar -->

    <!-- Jumbotron -->
    <div class="jumbotron" w3-include-html="examples/inc/jumbotron.html"></div>
    <!-- /Jumbotron -->

    <!--Example content-->
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading"><span class="fa fa-jsfiddle"></span> How to</div>
                <div class="panel-body">
                    <p class="lead">The menu is on the left.</p>
                    <pre>$(document).ready(function () {
    $('#test').BootSideMenu({
        side: "left"
    });
});</pre>
                    <p class="lead"> By default it remembers its last status and push the body while it slide. To
                        disable these features use the options:</p>
                    <pre>remember:false</pre>
                    <pre>pushBody:false</pre>

                    <p>Watch this changes in the <a href="examples/2-simple-right.html">next example</a>.</p>
                </div>
            </div>
        </div>

        <!--Right col-->
        <div class="col-md-4">
            <div w3-include-html="main.html"></div>
            <div w3-include-html="examples/inc/example-list.html"></div>
        </div>
        <!--/Right col-->

    </div>
</div>

<!--Test -->
<div id="geovindu" w3-include-html="menu.html"></div>
<!--/Test -->

<script src="js/w3.js"></script>
<script src="js/jquery-2.2.4.min.js" crossorigin="anonymous"></script>
<script src="bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="js/BootSideMenu.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        w3.includeHTML(init);
    });
    //geovindu Geovin Du
    function init() {
        $('#geovindu').BootSideMenu({
            side: "left"
        });
    }
</script>
</body>
</html>

　　

https://www.jqueryscript.net/demo/Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-BootSideMenu/

 

https://github.com/twbs/icons
https://themes.getbootstrap.com/
https://github.com/twbs
https://getbootstrap.com/

/*
IE
Edge*
Firefox
Chrome
Safari
Opera
Safari on iOS
Opera Mini*
Android Browser*
Opera Mobile*
Chrome for Android
Firefox for Android
UC Browser for Android
Samsung Internet
QQ Browser
Baidu Browser
KaiOS Browse

*/

 

 

 https://www.microsoft.com/zh-cn/software-download/windows10  Windows 10 2021 年 11 月更新

 

　

posted @ 2022-02-17 12:06  ®Geovin Du Dream Park™  阅读(116)  评论(0)  编辑  收藏  举报