MUI implementiert den seitlichen Schiebemenüeffekt-js-Tutorial-php.cn

MUI implementiert den seitlichen Schiebemenüeffekt

小云云

Freigeben： 2018-01-27 09:47:51

Original

3176 Leute haben es durchsucht

Die Einführung des seitlichen Schiebemenüs im MUI-Dokument erklärt nicht, wie das seitliche Schieben implementiert wird. Das seitliche Schiebemenü der MUI verfügt standardmäßig nicht über die Auf- und Ab-Schiebefunktion und muss aktiviert werden. Dieser Artikel stellt Ihnen hauptsächlich eine MUI-Methode zum Implementieren eines seitlich verschiebbaren Menüs und seinen Hauptteil zum Hoch- und Runterschieben vor. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Fügen Sie zunächst die ID zum Element mit class="mui-scroll-wrapper" hinzu:

<!-- 侧滑导航根容器 -->
<p class="mui-off-canvas-wrap mui-draggable">
 <!-- 菜单容器 -->
 <aside class="mui-off-canvas-left">
  <p id="offCanvasSideScroll" class="mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 菜单具体展示内容 -->
    ...
   </p>
  </p>
 </aside>
 <!-- 主页面容器 -->
 <p class="mui-inner-wrap">
  <!-- 主页面标题 -->
  <header class="mui-bar mui-bar-nav">
   <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
   <h1 class="mui-title">标题</h1>
  </header>
  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
   <p class="mui-scroll">
    <!-- 主界面具体展示内容 -->
    ...
   </p>
  </p> 
 </p>
</p>

Nach dem Login kopieren

Wie aus dem obigen Beispiel ersichtlich ist, ist das Seitengleiten Menü und die Hauptteil-IDs wurden hinzugefügt.

sind: offCanvasSideScroll, offCanvasContentScroll

2. Zweitens aktivieren Sie es in JS:

mui('#offCanvasSideScroll').scroll(); 
mui('#offCanvasContentScroll').scroll();

Nach dem Login kopieren

Jetzt können Sie nach dem Überschreiten der Höhe nach unten rutschen. Beachten Sie, dass es über der Höhe liegt! Genau wie bei einem Browser gibt es keine Schiebefunktion, wenn der „spezifische Anzeigeinhalt der Hauptoberfläche“ den Umfang nicht überschreitet.

MUI: MUI-Schiebemenü.

Vollständiger Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <script src="http://dev.dcloud.net.cn/mui/dist/js/mui.min.js"></script>
  <link href="http://dev.dcloud.net.cn/mui/dist/css/mui.min.css" rel="external nofollow" rel="stylesheet"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
  	body{
  		background-color: #000000;
  	}
  	.mui-off-canvas-wrap{
  		max-width: 720px;
  		margin: 0 auto;
  	}
  </style>
</head>
<body>
	<!-- 侧滑导航根容器 --> 
	<p class="mui-off-canvas-wrap mui-draggable"> 
	 <!-- 菜单容器 --> 
	 <aside class="mui-off-canvas-left"> 
	  <p id="offCanvasSideScroll" class="mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 菜单具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p> 
	 </aside> 
	 <!-- 主页面容器 --> 
	 <p class="mui-inner-wrap"> 
	  <!-- 主页面标题 --> 
	  <header class="mui-bar mui-bar-nav"> 
	   <a id="left-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> 
	   <h1 class="mui-title">标题</h1> 
	  </header> 
	  <p id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> 
	   <p class="mui-scroll"> 
	    <!-- 主界面具体展示内容 --> 
	    <p style="height:1000px">
	    	
	    </p>
	   </p> 
	  </p>  
	 </p> 
	</p>
	
	<script type="text/javascript" charset="utf-8">
		$("#left-menu").on('tap', function (event) {
			mui('.mui-off-canvas-wrap').offCanvas('show');
		});
		
		window.onload = function(){
	   	mui('#offCanvasSideScroll').scroll(); 
			mui('#offCanvasContentScroll').scroll(); 
		}
  </script>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

CSS3-simuliertes Seitenschiebemenü_html/css_WEB-ITnose

CSS3 mobiles seitliches Schiebemenü 4 Arten von Schiebemenü-Spezialeffekten_html/css_WEB-ITnose

CSS3-Nachahmung SF Android-Version des seitlichen Schiebemenüs_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonMUI implementiert den seitlichen Schiebemenüeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!