Heim > Artikel > Web-Frontend > MUI implementiert den seitlichen Schiebemenüeffekt

MUI implementiert den seitlichen Schiebemenüeffekt

小云云Original: 2018-01-27 09:47:513145Durchsuche

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>

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();

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Instanzmethoden des JavaScript-Chain-of-Responsibility-MustersNächster Artikel：Instanzmethoden des JavaScript-Chain-of-Responsibility-Musters

In Verbindung stehende Artikel

Mehr sehen