Skip to content

M
mui
Commit 438e6f75 authored by hbcui1984's avatar hbcui1984
Browse files
Options

编译至mui v1.6.0

parent d7337b08
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1355 additions and 389 deletions
dist/css/mui.css
View file @ 438e6f75
/*! /*!
* ===================================================== * =====================================================
* Mui v1.5.0 (https://github.com/dcloudio/mui) * Mui v1.6.0 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
...@@ -1465,6 +1465,23 @@ input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled, ...@@ -1465,6 +1465,23 @@ input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled,
margin-right: -65px; margin-right: -65px;
} }
.mui-table-view-radio .mui-table-view-cell {
padding-right: 65px;
}
.mui-table-view-radio .mui-table-view-cell > a:not(.mui-btn) {
margin-right: -65px;
}
.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after {
right: 9px;
font-size: 30px;
font-weight: 600;
color: #007aff;
content: '';
}
.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after {
content: '\e472';
}
.mui-table-view-inverted { .mui-table-view-inverted {
color: #fff; color: #fff;
background: #333; background: #333;
...@@ -1564,9 +1581,16 @@ input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled, ...@@ -1564,9 +1581,16 @@ input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled,
-webkit-transition: -webkit-transform 300ms ease; -webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease; transition: transform 300ms ease;
} }
.mui-table-view-cell.mui-active > .mui-slider-handle {
background-color: #eee;
}
.mui-table-view-cell > .mui-slider-handle { .mui-table-view-cell > .mui-slider-handle {
position: relative;
background-color: #fff; background-color: #fff;
} }
.mui-table-view-cell > .mui-slider-handle.mui-navigate-right:after, .mui-table-view-cell > .mui-slider-handle .mui-navigate-right:after {
right: 0;
}
.mui-table-view-cell > .mui-slider-handle, .mui-table-view-cell > .mui-slider-left .mui-btn, .mui-table-view-cell > .mui-slider-right .mui-btn { .mui-table-view-cell > .mui-slider-handle, .mui-table-view-cell > .mui-slider-left .mui-btn, .mui-table-view-cell > .mui-slider-right .mui-btn {
-webkit-transition: -webkit-transform 0ms ease; -webkit-transition: -webkit-transform 0ms ease;
transition: transform 0ms ease; transition: transform 0ms ease;
...@@ -1966,7 +1990,9 @@ input[type="color"] { ...@@ -1966,7 +1990,9 @@ input[type="color"] {
outline: none; outline: none;
} }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0; margin: 0;
} }
...@@ -3579,6 +3605,11 @@ select:focus { ...@@ -3579,6 +3605,11 @@ select:focus {
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
} }
.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item > a {
top: auto;
-webkit-transform: none;
transform: none;
}
.mui-bar-tab ~ .mui-content .mui-slider.mui-fullscreen .mui-segmented-control ~ .mui-slider-group { .mui-bar-tab ~ .mui-content .mui-slider.mui-fullscreen .mui-segmented-control ~ .mui-slider-group {
bottom: 50px; bottom: 50px;
...@@ -3588,3 +3619,8 @@ select:focus { ...@@ -3588,3 +3619,8 @@ select:focus {
.mui-android.mui-android-4-0 textarea:focus { .mui-android.mui-android-4-0 textarea:focus {
-webkit-user-modify: inherit; -webkit-user-modify: inherit;
} }
.mui-ios .mui-table-view-cell {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
dist/css/mui.min.css
View file @ 438e6f75
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 438e6f75
This diff is collapsed.
dist/js/mui.min.js
View file @ 438e6f75
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.min.css
View file @ 438e6f75
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.numbox.css
View file @ 438e6f75
...@@ -36,9 +36,13 @@ ...@@ -36,9 +36,13 @@
} }
.mui-numbox .mui-numbox-btn-plus { .mui-numbox .mui-numbox-btn-plus {
right: 0px; right: 0px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
} }
.mui-numbox .mui-numbox-btn-minus { .mui-numbox .mui-numbox-btn-minus {
left: 0px; left: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
} }
.mui-numbox .mui-numbox-input { .mui-numbox .mui-numbox-input {
width: 100% !important; width: 100% !important;
...@@ -52,6 +56,9 @@ ...@@ -52,6 +56,9 @@
padding: 0px 3px !important; padding: 0px 3px !important;
display: inline-block; display: inline-block;
border-radius: 0px !important; border-radius: 0px !important;
text-overflow: ellipsis;
word-break: normal;
overflow: hidden;
} }
.mui-input-row .mui-numbox { .mui-input-row .mui-numbox {
margin: 2px 8px; margin: 2px 8px;
......
examples/hello-mui/examples/info.html
View file @ 438e6f75
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <h4>版本介绍</h4>
<p>当前版本为1.5.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为1.6.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/lazyload-image.html 0 → 100644
View file @ 438e6f75
<!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;
}
</style>
</head>
<body>
<div class="mui-content">
<ul id="list" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
mui.init();
var createFragment = function(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/'+(i%5+1)+'.jpg?version='+Math.random()*1000+'"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
fragment.appendChild(li);
}
return fragment;
};
(function($) {
var list = document.getElementById("list");
list.appendChild(createFragment(50));
$(document).imageLazyload({
placeholder: '../images/60x60.gif'
});
})(mui);
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/locker-dom.html
View file @ 438e6f75
...@@ -9,9 +9,6 @@ ...@@ -9,9 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css" /> <link rel="stylesheet" href="../css/mui.min.css" />
<style> <style>
* {
box-sizing: border-box;
}
html, html,
body { body {
width: 100%; width: 100%;
...@@ -29,23 +26,17 @@ ...@@ -29,23 +26,17 @@
margin: 50px auto; margin: 50px auto;
background-color: #fff; background-color: #fff;
} }
#alert { #alert{
width: 300px; text-align:center;
height: 45px; padding: 20px 10px ;
line-height: 45px; }
text-align: center;
color: red;
margin: auto auto;
border: dashed 1px #bbb;
border-radius: 5px;
background-color: #fff;
}
</style> </style>
</head> </head>
<body> <body>
<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div> <div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div> <div id='alert'></div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/mui.locker.js"></script> <script src="../js/mui.locker.js"></script>
<script> <script>
......
examples/hello-mui/examples/numbox.html
View file @ 438e6f75
...@@ -38,22 +38,28 @@ ...@@ -38,22 +38,28 @@
</div> </div>
<h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5> <h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'> <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" value="5" /> <input class="mui-numbox-input" type="number" value="5" />
<button class="mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">设定步长值(步长 10)</h5> <h5 class="mui-content-padded">设定步长值(步长 10)</h5>
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'> <div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
<button class="mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">取值操作</h5>
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input id="testBox" class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
<button id="getValue" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
<h5 class="mui-content-padded">在行内</h5> 购买数量: <h5 class="mui-content-padded">在行内</h5> 购买数量:
<div class="mui-numbox"> <div class="mui-numbox">
<button class="mui-numbox-btn-minus" type="button">-</button> <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" /> <input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button> <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div> </div>
<h5 class="mui-content-padded">在表单中</h5> <h5 class="mui-content-padded">在表单中</h5>
<div class="mui-card"> <div class="mui-card">
...@@ -82,12 +88,23 @@ ...@@ -82,12 +88,23 @@
<input class="mui-numbox-input" type="number" /> <input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button> <button class="mui-numbox-btn-plus" type="button">+</button>
</div> </div>
<br/>
<br />
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/mui.numbox.js"></script> <script src="../js/mui.numbox.js"></script>
<script> <script>
mui.init(); (function($, doc) {
$.init();
$.plusReady(function() {
var btnGetValue = doc.querySelector('#getValue');
var boxTest = doc.querySelector('#testBox');
btnGetValue.addEventListener('click', function(event) {
plus.nativeUI.alert('当前值: ' + boxTest.value, null, "提示");
});
});
}(mui, document));
</script> </script>
</body> </body>
......
examples/hello-mui/examples/offcanvas-drag-down.html 0 → 100644
View file @ 438e6f75
This diff is collapsed.
examples/hello-mui/examples/radio.html
View file @ 438e6f75
...@@ -64,6 +64,26 @@ ...@@ -64,6 +64,26 @@
</div> </div>
</form> </form>
</div> </div>
<h5 class="mui-content-padded">列表模式的单选框</h5>
<div class="mui-card">
<ul class="mui-table-view mui-table-view-radio">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell mui-selected">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
......
examples/hello-mui/examples/setting.html
View file @ 438e6f75
...@@ -24,15 +24,19 @@ ...@@ -24,15 +24,19 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4; background-color: #efeff4;
} }
.mui-pages{
top: 46px;
height: auto;
}
.mui-scroll-wrapper, .mui-scroll-wrapper,
.mui-scroll { .mui-scroll {
background-color: #efeff4; background-color: #efeff4;
} }
.mui-page-content {
top: 46px;
}
.mui-page.mui-transitioning { .mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 200ms ease; -webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease; transition: transform 200ms ease;
...@@ -45,8 +49,8 @@ ...@@ -45,8 +49,8 @@
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }
/*.mui-page-center { /*.mui-page-center {
background-color: red; background-color: red;
}*/ }*/
.mui-navbar { .mui-navbar {
...@@ -90,14 +94,14 @@ ...@@ -90,14 +94,14 @@
z-index: -1; z-index: -1;
content: ''; content: '';
} }
.mui-ios .mui-page-shadow { .mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
} }
.mui-android .mui-page-shadow { /*.mui-android .mui-page-shadow {
width: 1px; width: 1px;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0);
} }*/
.mui-navbar-inner.mui-transitioning, .mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning { .mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease; -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
...@@ -172,7 +176,7 @@ ...@@ -172,7 +176,7 @@
</ul> </ul>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI</a> <a href="#about" class="mui-navigate-right">关于微信</a>
</li> </li>
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
...@@ -212,13 +216,13 @@ ...@@ -212,13 +216,13 @@
</ul> </ul>
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>登录密码</a> <a>微信密码</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>账号保护</a> <a>账号保护</a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a>安全中心</a> <a>微信安全中心</a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -514,7 +518,7 @@ ...@@ -514,7 +518,7 @@
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left"> <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>设置 <span class="mui-icon mui-icon-left-nav"></span>设置
</button> </button>
<h1 class="mui-center mui-title">关于MUI</h1> <h1 class="mui-center mui-title">关于微信</h1>
</div> </div>
<div class="mui-page-content"> <div class="mui-page-content">
<div class="mui-scroll-wrapper"> <div class="mui-scroll-wrapper">
......
examples/hello-mui/examples/tab-webview-main.html
View file @ 438e6f75
...@@ -10,11 +10,13 @@ ...@@ -10,11 +10,13 @@
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<style> <style>
html,body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
...@@ -40,30 +42,28 @@ ...@@ -40,30 +42,28 @@
</nav> </nav>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
//mui初始化 //mui初始化
mui.init(); mui.init();
var subpages = ['tab-webview-subpage-about.html','tab-webview-subpage-chat.html','tab-webview-subpage-contact.html','tab-webview-subpage-setting.html']; var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
var subpage_style = { var subpage_style = {
top: '46px', top: '46px',
bottom: '50px' bottom: '50px'
}; };
//创建子页面，首个选项卡页面显示，其它均隐藏；
//创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady(function() {
mui.plusReady(function(){
var self = plus.webview.currentWebview(); var self = plus.webview.currentWebview();
for(var i=0;i<4;i++){ for (var i = 0; i < 4; i++) {
var sub = plus.webview.create(subpages[i],subpages[i],subpage_style); var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
if(i>0){ if (i > 0) {
sub.hide(); sub.hide();
} }
self.append(sub); self.append(sub);
} }
}); });
//当前激活选项
//当前激活选项
var activeTab = subpages[0]; var activeTab = subpages[0];
var title = document.getElementById("title"); var title = document.getElementById("title");
//选项卡点击事件 //选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) { mui('.mui-bar-tab').on('tap', 'a', function(e) {
var targetTab = this.getAttribute('href'); var targetTab = this.getAttribute('href');
if (targetTab == activeTab) { if (targetTab == activeTab) {
...@@ -72,26 +72,25 @@ ...@@ -72,26 +72,25 @@
//更换标题 //更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML; title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡 //显示目标选项卡
plus.webview.show(targetTab); plus.webview.show(targetTab, 'slide-in-right', 200);
//隐藏当前; //隐藏当前;
plus.webview.hide(activeTab); plus.webview.hide(activeTab);
//更改当前活跃的选项卡 //更改当前活跃的选项卡
activeTab = targetTab; activeTab = targetTab;
}); });
//自定义事件，模拟点击“首页选项卡”
//自定义事件，模拟点击“首页选项卡” document.addEventListener('gohome', function() {
document.addEventListener('gohome',function () {
var defaultTab = document.getElementById("defaultTab"); var defaultTab = document.getElementById("defaultTab");
//模拟首页点击 //模拟首页点击
mui.trigger(defaultTab,'tap'); mui.trigger(defaultTab, 'tap');
//切换选项卡高亮 //切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(defaultTab!==current){ if (defaultTab !== current) {
current.classList.remove('mui-active'); current.classList.remove('mui-active');
defaultTab.classList.add('mui-active'); defaultTab.classList.add('mui-active');
} }
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ 438e6f75
...@@ -23,106 +23,106 @@ ...@@ -23,106 +23,106 @@
</head> </head>
<body> <body>
<div class="mui-content"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="pullrefresh" class="mui-scroll-wrapper"> <div class="title">
<div class="mui-scroll"> 这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
<div class="title">
这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a>
</li>
</ul>
</div> </div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a>
</li>
<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a>
</li>
</ul>
</div> </div>
<script src="../js/mui.min.js"></script> </div>
<script> <script src="../js/mui.min.js"></script>
mui.init({ <script>
pullRefresh: { mui.init({
container: '#pullrefresh', swipeBack: false,
down: { pullRefresh: {
callback: pulldownRefresh container: '#pullrefresh',
}, down: {
up: { callback: pulldownRefresh
contentrefresh: '正在加载...', },
callback: pullupRefresh up: {
} contentrefresh: '正在加载...',
callback: pullupRefresh
} }
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
} }
</script> });
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 20; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
</script>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/js/mui.lazyload.img.js 0 → 100644
View file @ 438e6f75
(function($, window, document) {
var ImageLazyload = $.Lazyload.extend({
init: function(element, options) {
this._super(element, options);
},
_init: function() {
this.options.selector = 'img';
this._super();
},
addElement: function(img) {
var self = this;
var src = img.getAttribute('data-lazyload');
if (src) {
self.onPlaceHolder = self._createLoader(function(callback) {
var img = new Image();
var placeholder = self.options.placeholder;
img.src = placeholder;
img.onload = img.onerror = function() {
callback(placeholder)
};
});
if (img.offsetWidth) {
self.addCallback(img, self.handle);
} else {
self._counter++;
img.onload = function() {
self._counter--;
self.addCallback(img, self.handle);
this.onload = null;
};
if (!img.src) {
self.onPlaceHolder(function(placeholder) {
if (!img.src) {
img.src = placeholder;
}
});
}
}
}
return false;
},
handle: function(img, key) {
var dataSrc = img.getAttribute('data-lazyload');
if (dataSrc && img.src != dataSrc) {
img.src = dataSrc;
img.removeAttribute('data-lazyload');
}
}
});
$.fn.imageLazyload = function(options) {
var lazyloadApis = [];
this.each(function() {
var self = this;
var lazyloadApi = null;
if (self === document || self === window) {
self = document.body;
}
var id = self.getAttribute('data-imageLazyload');
if (!id) {
id = ++$.uuid;
$.data[id] = lazyloadApi = new ImageLazyload(self, options);
self.setAttribute('data-imageLazyload', id);
} else {
lazyloadApi = $.data[id];
}
lazyloadApis.push(lazyloadApi);
});
return lazyloadApis.length === 1 ? lazyloadApis[0] : lazyloadApis;
}
})(mui, window, document);
\ No newline at end of file
examples/hello-mui/js/mui.lazyload.js 0 → 100644
View file @ 438e6f75
(function($, window, document) {
$.Lazyload = $.Class.extend({
init: function(element, options) {
var self = this;
this.container = this.element = element;
this.options = $.extend({
selector: '',
diff: false,
force: false,
autoDestroy: true,
duration: 100
}, options);
this._key = 0;
this._containerIsNotDocument = this.container.nodeType !== 9;
this._callbacks = {};
this._init();
},
_init: function() {
this._initLoadFn();
this.addElements();
this._loadFn();
$.ready(function() {
this._loadFn();
}.bind(this));
this.resume();
},
_initLoadFn: function() {
var self = this;
self._loadFn = this._buffer(function() { // 加载延迟项
if (self.options.autoDestroy && self._counter == 0 && $.isEmptyObject(self._callbacks)) {
self.destroy();
}
self._loadItems();
}, self.options.duration, self);
},
/**
*根据加载函数实现加载器
*@param {Function} load 加载函数
*@returns {Function} 加载器
*/
_createLoader: function(load) {
var value, loading, handles = [],
h;
return function(handle) {
if (!loading) {
loading = true;
load(function(v) {
value = v;
while (h = handles.shift()) {
try {
h && h.apply(null, [value]);
} catch (e) {
setTimeout(function() {
throw e;
}, 0)
}
}
})
}
if (value) {
handle && handle.apply(null, [value]);
return value;
}
handle && handles.push(handle);
return value;
}
},
_buffer: function(fn, ms, context) {
var timer;
var lastStart = 0;
var lastEnd = 0;
var ms = ms || 150;
function run() {
if (timer) {
timer.cancel();
timer = 0;
}
lastStart = $.now();
fn.apply(context || this, arguments);
lastEnd = $.now();
}
return $.extend(function() {
if (
(!lastStart) || // 从未运行过
(lastEnd >= lastStart && $.now() - lastEnd > ms) || // 上次运行成功后已经超过ms毫秒
(lastEnd < lastStart && $.now() - lastStart > ms * 8) // 上次运行或未完成，后8*ms毫秒
) {
run();
} else {
if (timer) {
timer.cancel();
}
timer = $.later(run, ms, null, arguments);
}
}, {
stop: function() {
if (timer) {
timer.cancel();
timer = 0;
}
}
});
},
_getBoundingRect: function(c) {
var vh, vw, left, top;
if (c !== undefined) {
vh = c.offsetHeight;
vw = c.offsetWidth;
var offset = $.offset(c);
left = offset.left;
top = offset.top;
} else {
vh = window.innerHeight;
vw = window.innerWidth;
left = 0;
top = window.pageYOffset;
}
var diff = this.options.diff;
var diffX = diff === false ? vw : diff;
var diffX0 = 0;
var diffX1 = diffX;
var diffY = diff === false ? vh : diff;
var diffY0 = 0;
var diffY1 = diffY;
var right = left + vw;
var bottom = top + vh;
left -= diffX0;
right += diffX1;
top -= diffY0;
bottom += diffY1;
return {
left: left,
top: top,
right: right,
bottom: bottom
};
},
_cacheWidth: function(el) {
if (el._mui_lazy_width) {
return el._mui_lazy_width;
}
return el._mui_lazy_width = el.offsetWidth;
},
_cacheHeight: function(el) {
if (el._mui_lazy_height) {
return el._mui_lazy_height;
}
return el._mui_lazy_height = el.offsetHeight;
},
_isCross: function(r1, r2) {
var r = {};
r.top = Math.max(r1.top, r2.top);
r.bottom = Math.min(r1.bottom, r2.bottom);
r.left = Math.max(r1.left, r2.left);
r.right = Math.min(r1.right, r2.right);
return r.bottom >= r.top && r.right >= r.left;
},
_elementInViewport: function(elem, windowRegion, containerRegion) {
// display none or inside display none
if (!elem.offsetWidth) {
return false;
}
var elemOffset = $.offset(elem);
var inContainer = true;
var inWin;
var left = elemOffset.left;
var top = elemOffset.top;
var elemRegion = {
left: left,
top: top,
right: left + this._cacheWidth(elem),
bottom: top + this._cacheHeight(elem)
};
inWin = this._isCross(windowRegion, elemRegion);
if (inWin && containerRegion) {
inContainer = this._isCross(containerRegion, elemRegion);
}
// 确保在容器内出现
// 并且在视窗内也出现
return inContainer && inWin;
},
_loadItems: function() {
var self = this;
// container is display none
if (self._containerIsNotDocument && !self.container.offsetWidth) {
return;
}
self._windowRegion = self._getBoundingRect();
if (self._containerIsNotDocument) {
self._containerRegion = self._getBoundingRect(this.container);
}
$.each(self._callbacks, function(key, callback) {
callback && self._loadItem(key, callback);
});
},
_loadItem: function(key, callback) {
var self = this;
callback = callback || self._callbacks[key];
if (!callback) {
return true;
}
var el = callback.el;
var remove = false;
var fn = callback.fn;
if (self.options.force || self._elementInViewport(el, self._windowRegion, self._containerRegion)) {
try {
remove = fn.call(self, el, key);
} catch (e) {
setTimeout(function() {
throw e;
}, 0);
}
}
if (remove !== false) {
delete self._callbacks[key];
}
return remove;
},
addCallback: function(el, fn) {
var self = this;
var callbacks = self._callbacks;
var callback = {
el: el,
fn: fn || $.noop
};
var key = ++this._key;
callbacks[key] = callback;
// add 立即检测，防止首屏元素问题
if (self._windowRegion) {
self._loadItem(key, callback);
} else {
self.refresh();
}
},
addElements: function() {
var self = this;
self._counter = self._counter || 0;
if (self.options.selector) {
var lazyloads = self.container.querySelectorAll(self.options.selector);
$.each(lazyloads, function(index, el) {
if (self.addElement(el)) {
self.addCallback(el, self.handle);
}
});
}
},
addElement: function(el) {
return true;
},
handle: function() {
//throw new Error('需子类实现');
},
refresh: function() {
this._loadFn();
},
pause: function() {
var load = this._loadFn;
if (this._destroyed) {
return;
}
window.removeEventListener('scroll', load);
window.removeEventListener('touchmove', load);
window.removeEventListener('resize', load);
if (this._containerIsNotDocument) {
this.container.removeEventListener('scroll', load);
this.container.removeEventListener('touchmove', load);
}
},
resume: function() {
var load = this._loadFn;
if (this._destroyed) {
return;
}
window.addEventListener('scroll', load, false);
window.addEventListener('touchmove', load, false);
window.addEventListener('resize', load, false);
if (this._containerIsNotDocument) {
this.container.addEventListener('scroll', load, false);
this.container.addEventListener('touchmove', load, false);
}
},
destroy: function() {
var self = this;
self.pause();
self._callbacks = {};
$.trigger(this.container, 'destory', self);
self._destroyed = 1;
}
});
})(mui, window, document);
\ No newline at end of file
examples/hello-mui/js/mui.locker.js
View file @ 438e6f75
/** /**
* 手势锁屏插件 * 手势锁屏插件
* varstion 1.0.4 * varstion 1.0.5
* by Houfeng * by Houfeng
* Houfeng@DCloud.io * Houfeng@DCloud.io
*/ */
...@@ -47,10 +47,20 @@ ...@@ -47,10 +47,20 @@
canvas.off = canvas.removeEventListener || function(name, handler, capture) { canvas.off = canvas.removeEventListener || function(name, handler, capture) {
canvas.detachEvent('on' + name, handler, capture); canvas.detachEvent('on' + name, handler, capture);
}; };
//
if (self.options.width) self.holder.style.width = self.options.width + 'px'; if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px'; if (self.options.height) self.holder.style.height = self.options.height + 'px';
canvas.width = self.CW = (options.width || canvas.offsetWidth); self.CW = self.holder.offsetWidth || self.CW;
canvas.height = self.CH = (options.height || canvas.offsetHeight); self.CH = self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 2 倍
self.R *= 2;
self.CW *= 2;
self.CH *= 2;
self.OffsetX *= 2;
self.OffsetY *= 2;
//
canvas.width = self.CW;
canvas.height = self.CH;
var cxt = self.cxt = canvas.getContext("2d"); var cxt = self.cxt = canvas.getContext("2d");
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径 //两个圆之间的外距离 就是说两个圆心的距离去除两个半径
var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2; var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2;
...@@ -90,7 +100,7 @@ ...@@ -90,7 +100,7 @@
var pointIndex = _LinePointArr[i]; var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y); cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
} }
cxt.lineWidth = 10; cxt.lineWidth = 10 * 2;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色 cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke(); cxt.stroke();
cxt.closePath(); cxt.closePath();
...@@ -113,13 +123,13 @@ ...@@ -113,13 +123,13 @@
cxt.fill(); cxt.fill();
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色 cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
cxt.beginPath(); cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true); cxt.arc(Point.X, Point.Y, R - 3 * 1, 0, Math.PI * 2, true);
cxt.closePath(); cxt.closePath();
cxt.fill(); cxt.fill();
if (_LinePointArr.indexOf(i) >= 0) { if (_LinePointArr.indexOf(i) >= 0) {
cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色 cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
cxt.beginPath(); cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 16, 0, Math.PI * 2, true); cxt.arc(Point.X, Point.Y, R - 16 * 2, 0, Math.PI * 2, true);
cxt.closePath(); cxt.closePath();
cxt.fill(); cxt.fill();
} }
...@@ -149,8 +159,8 @@ ...@@ -149,8 +159,8 @@
//start //start
self._startHandler = function(e) { self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft); e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop); e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
self.isPointSelect(e.point, linePoint); self.isPointSelect(e.point, linePoint);
isDown = true; isDown = true;
}; };
...@@ -160,8 +170,8 @@ ...@@ -160,8 +170,8 @@
if (!isDown) return; if (!isDown) return;
e.preventDefault(); e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft); e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop); e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
var touches = e.point; var touches = e.point;
self.isPointSelect(touches, linePoint); self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH); cxt.clearRect(0, 0, self.CW, self.CH);
...@@ -174,8 +184,8 @@ ...@@ -174,8 +184,8 @@
//end //end
self._endHandler = function(e) { self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft); e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop); e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
cxt.clearRect(0, 0, self.CW, self.CH); cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null); self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据 //事件数据
......
examples/hello-mui/js/mui.locker.md 0 → 100644
View file @ 438e6f75
### 集成方式
1. 首先在页面中引入 mui ，包括相关 style 和 script
### 使用方式
1. 通过实例化 Locker, 示例: new Locker(element, options);
2. 通过扩展方法, 示例: mui('选择器').locker(options);
3. 通过添加 className, 示例: <div class='mui-locker' data-locker-options='{}'></div> (注: data-locker-options 值为 options 的 json 字符串);
### options 结构说明
```javascript
{
lineColor: "#999", //连接线颜色，省略时此参数将使用默认值
ringColor: "#888", //圆圈边框颜色，省略时此参数将使用默认值
fillColor: "#f3f3f3", //圆圈填充颜色，省略时此参数将使用默认值
pointColor: "#777", //圆圈中心点颜色，省略时此参数将使用默认值
width:300 , //宽度，通常省略，省略时可以通过 element 的样式控制
height:300, //高度，通常少略，省略时可以通过 element 的样式控制
}
```
### done 事件
1. 可以通过 element.addEventListener('done',function(event){},false); 处理 "绘的制完成" 事件
2. event.detail.points 为绘制结果，points 是一个数组，包括了当时绘制手势数据
3. event.detail.sender 为当前 "手势解锁" 实例，包括 clear 方法，可以清除当前会制的内容
### 示例
HMTL:
```html
<div id='holder' class="mui-locker" style="width:300px;height:300px;" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div>
```
JavaScript:
```javascript
(function($,doc){
$.init();
var holder = doc.querySelector('#holder'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = [];
rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
alert.innerText = '手势设定完成';
} else {
alert.innerText = '两次手势设定不一致';
}
rs.sender.clear();
record = [];
} else {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
```
examples/hello-mui/js/mui.min.js
View file @ 438e6f75
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.view.js
View file @ 438e6f75
/** /**
* <div class=“mui-views"> * <div id="app" class="mui-views">
<div class=“mui-view"> <div class="mui-view">
<div class=“mui-navbar"> <div class="mui-navbar">
<div class=“mui-navbar-inner”>
<div class=“mui-navbar-left”></div>
<div class=“mui-navbar-center”></div>
<div class=“mui-navbar-right”></div>
</div>
<div class=“mui-navbar-inner”>
<div class=“mui-navbar-left”></div>
<div class=“mui-navbar-center”></div>
<div class=“mui-navbar-right”></div>
</div>
</div> </div>
<div class=“mui-pages”> <div class="mui-pages">
<div class=“mui-page”>
<div class=“mui-page-content"></div>
</div>
<div class=“mui-page”>
<div class=“mui-page-content"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -107,6 +91,7 @@ ...@@ -107,6 +91,7 @@
} }
}, },
initEvent: function() { initEvent: function() {
this.view.addEventListener('click', this);
this.view.addEventListener('tap', this); this.view.addEventListener('tap', this);
this.pages.addEventListener('drag', this); this.pages.addEventListener('drag', this);
this.pages.addEventListener('dragend', this); this.pages.addEventListener('dragend', this);
...@@ -114,6 +99,9 @@ ...@@ -114,6 +99,9 @@
}, },
handleEvent: function(event) { handleEvent: function(event) {
switch (event.type) { switch (event.type) {
case 'click':
this._click(event);
break;
case 'tap': case 'tap':
this._tap(event); this._tap(event);
break; break;
...@@ -184,6 +172,18 @@ ...@@ -184,6 +172,18 @@
} }
} }
}, },
_click: function(event) {
var target = event.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A' && target.hash) {
var page = document.getElementById(target.hash.replace('#', ''));
if (page && page.classList.contains(CLASS_PAGE)) {
event.preventDefault();
break;
}
}
}
},
_cleanStyle: function(el) { _cleanStyle: function(el) {
if (el) { if (el) {
el.style.webkitTransform = ''; el.style.webkitTransform = '';
...@@ -192,10 +192,10 @@ ...@@ -192,10 +192,10 @@
}, },
_webkitTransitionEnd: function(event) { _webkitTransitionEnd: function(event) {
this.dragging = this.moved = false; this.dragging = this.moved = false;
if (this.activePage !== event.target) { if (this.activePage !== event.target) {
return; return;
} }
this.isInTransition = false; this.isInTransition = false;
this.shadow.parentNode === this.activePage && this.activePage.removeChild(this.shadow); this.shadow.parentNode === this.activePage && this.activePage.removeChild(this.shadow);
...@@ -575,7 +575,6 @@ ...@@ -575,7 +575,6 @@
this._appendPage(nextPage); this._appendPage(nextPage);
nextPage.appendChild(this.shadow); //shadow nextPage.appendChild(this.shadow); //shadow
nextPage.offsetHeight; //force nextPage.offsetHeight; //force
this.isBack = false; this.isBack = false;
this.ratio = 1; this.ratio = 1;
......
examples/hello-mui/js/update.js
View file @ 438e6f75
(function(w){ var server="http://www.dcloud.io/check/update";//获取升级描述文件服务器地址
var server="http://www.dcloud.io/hellomui/update.json",//获取升级描述文件服务器地址
localDir="update",localFile="update.json",//本地保存升级描述目录和文件名
keyUpdate="updateCheck",//取消升级键名
keyAbort="updateAbort",//忽略版本键名
checkInterval=3600000,//升级检查间隔，单位为ms,1小时为60*60*1000=3600000, 如果每次启动需要检查设置值为0
dir=null;
/**
* 准备升级操作
* 创建升级文件保存目录
*/
function initUpdate(){
// 打开doc根目录
plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){
fs.root.getDirectory( localDir, {create:true}, function(entry){
dir = entry;
checkUpdate();
}, function(e){
console.log( "准备升级操作，打开update目录失败："+e.message );
});
},function(e){
console.log( "准备升级操作，打开doc目录失败："+e.message );
});
}
/**
* 检测程序升级
*/
function checkUpdate() {
// 判断升级检测是否过期
var lastcheck = plus.storage.getItem( keyUpdate );
if ( lastcheck ) {
var dc = parseInt( lastcheck );
var dn = (new Date()).getTime();
if ( dn-dc < checkInterval ) { // 未超过上次升级检测间隔，不需要进行升级检查
return;
}
// 取消已过期，删除取消标记
plus.storage.removeItem( keyUpdate );
}
// 读取本地升级文件
dir.getFile( localFile, {create:false}, function(fentry){
fentry.file( function(file){
var reader = new plus.io.FileReader();
reader.onloadend = function ( e ) {
fentry.remove();
var data = null;
try{
data=JSON.parse(e.target.result);
}catch(e){
console.log( "读取本地升级文件，数据格式错误！" );
return;
}
checkUpdateData( data );
}
reader.readAsText(file);
}, function(e){
console.log( "读取本地升级文件，获取文件对象失败："+e.message );
fentry.remove();
} );
}, function(e){
// 失败表示文件不存在，从服务器获取升级数据
getUpdateData();
});
}
/**
* 检查升级数据
*/
function checkUpdateData( j ){
//当前客户端版本号
var curVer=plus.runtime.version,
inf = j[plus.os.name];
if ( inf ){
var srvVer = inf.version;
// 判断是否存在忽略版本号
var vabort = plus.storage.getItem( keyAbort );
if ( vabort && srvVer==vabort ) {
// 忽略此版本
return;
}
// 判断是否需要升级
if ( compareVersion(curVer,srvVer) ) {
// 提示用户是否升级
plus.ui.confirm( inf.note, function(i){
if ( 0==i ) {
plus.runtime.openURL( inf.url );
} else if ( 1==i ) {
plus.storage.setItem( keyAbort, srvVer );
plus.storage.setItem( keyUpdate, (new Date()).getTime().toString() );
} else {
plus.storage.setItem( keyUpdate, (new Date()).getTime().toString() );
}
}, inf.title, ["立即更新","跳过此版本","取　　消"] );
}
}
}
/**
* 从服务器获取升级数据，并存储到本地；
*/
function getUpdateData(){
mui.getJSON(server,{},function (data) {
//appid一致，才将服务器上的版本数据保存到本地
if(data.appid==plus.runtime.appid){
// 保存到本地文件中
dir.getFile( localFile, {create:true}, function(fentry){
fentry.createWriter( function(writer){
writer.onerror = function(){
console.log( "获取升级数据，保存文件失败！" );
}
writer.write(data);
}, function(e){
console.log( "获取升级数据，创建写文件对象失败："+e.message );
} );
}, function(e){
console.log( "获取升级数据，打开保存文件失败："+e.message );
});
}
});
}
/** function update(){
* 比较版本大小，如果新版本nv大于旧版本ov则返回true，否则返回false mui.getJSON(server,{"appid":plus.runtime.appid,"version":plus.runtime.version,"imei":plus.device.imei},function (data) {
* @param {String} ov if(data.status){
* @param {String} nv plus.ui.confirm( data.note, function(i){
* @return {Boolean} if ( 0==i ) {
*/ plus.runtime.openURL( data.url );
function compareVersion( ov, nv ){ }
if ( !ov || !nv || ov=="" || nv=="" ){ }, data.title, ["立即更新","取　　消"] );
return false;
}
var b=false,
ova = ov.split(".",4),
nva = nv.split(".",4);
for ( var i=0; i<ova.length&&i<nva.length; i++ ) {
var so=ova[i],no=parseInt(so),sn=nva[i],nn=parseInt(sn);
if ( nn>no || sn.length>so.length ) {
return true;
} else if ( nn<no ) {
return false;
}
}
if ( nva.length>ova.length && 0==nv.indexOf(ov) ) {
return true;
} }
} });
}
mui.plusReady(initUpdate);
})(window); mui.plusReady(update);
\ No newline at end of file \ No newline at end of file
examples/hello-mui/list.html
View file @ 438e6f75
...@@ -127,11 +127,6 @@ ...@@ -127,11 +127,6 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/locker-dom.html">
gesture locker（手势图案锁屏）
</a>
</li>
<li class="mui-table-view-cell mui-collapse"> <li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#"> <a class="mui-navigate-right" href="#">
grid（9宫格） grid（9宫格）
...@@ -237,6 +232,11 @@ ...@@ -237,6 +232,11 @@
div模式左滑菜单 div模式左滑菜单
</a> </a>
</li> </li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html">
div模式下滑菜单
</a>
</li>
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
...@@ -254,6 +254,11 @@ ...@@ -254,6 +254,11 @@
pull to refresh（下拉刷新和上拉加载更多） pull to refresh（下拉刷新和上拉加载更多）
</a> </a>
</li> </li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/tab-with-viewpagerindicator-2.html">
div模式的下拉刷新
</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/radio.html"> <a class="mui-navigate-right" href="examples/radio.html">
...@@ -282,7 +287,7 @@ ...@@ -282,7 +287,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell ios-only"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/setting.html"> <a class="mui-navigate-right" open-type="common" href="examples/setting.html">
setting（设置） setting（设置）
</a> </a>
...@@ -319,12 +324,41 @@ ...@@ -319,12 +324,41 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/typography.html"> <a class="mui-navigate-right" href="examples/typography.html">
typography（文字） typography（文字）
</a> </a>
</li> </li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/imageviewer.html">
image viewer（图片预览）
</a>
</li>
<li class="mui-table-view-divider">模板</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/locker-dom.html">
locker（手势图案锁屏）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/im-chat.html">
chat（聊天窗口）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/guide.html">
guide（应用引导页）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载）
</a>
</li>
</ul> </ul>
</div> </div>
<script src="js/mui.min.js"></script> <script src="js/mui.min.js"></script>
<script> <script>
...@@ -338,7 +372,6 @@ ...@@ -338,7 +372,6 @@
} }
} }
mui.init(); mui.init();
var templates = {}; var templates = {};
var getTemplate = function(name, header, content, loading) { var getTemplate = function(name, header, content, loading) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment