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

@oxiaom/adoremix-linux-arm 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/modals.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!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">
+		<script src="../js/mui.min.js"></script>
+		<style>
+			html,body {
+				background-color: #efeff4;
+			}
+		</style>
+		<script>
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
+		</script>
+	</head>
+	<body>
+		<div class="mui-content">
+			<header class="mui-bar mui-bar-nav">
+				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+				<h1 class="mui-title">modal（弹出窗口）</h1>
+			</header>
+			<div class="mui-content">
+				<a href="#modal" class="mui-btn mui-btn-primary mui-btn-block">Click</a>
+			</div>
+			<div id="modal" class="mui-modal">
+				<header class="mui-bar mui-bar-nav">
+					<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
+					<h1 class="mui-title">Modal</h1>
+				</header>
+				<div class="mui-content" style="height: 100%;">
+					<p class="mui-content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/nav-nativeObj.html ADDED Viewed

@@ -0,0 +1,45 @@
+<!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;
+			}
+			.mui-bar .mui-pull-left .mui-icon {
+				padding-right: 5px;
+				font-size: 28px;
+			}
+			.mui-bar .mui-btn {
+				font-weight: normal;
+				font-size: 17px;
+			}
+			.mui-bar .mui-btn-link {
+				top: 1px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="mui-content">
+			<p style="margin: 35px 15px;">这个页面的标题栏是使用nativeObj绘制的，开发者可以使用nativeObj绘制图片、文字、背景色、线条等。</p>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript">
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
+		</script>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/nav.html ADDED Viewed

@@ -0,0 +1,135 @@
+<!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;
+			}
+			.mui-bar .mui-pull-left .mui-icon {
+				padding-right: 5px;
+				font-size: 28px;
+			}
+			.mui-bar .mui-btn {
+				font-weight: normal;
+				font-size: 17px;
+			}
+			.mui-bar .mui-btn-link {
+				top: 1px;
+			}
+		</style>
+	</head>
+	<body>
+		<header id="header" class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">导航栏</h1>
+		</header>
+		<div class="mui-content">
+			<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面， 你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；
+			</p>
+			<h5 class="mui-content-padded">左侧显示内容</h5>
+			<form class="mui-input-group">
+				<div class="mui-input-row mui-radio">
+					<label>不显示</label>
+					<input name="style" type="radio" value="left-none">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>仅图标</label>
+					<input name="style" type="radio" checked value="left-icon">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>图标加文字按钮</label>
+					<input name="style" type="radio" value="left-btn">
+				</div>
+			</form>
+			<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
+			<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="right-none">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>仅图标</label>
+					<input name="style" type="radio" value="right-icon">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>文字按钮</label>
+					<input name="style" type="radio" value="right-btn">
+				</div>
+			</form>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript">
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
+			var header = document.getElementById("header");
+			 //左侧icon
+			var lefticon = document.createElement('a');
+			lefticon.className = 'mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
+			 //左侧图标+文字按钮
+			var leftbtn = document.createElement('button');
+			leftbtn.className = 'mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
+			var span = document.createElement('span');
+			span.className = 'mui-icon mui-icon-left-nav';
+			leftbtn.appendChild(span);
+			var text = document.createTextNode('首页');
+			leftbtn.appendChild(text);
+			 //右侧icon
+			var righticon = document.createElement('a');
+			righticon.className = 'mui-icon mui-icon-bars mui-pull-right';
+			 //右侧文字按钮
+			var rightbtn = document.createElement('button');
+			rightbtn.className = 'mui-btn mui-btn-blue mui-btn-link mui-pull-right';
+			rightbtn.innerText = '编辑';
+			 //删除原先存在的节点
+			function remove(selector) {
+				var elem = header.querySelector(selector);
+				if (elem) {
+					header.removeChild(elem);
+				}
+			}
+			mui('.mui-input-group').on('change', 'input', function() {
+				if (this.checked) {
+					switch (this.value) {
+						case 'left-none':
+							remove('.mui-pull-left')
+							break;
+						case 'left-icon':
+							remove('.mui-pull-left');
+							header.appendChild(lefticon);
+							break;
+						case 'left-btn':
+							remove('.mui-pull-left');
+							header.appendChild(leftbtn);
+							break;
+						case 'right-none':
+							remove('.mui-pull-right');
+							break;
+						case 'right-icon':
+							remove('.mui-pull-right')
+							header.appendChild(righticon);
+							break;
+						case 'right-btn':
+							remove('.mui-pull-right');
+							header.appendChild(rightbtn);
+							break;
+					}
+				}
+			});
+		</script>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/nav_transparent.html ADDED Viewed

