npm - @oxiaom/adoremix-linux-x64 - Versions diffs - 1.0.0 - Mend

@oxiaom/adoremix-linux-x64 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/native/etc/docroot/bangzhu/examples/offcanvas-drag-left-plus-menu.html ADDED Viewed

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Hello MUI</title>
+		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black">
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<style>
+			body,.mui-content {
+				background-color: #333;
+				color: #fff;
+			}
+			header.mui-bar{
+				display: none;
+			}
+			.mui-bar-nav~.mui-content{
+				padding: 0;
+			}
+			.title{
+			  	margin: 35px 15px 10px;
+			  }
+			  .title+.content{
+			  	margin: 10px 15px 35px;
+			  	color: #bbb;
+			  	text-indent: 1em;
+			  	font-size: 14px;
+			  	line-height: 24px;
+			  }
+			  .mui-table-view{
+			  	margin-bottom: 35px;
+			  }
+		</style>
+	</head>
+	<body>
+		<div class="mui-content">
+			<div class="title">侧滑导航</div>
+				<div class="content">
+					这是侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
+					1.在手机屏幕任意位置快速向右滑动(swipe)；
+					2.点击本侧滑菜单页之外的任意位置;
+					3.点击如下红色按钮；
+					<span class="android-only">
+						4.Android手机按back键；5.Android手机按menu键
+					</span>。
+					<p style="margin: 10px 15px;">
+						<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
+					</p>
+				</div>
+				<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
+				<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 1</a>
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 2</a>
+					</li>
+					<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 3</a>
+					</li>
+						<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 4</a>
+					</li>
+						<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 5</a>
+					</li>
+						<li class="mui-table-view-cell">
+						<a class="mui-navigate-right">Item 6</a>
+					</li>
+				</ul>
+		</div>
+	<script src="../js/mui.min.js"></script>
+	<script type="text/javascript" charset="utf-8">
+		//关闭back、menu按键监听，这样侧滑主界面会自动获得back和memu的按键事件，仅在主界面处理按键逻辑即可；
+		mui.init({
+			keyEventBind: {
+				backbutton: false,
+				menubutton: false
+			}
+		});
+		var main = null;
+		mui.plusReady(function () {
+			main = plus.webview.currentWebview().opener();
+		})
+		function closeMenu () {
+			mui.fire(main,"menu:swiperight");
+		}
+		//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
+		window.addEventListener("swiperight",closeMenu);
+		document.getElementById("close-btn").addEventListener('tap',closeMenu);
+	</script>
+</body>
+</html>

