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

@oxiaom/adoremix-win32-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 (243) hide show

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

@@ -0,0 +1,90 @@
+<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">
+    <!--标准mui.css-->
+    <link rel="stylesheet" href="../css/mui.min.css">
+    <!--App自定义的css-->
+    <style type="text/css">
+      p img {
+        max-width: 100%;
+        height: auto;
+      }
+      .mui-content>.mui-table-view:first-child {
+        margin-top: 0;
+      }
+      body,
+      .mui-content {
+        background-color: #FFFFFF;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mui-content">
+      <ul class="mui-table-view">
+        <li class="mui-table-view-cell" id="loop_switch">
+          是否循环预览
+          <div class="mui-switch">
+            <div class="mui-switch-handle"></div>
+          </div>
+        </li>
+      </ul>
+      <div class="mui-content-padded">
+        <!--<div class="mui-input-row" id="loop_switch">
+          <label>是否循环预览</label>
+          <div class="mui-switch mui-active">
+            <div class="mui-switch-handle"></div>
+          </div>
+        </div>-->
+        <p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
+        <p>
+          <img src="../images/yuantiao.jpg" />
+        </p>
+        <p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看其它图片，点击会关闭预览</p>
+        <p>
+          <img src="../images/muwu.jpg" />
+        </p>
+        <p>第三张图片，纯粹为了占位： </p>
+        <p>
+          <img src="../images/shuijiao.jpg" />
+        </p>
+      </div>
+    </div>
+  </body>
+  <script src="../js/mui.min.js"></script>
+  <script type="text/javascript">
+    mui.plusReady(function() {
+      var loopFlag = false; //默认不支持轮播
+      var loopSwitch = document.getElementById('loop_switch');
+      loopSwitch.addEventListener('toggle', function(event) {
+        if(event.detail.isActive) {
+          loopFlag = true;
+        } else {
+          loopFlag = false;
+        }
+      });
+      var images = [].slice.call(document.querySelectorAll('.mui-content-padded img'));
+      var urls = [];
+      images.forEach(function(item) {
+        urls.push(item.src);
+      });
+      mui('.mui-content-padded').on('tap', 'img', function() {
+        var index = images.indexOf(this);
+        plus.nativeUI.previewImage(urls, {
+          current: index,
+          loop: loopFlag,
+          indicator: 'number'
+        });
+      });
+    });
+  </script>
+</html>

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

@@ -0,0 +1,197 @@
+<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">
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<style type="text/css">
+			.mui-preview-image.mui-fullscreen {
+				position: fixed;
+				z-index: 20;
+				background-color: #000;
+			}
+			.mui-preview-header,
+			.mui-preview-footer {
+				position: absolute;
+				width: 100%;
+				left: 0;
+				z-index: 10;
+			}
+			.mui-preview-header {
+				height: 44px;
+				top: 0;
+			}
+			.mui-preview-footer {
+				height: 50px;
+				bottom: 0px;
+			}
+			.mui-preview-header .mui-preview-indicator {
+				display: block;
+				line-height: 25px;
+				color: #fff;
+				text-align: center;
+				margin: 15px auto 4;
+				width: 70px;
+				background-color: rgba(0, 0, 0, 0.4);
+				border-radius: 12px;
+				font-size: 16px;
+			}
+			.mui-preview-image {
+				display: none;
+				-webkit-animation-duration: 0.5s;
+				animation-duration: 0.5s;
+				-webkit-animation-fill-mode: both;
+				animation-fill-mode: both;
+			}
+			.mui-preview-image.mui-preview-in {
+				-webkit-animation-name: fadeIn;
+				animation-name: fadeIn;
+			}
+			.mui-preview-image.mui-preview-out {
+				background: none;
+				-webkit-animation-name: fadeOut;
+				animation-name: fadeOut;
+			}
+			.mui-preview-image.mui-preview-out .mui-preview-header,
+			.mui-preview-image.mui-preview-out .mui-preview-footer {
+				display: none;
+			}
+			.mui-zoom-scroller {
+				position: absolute;
+				display: -webkit-box;
+				display: -webkit-flex;
+				display: flex;
+				-webkit-box-align: center;
+				-webkit-align-items: center;
+				align-items: center;
+				-webkit-box-pack: center;
+				-webkit-justify-content: center;
+				justify-content: center;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				margin: 0;
+				-webkit-backface-visibility: hidden;
+			}
+			.mui-zoom {
+				-webkit-transform-style: preserve-3d;
+				transform-style: preserve-3d;
+			}
+			.mui-slider .mui-slider-group .mui-slider-item img {
+				width: auto;
+				height: auto;
+				max-width: 100%;
+				max-height: 100%;
+			}
+			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
+				width: 100%;
+			}
+			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
+				display: inline-table;
+			}
+			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
+				display: table-cell;
+				vertical-align: middle;
+			}
+			.mui-preview-loading {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				display: none;
+			}
+			.mui-preview-loading.mui-active {
+				display: block;
+			}
+			.mui-preview-loading .mui-spinner-white {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin-left: -25px;
+				margin-top: -25px;
+				height: 50px;
+				width: 50px;
+			}
+			.mui-preview-image img.mui-transitioning {
+				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
+				transition: transform 0.5s ease, opacity 0.5s ease;
+			}
+			@-webkit-keyframes fadeIn {
+				0% {
+					opacity: 0;
+				}
+				100% {
+					opacity: 1;
+				}
+			}
+			@keyframes fadeIn {
+				0% {
+					opacity: 0;
+				}
+				100% {
+					opacity: 1;
+				}
+			}
+			@-webkit-keyframes fadeOut {
+				0% {
+					opacity: 1;
+				}
+				100% {
+					opacity: 0;
+				}
+			}
+			@keyframes fadeOut {
+				0% {
+					opacity: 1;
+				}
+				100% {
+					opacity: 0;
+				}
+			}
+			p img {
+				max-width: 100%;
+				height: auto;
+			}
+		</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">image viewer（图片预览）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<p>这是图片放大预览示例，点击如下图片体验全屏预览功能</p>
+				<p>
+					<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
+				</p>
+				<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
+				<p>
+					<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
+				</p>
+				<p>第三张图片，纯粹为了占位： </p>
+				<p>
+					<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
+				</p>
+			</div>
+		</div>
+	</body>
+	<script src="../js/mui.min.js"></script>
+	<script src="../js/mui.zoom.js"></script>
+	<script src="../js/mui.previewimage.js"></script>
+	<script>
+		mui.previewImage();
+	</script>
+</html>