@@ -0,0 +1,127 @@
+<!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;
+			}
+			.mui-bar .mui-pull-left .mui-icon {
+				padding-right: 5px;
+				font-size: 28px;
+			}
+			.mui-bar .mui-btn {
+				font-weight: normal;
+				font-size: 17px;
+			}
+			.mui-bar .mui-btn-link {
+				top: 1px;
+			}
+			.mui-content img{
+				width: 100%;
+			}
+			.hm-description{
+				margin: 15px;
+			}
+			.hm-description>li {
+				font-size: 14px;
+				color: #8f8f94;
+			}
+		</style>
+	</head>
+	<body>
+		<header id="header" class="mui-bar mui-bar-transparent">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">导航栏</h1>
+		</header>
+		<div class="mui-content">
+			<!--静态图片-->
+			<img id="img1" src="../images/yuantiao.jpg"/>
+			<!--轮播图片-->
+			<div id="slider" class="mui-slider mui-hidden" >
+			  <div class="mui-slider-group">
+			    <!-- 第一张 -->
+			     <div class="mui-slider-item">
+			      <a href="#">
+			        <img src="../images/shuijiao.jpg">
+			      </a>
+			    </div>
+			    <!-- 第二张 -->
+			    <div class="mui-slider-item">
+			      <a href="#">
+			        <img src="../images/yuantiao.jpg">
+			      </a>
+			    </div>
+			  </div>
+			  <div class="mui-slider-indicator">
+			    <div class="mui-indicator mui-active"></div>
+			    <div class="mui-indicator"></div>
+			  </div>
+			</div>
+			<p style="margin: 30px 15px 20px;">这是transparent bar（透明导航栏）演示页面， 默认情况下标题栏透明，
+				当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。
+			</p>
+			<p style="margin: 5px 15px 15px 15px;">
+				这是一种解决滚动条通顶问题的变通解决方案，该方案相比双webview的方案，性能更高，动效更酷，但也有其适用场景：
+			</p>
+			<ul class="hm-description">
+				<li>顶部最好有图片或轮播组件</li>
+				<li>导航栏字体颜色和图片颜色协调</li>
+			</ul>
+			<h5 class="mui-content-padded">图片类型</h5>
+			<form class="mui-input-group" style="margin-bottom: 300px;">
+				<div class="mui-input-row mui-radio">
+					<label>静态图片</label>
+					<input name="style" type="radio" checked value="static">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>轮播图</label>
+					<input name="style" type="radio" value="slider">
+				</div>
+			</form>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript">
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
+			var slider = document.getElementById("slider");
+			mui('.mui-input-group').on('change', 'input', function() {
+				if (this.checked) {
+					switch (this.value) {
+						case 'static':
+							document.getElementById("img1").className = "";
+							document.getElementById("slider").classList.add("mui-hidden");
+							break;
+						case 'slider':
+							document.getElementById("img1").className = "mui-hidden";
+							if(slider.classList.contains("mui-hidden")){
+								document.getElementById("slider").classList.remove("mui-hidden");
+							}
+							break;
+					}
+				}
+			});
+		</script>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/nav_transparent_native.html ADDED Viewed

@@ -0,0 +1,121 @@
+<!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;
+			}
+			.mui-bar .mui-pull-left .mui-icon {
+				padding-right: 5px;
+				font-size: 28px;
+			}
+			.mui-bar .mui-btn {
+				font-weight: normal;
+				font-size: 17px;
+			}
+			.mui-bar .mui-btn-link {
+				top: 1px;
+			}
+			.mui-content img {
+				width: 100%;
+			}
+			.hm-description {
+				margin: 15px;
+			}
+			.hm-description>li {
+				font-size: 14px;
+				color: #8f8f94;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="mui-content">
+			<!--静态图片-->
+			<img id="img1" src="../images/yuantiao.jpg" />
+			<!--轮播图片-->
+			<div id="slider" class="mui-slider mui-hidden">
+				<div class="mui-slider-group">
+					<!-- 第一张 -->
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/shuijiao.jpg">
+						</a>
+					</div>
+					<!-- 第二张 -->
+					<div class="mui-slider-item">
+						<a href="#">
+							<img src="../images/yuantiao.jpg">
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-indicator">
+					<div class="mui-indicator mui-active"></div>
+					<div class="mui-indicator"></div>
+				</div>
+			</div>
+			<p style="margin: 30px 15px 20px;">这是原生实现的的transparent bar（透明导航栏）演示页面；默认情况下标题栏透明， 当用户向下滚动时，标题栏逐渐由透明转变为不透明；当用户再次向上滚动时，标题栏又从不透明变为透明状态。
+			</p>
+			<p style="margin: 5px 15px 25px 15px;">
+				这是一种解决滚动条通顶问题的变通解决方案，该方案有如下优点：
+			</p>
+			<div>
+				<ul class="hm-description">
+					<li>相比双webview的方案，性能更高，动效更酷</li>
+					<li>相比H5版本的透明导航栏，使用原生渐变动画，也有更高的性能体验</li>
+				</ul>
+			</div>
+			<h5 class="mui-content-padded">图片类型</h5>
+			<form class="mui-input-group" style="margin-bottom: 300px;">
+				<div class="mui-input-row mui-radio">
+					<label>静态图片</label>
+					<input name="style" type="radio" checked value="static">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>轮播图</label>
+					<input name="style" type="radio" value="slider">
+				</div>
+			</form>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript">
+			mui.init();
+			var slider = document.getElementById("slider");
+			mui('.mui-input-group').on('change', 'input', function() {
+				if(this.checked) {
+					switch(this.value) {
+						case 'static':
+							document.getElementById("img1").className = "";
+							document.getElementById("slider").classList.add("mui-hidden");
+							break;
+						case 'slider':
+							document.getElementById("img1").className = "mui-hidden";
+							if(slider.classList.contains("mui-hidden")) {
+								document.getElementById("slider").classList.remove("mui-hidden");
+							}
+							break;
+					}
+				}
+			});
+		</script>
+	</body>
+</html>

package/native/etc/docroot/bangzhu/examples/numbox.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>数字输入框</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">
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css" />
+		<style>
+			html,
+			body,
+			.mui-content {
+				height: 0px;
+				margin: 0px;
+				background-color: #efeff4;
+			}
+			h5.mui-content-padded {
+				margin-left: 0px !important;
+				margin-top: 20px !important;
+			}
+			.mui-card {
+				margin: 0px;
+			}
+		</style>
+	</head>
+	<body>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<h1 class="mui-title">number box（数字输入框）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<h5 class="mui-content-padded">默认</h5>
+				<div class="mui-numbox">
+					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+					<input class="mui-input-numbox" type="number" />
+					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
+				<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
+					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+					<input id="test" class="mui-input-numbox" type="number" value="5" />
+					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">设定步长值(步长 10)</h5>
+				<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
+					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+					<input class="mui-input-numbox" type="number" />
+					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">取值操作</h5>
+				<div class="mui-numbox">
+					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+					<input id="box" class="mui-input-numbox" type="number" />
+					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
+				<h5 class="mui-content-padded">在行内</h5> 购买数量:
+				<div class="mui-numbox">
+					<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+					<input class="mui-input-numbox" type="number" />
+					<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">在表单中</h5>
+				<div class="mui-card">
+					<form class="mui-input-group">
+						<div class="mui-input-row">
+							<label>数字框一</label>
+							<div class="mui-numbox">
+								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+								<input class="mui-input-numbox" type="number" />
+								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+							</div>
+						</div>
+						<div class="mui-input-row">
+							<label>数字框二</label>
+							<div class="mui-numbox">
+								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
+								<input class="mui-input-numbox" type="number" />
+								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
+							</div>
+						</div>
+					</form>
+				</div>
+				<h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>
+				<div class="mui-numbox" style="width: 220px;height: 60px;">
+					<button class="mui-btn-numbox-minus" type="button">-</button>
+					<input class="mui-input-numbox" type="number" />
+					<button class="mui-btn-numbox-plus" type="button">+</button>
+				</div>
+				<br/>
+				<br />
+			</div>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script>
+			mui.init();
+			document.getElementById("btn").addEventListener('tap', function(event) {
+				mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");
+			});
+			var testBox=document.getElementById("test");
+			testBox.addEventListener('change',function(){
+				console.log(testBox.value);
+			});
+		</script>
+	</body>
+</html>