package/native/etc/docroot/bangzhu/examples/offcanvas-drag-left.html ADDED Viewed

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Hello MUI</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black">
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<style>
+			html,
+			body {
+				background-color: #efeff4;
+			}
+			p {
+				text-indent: 22px;
+			}
+			span.mui-icon {
+				font-size: 14px;
+				color: #007aff;
+				margin-left: -15px;
+				padding-right: 10px;
+			}
+			.mui-off-canvas-right {
+				color: #fff;
+			}
+			.title {
+				margin: 35px 15px 10px;
+			}
+			.title+.content {
+				margin: 10px 15px 35px;
+				color: #bbb;
+				text-indent: 1em;
+				font-size: 14px;
+				line-height: 24px;
+			}
+			input {
+				color: #000;
+			}
+		</style>
+	</head>
+	<body>
+		<!--侧滑菜单容器-->
+		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
+			<!--菜单部分-->
+			<aside id="offCanvasSide" class="mui-off-canvas-right">
+				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
+					<div class="mui-scroll">
+						<div class="title">侧滑导航</div>
+						<div class="content">
+							这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
+							<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
+							</span>。
+							<p style="margin: 10px 15px;">
+								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
+							</p>
+						</div>
+						<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
+						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+									Item 1
+								</a>
+							</li>
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+									Item 2
+								</a>
+							</li>
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+									Item 3
+								</a>
+							</li>
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+									Item 4
+								</a>
+							</li>
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+									Item 5
+								</a>
+							</li>
+							<li class="mui-table-view-cell">
+								<a class="mui-navigate-right">
+								Item 6
+							</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</aside>
+			<div class="mui-inner-wrap">
+				<header class="mui-bar mui-bar-nav">
+					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
+					<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
+					<h1 class="mui-title">左滑导航</h1>
+				</header>
+				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
+					<div class="mui-scroll">
+						<div class="mui-content-padded">
+							<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向左拖动； 2、点击页面右上角的
+								<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
+								<span class="android-only">4、Android手机按menu键；</span>
+							</p>
+							<p style="padding: 5px 20px;margin-bottom: 5px;">
+								<button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">
+									显示侧滑菜单
+								</button>
+							</p>
+							<p>侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>
+						</div>
+						<form class="mui-input-group" style="margin-bottom: 15px;">
+							<div class="mui-input-row mui-radio">
+								<label>主界面移动、菜单不动</label>
+								<input name="style" type="radio" checked="" value="main-move">
+							</div>
+							<div class="mui-input-row mui-radio">
+								<label>主界面不动、菜单移动</label>
+								<input name="style" type="radio" value="menu-move">
+							</div>
+							<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
+								<label>整体移动</label>
+								<input name="style" type="radio" value="all-move">
+							</div>
+							<div class="mui-input-row mui-radio">
+								<label>缩放式侧滑（类手机QQ）</label>
+								<input name="style" type="radio" value="main-move-scalable">
+							</div>
+						</form>
+					</div>
+				</div>
+				<!-- off-canvas backdrop -->
+				<div class="mui-off-canvas-backdrop"></div>
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script>
+			mui.init({
+				swipeBack: false,
+			});
+			 //侧滑容器父节点
+			var offCanvasWrapper = mui('#offCanvasWrapper');
+			 //主界面容器
+			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
+			 //菜单容器
+			var offCanvasSide = document.getElementById("offCanvasSide");
+			 //Android暂不支持整体移动动画
+			if (!mui.os.android) {
+				document.getElementById("move-togger").classList.remove('mui-hidden');
+				var spans = document.querySelectorAll('.android-only');
+				for (var i = 0, len = spans.length; i < len; i++) {
+					spans[i].style.display = "none";
+				}
+			}
+			 //移动效果是否为整体移动
+			var moveTogether = false;
+			 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
+			var classList = offCanvasWrapper[0].classList;
+			 //变换侧滑动画移动效果；
+			mui('.mui-input-group').on('change', 'input', function() {
+				if (this.checked) {
+					offCanvasSide.classList.remove('mui-transitioning');
+					offCanvasSide.setAttribute('style', '');
+					classList.remove('mui-slide-in');
+					classList.remove('mui-scalable');
+					switch (this.value) {
+						case 'main-move':
+							if (moveTogether) {
+								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
+								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
+								moveTogether = false;
+							}
+							break;
+						case 'main-move-scalable':
+							if (moveTogether) {
+								//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
+								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
+							}
+							classList.add('mui-scalable');
+							break;
+						case 'menu-move':
+							classList.add('mui-slide-in');
+							break;
+						case 'all-move':
+							moveTogether = true;
+							//整体滑动时，侧滑菜单在inner-wrap内
+							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
+							break;
+					}
+					offCanvasWrapper.offCanvas().refresh();
+				}
+			});
+			document.getElementById('offCanvasShow').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('show');
+			});
+			document.getElementById('offCanvasHide').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('close');
+			});
+			 //主界面和侧滑菜单界面均支持区域滚动；
+			mui('#offCanvasSideScroll').scroll();
+			mui('#offCanvasContentScroll').scroll();
+			 //实现ios平台的侧滑关闭页面；
+			if (mui.os.plus && mui.os.ios) {
+				offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
+					plus.webview.currentWebview().setStyle({
+						'popGesture': 'none'
+					});
+				});
+				offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
+					plus.webview.currentWebview().setStyle({
+						'popGesture': 'close'
+					});
+				});
+			}
+		</script>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/offcanvas-drag-right-plus-main.html ADDED Viewed

