Skip to content

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

完善侧滑导航示例，隐藏进度提示框

parent 0d1943cf
Show whitespace changes
Inline Side-by-side
Showing with 196 additions and 115 deletions
examples/hello-mui/examples/grid-pagination.html
View file @ bd5c71f4
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
.mui-slider-indicator { .mui-slider-indicator {
bottom: 0; bottom: 0;
} }
.mui-slider{ .mui-slider {
background-color:#f2f2f2; background-color: #f2f2f2;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
...@@ -48,95 +48,176 @@ ...@@ -48,95 +48,176 @@
<div class="mui-slider-group"> <div class="mui-slider-group">
<div class="mui-slider-item"> <div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9"> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li> <div class="mui-media-body">Home</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li> <div class="mui-media-body">Email</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span> <span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li> <div class="mui-media-body">Chat</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span> <span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li> <div class="mui-media-body">location</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span> <span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li> <div class="mui-media-body">Search</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li> <div class="mui-media-body">Phone</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-gear"></span> <span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div></a></li> <div class="mui-media-body">Setting</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-info"></span> <span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div></a></li> <div class="mui-media-body">about</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-more"></span> <span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li> <div class="mui-media-body">more</div>
</a>
</li>
</ul> </ul>
</div> </div>
<div class="mui-slider-item"> <div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9"> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li> <div class="mui-media-body">Home</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li> <div class="mui-media-body">Email</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span> <span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li> <div class="mui-media-body">Chat</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span> <span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li> <div class="mui-media-body">location</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span> <span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li> <div class="mui-media-body">Search</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li> <div class="mui-media-body">Phone</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-gear"></span> <span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div></a></li> <div class="mui-media-body">Setting</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-info"></span> <span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div></a></li> <div class="mui-media-body">about</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-more"></span> <span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li> <div class="mui-media-body">more</div>
</a>
</li>
</ul> </ul>
</div> </div>
<div class="mui-slider-item"> <div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9"> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div></a></li> <div class="mui-media-body">Home</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li> <div class="mui-media-body">Email</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chatbubble"></span> <span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li> <div class="mui-media-body">Chat</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-location"></span> <span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li> <div class="mui-media-body">location</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span> <span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li> <div class="mui-media-body">Search</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li> <div class="mui-media-body">Phone</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-gear"></span> <span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div></a></li> <div class="mui-media-body">Setting</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-info"></span> <span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div></a></li> <div class="mui-media-body">about</div>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> </a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-more"></span> <span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li> <div class="mui-media-body">more</div>
</a>
</li>
</ul> </ul>
</div> </div>
...@@ -149,13 +230,13 @@ ...@@ -149,13 +230,13 @@
</div> </div>
</div> </div>
<script> <script>
$.init({ mui.init({
swipeBack : false, swipeBack: false,
}); });
$.ready(function() { mui.ready(function() {
var slider = document.getElementById('Gallery'); var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group'); var group = slider.querySelector('.mui-slider-group');
var items = $('.mui-slider-item', group); var items = mui('.mui-slider-item', group);
var first = items[0].cloneNode(true); var first = items[0].cloneNode(true);
first.classList.add('mui-slider-item-duplicate'); first.classList.add('mui-slider-item-duplicate');
var last = items[items.length - 1].cloneNode(true); var last = items[items.length - 1].cloneNode(true);
...@@ -178,9 +259,7 @@ ...@@ -178,9 +259,7 @@
var detail = e.detail; var detail = e.detail;
toggleLoop(detail.isActive); toggleLoop(detail.isActive);
}); });
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ bd5c71f4
...@@ -30,49 +30,51 @@ ...@@ -30,49 +30,51 @@
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4> <h4 style="margin-top:10px;">mui</h4>
<p > <p>
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败 性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败 ； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
</p> </p>
<p > <p>
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。 mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
</p> </p>
<h4>新手指南</h4> <h4>新手指南</h4>
<p> <p>
若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。 若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
</p><p> </p>
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。 <p>
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
</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>当前版本为0.5.6，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为0.5.6，可到<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>;
</p> </p>
</div> </div>
</div> </div>
<style type="text/css"> <style type="text/css">
p{ p {
text-indent: 22px; text-indent: 22px;
padding: 5px 8px; padding: 5px 8px;
} }
html,body,.mui-content{ html,
body,
.mui-content {
background-color: #fff; background-color: #fff;
} }
h4{ h4 {
margin-left: 5px; margin-left: 5px;
} }
</style> </style>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
//处理点击事件，需要打开原生浏览器 //处理点击事件，需要打开原生浏览器
$('body').on('tap', 'a', function(e) { mui('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href'); var href = this.getAttribute('href');
if (href) { if (href) {
if(window.plus){ if (window.plus) {
plus.runtime.openURL(href); plus.runtime.openURL(href);
}else{ } else {
location.href = href; location.href = href;
} }
} }
......
examples/hello-mui/examples/offcanvas-left-plus-main.html
View file @ bd5c71f4
...@@ -135,8 +135,8 @@ ...@@ -135,8 +135,8 @@
width: '70%', width: '70%',
zindex: 9998 zindex: 9998
}, },
show:{ waiting:{
aniShow:'none' autoShow:false
} }
}); });
//初始化主页面位置 //初始化主页面位置
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ bd5c71f4
...@@ -132,8 +132,8 @@ ...@@ -132,8 +132,8 @@
width:'70%', width:'70%',
zindex: 9998 zindex: 9998
}, },
show:{ waiting:{
aniShow:'none' autoShow:false
} }
}); });
mui.currentWebview.setStyle({left:0}); mui.currentWebview.setStyle({left:0});
......
examples/hello-mui/examples/switches.html
View file @ bd5c71f4
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
// mui.plusReady(function(){ // mui.plusReady(function(){
// plus.webview.currentWebview().setStyle({bounce:'none'}); // plus.webview.currentWebview().setStyle({bounce:'none'});
// }); // });
$('.mui-content .mui-switch').each(function() {//循环所有toggle mui('.mui-content .mui-switch').each(function() {//循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态 //toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false'); this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
/** /**
......
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