@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Hello MUI</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
+		<meta name="apple-mobile-web-app-capable" content="yes">
+		<meta name="apple-mobile-web-app-status-bar-style" content="black">
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<style>
+			html,
+			body {
+				background-color: #efeff4;
+			}
+			p {
+				text-indent: 22px;
+			}
+			span.mui-icon {
+				font-size: 14px;
+				color: #007aff;
+				margin-left: -15px;
+				padding-right: 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
+			<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
+			<h1 class="mui-title">off canvas（侧滑导航）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
+					优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
+					当前页面为主界面，你可以在主界面放置任何内容；
+					 打开侧滑菜单有多种方式：
+					 1、在当前页面快速向右滑动（swipe）；
+					 2、点击页面左上角的
+					<span class="mui-icon mui-icon-bars"></span> 图标；
+					 3、通过JS API触发（例如点击如下蓝色按钮体验）；
+					 <span class="android-only">4、Android手机按menu键；</span>
+				</p>
+				<p style="padding: 5px 20px;margin-bottom: 5px;">
+					<button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">
+						显示侧滑菜单
+					</button>
+				</p>
+				<p >侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>
+			</div>
+			<form class="mui-input-group" style="margin-bottom: 15px;">
+				<div class="mui-input-row mui-radio">
+					<label>主界面移动、菜单不动</label>
+					<input name="style" type="radio" checked="" value="main-move">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>主界面不动、菜单移动</label>
+					<input name="style" type="radio" value="menu-move">
+				</div>
+				<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
+					<label>整体移动</label>
+					<input name="style" type="radio" value="all-move">
+				</div>
+			</form>
+		</div>
+	</body>
+	<script src="../js/mui.min.js"></script>
+	<script>
+		var main,menu, mask = mui.createMask(_closeMenu);
+		var showMenu = false,mode = 'main-move';
+		if (!mui.os.android) {
+			//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
+			document.getElementById("move-togger").classList.remove('mui-hidden');
+			var spans = document.querySelectorAll('.android-only');
+			for (var i=0,len=spans.length;i<len;i++) {
+				spans[i].style.display = "none";
+			}
+		}
+		mui.init({
+			swipeBack: false,
+			beforeback: back
+		});
+		function back() {
+			if (showMenu) {
+				//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
+				closeMenu();
+				return false;
+			} else {
+				//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
+				menu.close('none');
+				return true;
+			}
+		}
+		//plusReady事件后，自动创建menu窗口；
+		mui.plusReady(function() {
+			main = plus.webview.currentWebview();
+			//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
+			setTimeout(function () {
+				//侧滑菜单默认隐藏，这样可以节省内存；
+				menu = mui.preload({
+					id: 'offcanvas-drag-right-plus-menu',
+					url: 'offcanvas-drag-right-plus-menu.html',
+					styles: {
+						left: 0,
+						width: '70%',
+						zindex: 9997
+					}
+				});
+			},300);
+		});
+		/**
+		 * 显示菜单菜单
+		 */
+		function openMenu() {
+			if (!showMenu) {
+				//侧滑菜单处于隐藏状态，则立即显示出来；
+				//显示完毕后，根据不同动画效果移动窗体；
+				menu.show('none', 0, function() {
+					switch (mode){
+						case 'main-move':
+							//主窗体开始侧滑；
+							main.setStyle({
+								left: '70%',
+								transition: {
+									duration: 150
+								}
+							});
+							break;
+						case 'menu-move':
+							menu.setStyle({
+								left: '0%',
+								transition: {
+									duration: 150
+								}
+							});
+							break;
+						case 'all-move':
+							main.setStyle({
+								left: '70%',
+								transition: {
+									duration: 150
+								}
+							});
+							menu.setStyle({
+								left: '0%',
+								transition: {
+									duration: 150
+								}
+							});
+							break;
+					}
+				});
+				//显示遮罩
+				mask.show();
+				showMenu = true;
+			}
+		}
+		/**
+		 * 关闭侧滑菜单
+		 */
+		function closeMenu () {
+			_closeMenu();
+			//关闭遮罩
+			mask.close();
+		}
+		/**
+		 * 关闭侧滑菜单（业务部分）
+		 */
+		function _closeMenu() {
+			if (showMenu) {
+				//关闭遮罩；
+				switch (mode){
+					case 'main-move':
+						//主窗体开始侧滑；
+						main.setStyle({
+							left: '0',
+							transition: {
+								duration: 150
+							}
+						});
+						break;
+					case 'menu-move':
+						//主窗体开始侧滑；
+						menu.setStyle({
+							left: '-70%',
+							transition: {
+								duration: 150
+							}
+						});
+						break;
+					case 'all-move':
+						//主窗体开始侧滑；
+						main.setStyle({
+							left: '0',
+							transition: {
+								duration: 150
+							}
+						});
+						//menu页面同时移动
+						menu.setStyle({
+							left: '-70%',
+							transition: {
+								duration: 150
+							}
+						});
+						break;
+				}
+				//等窗体动画结束后，隐藏菜单webview，节省资源；
+				setTimeout(function() {
+					menu.hide();
+				}, 200);
+				//改变标志位
+				showMenu = false;
+			}
+		}
+		//变换侧滑动画移动效果；
+		mui('.mui-input-group').on('change', 'input', function() {
+			if (this.checked) {
+				switch (this.value) {
+					case 'main-move':
+						//仅主窗口移动的时候，menu页面的zindex值要低一点；
+						menu.setStyle({left:'0',zindex:9997});
+						if(mode=='all-move'){
+							menu.setStyle({
+								left: '0%'
+							});
+						}
+						mode = 'main-move';
+						break;
+					case 'menu-move':
+						menu.setStyle({left:'-70%',zindex:9999});
+						if(mode=='all-move'){
+							menu.setStyle({
+								left: '0%'
+							});
+						}
+						mode = 'menu-move';
+						break;
+					case 'all-move':
+						//切换为整体移动
+						//首先改变移动标志
+						slideTogether = true;
+						//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
+						menu.setStyle({
+							left: '-70%'
+						});
+						mode = 'all-move';
+						break;
+				}
+			}
+		});
+		 //点击左上角图标，打开侧滑菜单；
+		document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
+		document.getElementById("show-btn").addEventListener('tap',openMenu);
+		 //在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
+		 //故，在dragleft，dragright中preventDefault
+		window.addEventListener('dragright', function(e) {
+			e.detail.gesture.preventDefault();
+		});
+		window.addEventListener('dragleft', function(e) {
+			e.detail.gesture.preventDefault();
+		});
+		 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
+		window.addEventListener("swiperight", openMenu);
+		 //主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
+		window.addEventListener("swipeleft", closeMenu);
+		 //menu页面向左滑动，关闭菜单；
+		window.addEventListener("menu:swipeleft", closeMenu);
+		//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
+		mui.menu = function() {
+			if (showMenu) {
+				closeMenu();
+			} else {
+				openMenu();
+			}
+		}
+	</script>
+</html>