Skip to content

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

编译至mui v0.9.0

parent 9342e363
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2062 additions and 1721 deletions
dist/css/mui.css
View file @ bd7348c0
This diff is collapsed.
dist/css/mui.min.css
View file @ bd7348c0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ bd7348c0
This diff is collapsed.
dist/js/mui.min.js
View file @ bd7348c0
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.tpl.js
View file @ bd7348c0
/*! /*!
* ===================================================== * =====================================================
* Mui v0.8.0 (https://github.com/dcloudio/mui) * Mui v0.9.0 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
/*! /*!
......
dist/js/mui.tpl.min.js
View file @ bd7348c0
This diff is collapsed.
examples/hello-mui/css/mui.min.css
View file @ bd7348c0
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/actionsheet.html 0 → 100644
View file @ bd7348c0
<!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>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
</style>
<script>
mui.init();
</script>
</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">Popovers with action sheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#delete">
<span class="mui-icon mui-icon-trash"></span>
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#forward">
<span class="mui-icon mui-icon-undo"></span>
</a>
</nav>
<div class="mui-content">
<div class="mui-content-padded">
<p>Actionsheet一般从底部弹出，显示一系列可选择的操作按钮，供用户选择；
ActionSheet可从任意位置触发，
点击本页面左下角<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框；
点击本页面右下角<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框；
你也可点击如下按钮，打开照片选择框：
</p>
<p>
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a>
</p>
</div>
</div>
<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#" style="color: #FF3B30;">删除信息</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#delete"><b>取消</b></a>
</li>
</ul>
</div>
<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">回复</a>
</li>
<li class="mui-table-view-cell">
<a href="#">转发</a>
</li>
<li class="mui-table-view-cell">
<a href="#">打印</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#forward"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">拍照或录像</a>
</li>
<li class="mui-table-view-cell">
<a href="#">选取现有的</a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/grid-default.html
View file @ bd7348c0
...@@ -34,14 +34,6 @@ ...@@ -34,14 +34,6 @@
<h1 class="mui-title">9宫格默认样式</h1> <h1 class="mui-title">9宫格默认样式</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-hidden" style="margin-bottom:15px;">
<li class="mui-table-view-cell">cared
<div id="M_Toggle_Grid_Carded" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-card">
<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>
...@@ -71,26 +63,8 @@ ...@@ -71,26 +63,8 @@
<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>
<script>
var content = document.querySelector('.mui-content');
var toggle = document.getElementById('M_Toggle_Grid_Carded');
var card = document.querySelector('.mui-card');
var grid = document.querySelector('.mui-grid-view');
toggle.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
if (isActive) {
card.appendChild(grid);
card.style.display = '';
} else {
content.appendChild(grid);
card.style.display = 'none';
}
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/icons.html
View file @ bd7348c0
...@@ -31,6 +31,16 @@ ...@@ -31,6 +31,16 @@
<body> <body>
<style> <style>
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
text-align: center;
}
.mui-content-padded { .mui-content-padded {
padding: 10px; padding: 10px;
} }
...@@ -43,7 +53,7 @@ ...@@ -43,7 +53,7 @@
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 25px; border-radius: 25px;
float: left; background-clip: padding-box;
} }
.mui-content-padded a .mui-icon { .mui-content-padded a .mui-icon {
margin-top: 12px; margin-top: 12px;
...@@ -67,8 +77,9 @@ ...@@ -67,8 +77,9 @@
<h1 class="mui-title">Icons</h1> <h1 class="mui-title">Icons</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded" > <div class="mui-content-padded">
<p>点击图标查看高亮样式</p> <p style="text-align: center;">点击图标查看高亮样式</p>
<div class="flex-container">
<a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a> <a id="icon-icon-contact"><span class="mui-icon mui-icon-contact"></span></a>
<a id="icon-person"><span class="mui-icon mui-icon-person"></span></a> <a id="icon-person"><span class="mui-icon mui-icon-person"></span></a>
<a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a> <a id="icon-personadd"><span class="mui-icon mui-icon-personadd"></span></a>
...@@ -152,6 +163,8 @@ ...@@ -152,6 +163,8 @@
<a><span class="mui-icon mui-icon-arrowthinright"></span></a> <a><span class="mui-icon mui-icon-arrowthinright"></span></a>
<a><span class="mui-icon mui-icon-pulldown"></span></a> <a><span class="mui-icon mui-icon-pulldown"></span></a>
</div>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/info.html
View file @ bd7348c0
...@@ -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>当前版本为0.8.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为0.9.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/media-list.html
View file @ bd7348c0
...@@ -12,16 +12,17 @@ ...@@ -12,16 +12,17 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html,body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar{ header.mui-bar {
display: none; display: none;
} }
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
.title{ .title {
margin: 20px 15px 10px; margin: 20px 15px 10px;
color: #6d6d72; color: #6d6d72;
font-size: 15px; font-size: 15px;
...@@ -33,11 +34,61 @@ ...@@ -33,11 +34,61 @@
</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>
<h1 class="mui-title">缩略图居左</h1> <h1 class="mui-title">缩略图居左</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<!--<ul class="mui-table-view mui-unfold">
<li class="mui-table-view-cell mui-collapse mui-media mui-media-icon">
<a href="#">
<div class="mui-media-object mui-pull-left">
<img src="../images/shuijiao.jpg">
</div>
<div class="mui-media-body">
幸福
</div>
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media mui-media-icon">
<a href="#">
<div class="mui-media-object mui-pull-left"><span class="mui-icon mui-icon-contact"></span>
</div>
<div class="mui-media-body">
幸福
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-media-icon">
<a href="#">
<div class="mui-media-object mui-pull-left"><span class="mui-icon mui-icon-contact"></span>
</div>
<div class="mui-media-body">
幸福
</div>
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell mui-media mui-media-icon">
<a href="#">
<div class="mui-media-object mui-pull-left"><span class="mui-icon mui-icon-contact"></span>
</div>
<div class="mui-media-body">
幸福
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-media-icon">
<a href="#">
<div class="mui-media-object mui-pull-left"><span class="mui-icon mui-icon-contact"></span>
</div>
<div class="mui-media-body">
幸福
</div>
</a>
</li>
</ul>-->
<div class="title"> <div class="title">
缩略图居左 缩略图居左
</div> </div>
...@@ -171,6 +222,6 @@ ...@@ -171,6 +222,6 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/nav.html 0 → 100644
View file @ bd7348c0
<!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>
<script src="../js/app.js"></script>
<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 type="text/javascript">
mui.init();
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>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-actionsheet.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</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">Popovers with action sheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#mark">
Mark
</a>
<a class="mui-tab-item" href="#flagged">
Flagged
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#">
</a>
</nav>
<div id="mark" class="mui-popover mui-popover-action mui-popover-bottom">
<div class="mui-content-padded">
<button class="mui-btn mui-btn-primary mui-btn-block">As Read</button>
<button class="mui-btn mui-btn-positive mui-btn-block">As Unread</button>
<button class="mui-btn mui-btn-negative mui-btn-block">As Junk Mail</button>
<a class="mui-btn mui-btn-block" href="#mark">Cancel</a>
</div>
</div>
<div id="flagged" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Red</a></li>
<li class="mui-table-view-cell"><a href="#">Orange</a></li>
<li class="mui-table-view-cell"><a href="#">Yellow</a></li>
<li class="mui-table-view-cell"><a href="#">Green</a></li>
<li class="mui-table-view-cell"><a href="#">Blue</a></li>
<li class="mui-table-view-cell"><a href="#">Purple</a></li>
<li class="mui-table-view-cell"><a href="#">Gray</a></li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers.html
View file @ bd7348c0
...@@ -16,23 +16,7 @@ ...@@ -16,23 +16,7 @@
body { body {
background-color: #efeff4; background-color: #efeff4;
} }
/*header.mui-bar {
display: none;
}*/
.mui-content {
padding: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
/*跨webview需要手动指定位置*/ /*跨webview需要手动指定位置*/
#topPopover { #topPopover {
position: fixed; position: fixed;
top: 16px; top: 16px;
...@@ -42,26 +26,7 @@ ...@@ -42,26 +26,7 @@
left: auto; left: auto;
right: 6px; right: 6px;
} }
#actionSheet .mui-table-view {
border-radius: 4px;
}
#actionSheet .mui-table-view-cell {
padding: 15px;
text-align: center;
}
#actionSheet .mui-table-view .mui-table-view-cell:first-child,
#actionSheet .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
#actionSheet .mui-table-view .mui-table-view-cell:last-child,
#actionSheet .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.mui-backdrop-action.mui-backdrop {
bottom: 0;
}
p { p {
text-indent: 22px; text-indent: 22px;
} }
...@@ -74,7 +39,17 @@ ...@@ -74,7 +39,17 @@
.mui-popover { .mui-popover {
height: 300px; height: 300px;
} }
.mui-content {
padding: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-footer"> <header class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a> <a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
</header> </header>
......
examples/hello-mui/examples/pullrefresh.html
View file @ bd7348c0
...@@ -16,95 +16,13 @@ ...@@ -16,95 +16,13 @@
body { body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar {
display: none;
}
.mui-bar-nav ~ .mui-content {
padding: 0;
}
</style> </style>
</head> </head>
<body> <body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll"> <div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron"></ul>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 15
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 14
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 13
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 12
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 11
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 10
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 9
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>-->
</ul>
</div> </div>
</div> </div>
<script> <script>
......
examples/hello-mui/examples/switches.html
View file @ bd7348c0
...@@ -34,7 +34,6 @@ ...@@ -34,7 +34,6 @@
<h1 class="mui-title">开关（switch）</h1> <h1 class="mui-title">开关（switch）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<span></span> <span></span>
...@@ -85,7 +84,6 @@ ...@@ -85,7 +84,6 @@
</div> </div>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<script> <script>
// mui.plusReady(function(){ // mui.plusReady(function(){
......
examples/hello-mui/examples/tab-webview-main.html
View file @ bd7348c0
...@@ -16,49 +16,38 @@ ...@@ -16,49 +16,38 @@
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</style>
<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>
<h1 class="mui-title">选项卡（Tab）</h1> <h1 id="title" class="mui-title">首页</h1>
</header> </header>
<nav class="mui-bar mui-bar-tab"> <nav class="mui-bar mui-bar-tab">
<a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-phone.html"> <a id="defaultTab" class="mui-tab-item mui-active" href="tab-webview-subpage-about.html">
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">电话咨询</span> <span class="mui-tab-label">首页</span>
</a> </a>
<a class="mui-tab-item" href="tab-webview-subpage-chat.html"> <a class="mui-tab-item" href="tab-webview-subpage-chat.html">
<span class="mui-icon mui-icon-email"></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">短信咨询</span> <span class="mui-tab-label">消息</span>
</a> </a>
<a class="mui-tab-item" href="tab-webview-subpage-contact.html"> <a class="mui-tab-item" href="tab-webview-subpage-contact.html">
<span class="mui-icon mui-icon-contact"></span> <span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span> <span class="mui-tab-label">通讯录</span>
</a> </a>
<a class="mui-tab-item" href="tab-webview-subpage-map.html"> <a class="mui-tab-item" href="tab-webview-subpage-setting.html">
<span class="mui-icon mui-icon-map"></span> <span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">查看地图</span> <span class="mui-tab-label">设置</span>
</a> </a>
</nav> </nav>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
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-phone.html','tab-webview-subpage-chat.html','tab-webview-subpage-contact.html','tab-webview-subpage-map.html'];
var subpage_style = { var subpage_style = {
top: '48px', top: '46px',
bottom: '50px' bottom: '50px'
}; };
//创建子页面，首个选项卡页面显示，其它均隐藏； //创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function(){ mui.plusReady(function(){
var self = plus.webview.currentWebview(); var self = plus.webview.currentWebview();
...@@ -71,24 +60,24 @@ ...@@ -71,24 +60,24 @@
} }
}); });
//当前激活选项，默认为第一个； //当前激活选项
var activeTab = subpages[0]; var activeTab = subpages[0];
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) {
return; return;
} }
//更换标题
//先隐藏当前的 title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
plus.webview.hide(activeTab); //显示目标选项卡
//再显示目标
plus.webview.show(targetTab); plus.webview.show(targetTab);
//隐藏当前;
plus.webview.hide(activeTab);
//更改当前活跃的选项卡 //更改当前活跃的选项卡
activeTab = targetTab; activeTab = targetTab;
}); });
</script> </script>
</body>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/titlebar-with-icons.html → examples/hello-mui/examples/tab-webview-subpage-about.html
View file @ bd7348c0
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -15,23 +14,24 @@ ...@@ -15,23 +14,24 @@
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
.mui-bar-nav~.mui-content{ .title{
padding: 0; margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
} }
</style> </style>
<script> <script>
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content">
<header class="mui-bar mui-bar-nav"> <div class="title">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <p>这是webview模式选项卡的第1个子页面</p>
<a class="mui-icon mui-icon-bars mui-pull-right"></a> <p>何谓webview模式？其实就是每个选项卡内容都是一个独立的webview，彼此之间互相独立、互不影响；
<h1 class="mui-title">导航条包含图标</h1> 对于较为复杂的业务系统，推荐使用该模式。</p>
</header> <p>基于webview模式的选项卡，支持原生加速的下拉刷新，点击第二个选项卡（“消息”），切换选项卡，体验下拉刷新；</p>
</div>
</body> </div>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ bd7348c0
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <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-capable" content="yes">
<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">
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
...@@ -15,34 +13,97 @@ ...@@ -15,34 +13,97 @@
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar{ .title{
display: none; margin: 20px 15px 10px;
} color: #6d6d72;
.mui-bar-nav~.mui-content{ font-size: 15px;
padding: 0;
} }
</style> </style>
<script> <script type="text/javascript" charset="utf-8">
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content">
<div class="title">
这是webview模式选项卡中的第2个子页面，该页面展示一个支持下拉刷新、上拉加载的消息列表
</div>
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
<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>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
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>
</div>
<h3>短信咨询</h3> </body>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.back = function(){
//执行父页面的关闭逻辑；
mui.currentWebview.opener().evalJS("mui.back()");
}
</script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ bd7348c0
...@@ -15,11 +15,35 @@ ...@@ -15,11 +15,35 @@
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar{ .title{
display: none; margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
} }
.mui-bar-nav~.mui-content{ .oa-contact-cell.mui-table .mui-table-cell {
padding: 0; padding: 11px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
} }
</style> </style>
<script> <script>
...@@ -28,21 +52,107 @@ ...@@ -28,21 +52,107 @@
</head> </head>
<body> <body>
<div class="mui-content">
<div class="title">
这是webview模式选项卡中的第3个子页面，该页面展示一个通讯录示例
</div>
<h3>通讯录</h3> <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<style type="text/css"> <li class="mui-table-view-cell">
h3{ <div class="mui-slider-cell">
text-align: center; <div class="oa-contact-cell mui-table">
margin: 50% auto; <div class="oa-contact-avatar mui-table-cell">
} <img src="../images/60x60.gif" />
</style> </div>
<script type="text/javascript" charset="utf-8"> <div class="oa-contact-content mui-table-cell">
mui.back = function(){ <div class="mui-clearfix">
//执行父页面的关闭逻辑； <h4 class="oa-contact-name">解缙</h4>
mui.currentWebview.opener().evalJS("mui.back()"); <span class="oa-contact-position mui-h6">文化部长</span>
} </div>
</script> <p class="oa-contact-email mui-h6">
chunyu@sina.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">张聪聪</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
zcc@163.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">马三保</h4>
<span class="oa-contact-position mui-h6">海军司令</span>
</div>
<p class="oa-contact-email mui-h6">
zhenghe@126.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">朱棣</h4>
<span class="oa-contact-position mui-h6">董事长</span>
</div>
<p class="oa-contact-email mui-h6">
zcc@163.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">吴丽丽</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
wulili@dh.cn
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-phone.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<h3>电话咨询</h3>
<style type="text/css">
h3{
text-align: center;
margin: 50% auto;
}
</style>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-map.html → examples/hello-mui/examples/tab-webview-subpage-setting.html
View file @ bd7348c0
...@@ -15,11 +15,10 @@ ...@@ -15,11 +15,10 @@
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar{ .title{
display: none; margin: 20px 15px 10px;
} color: #6d6d72;
.mui-bar-nav~.mui-content{ font-size: 15px;
padding: 0;
} }
</style> </style>
<script> <script>
...@@ -28,21 +27,47 @@ ...@@ -28,21 +27,47 @@
</head> </head>
<body> <body>
<!--<header class="mui-bar mui-bar-nav">
<h3>查看地图</h3> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<style type="text/css"> <h1 class="mui-title">设置</h1>
h3{ </header>-->
text-align: center; <div class="mui-content">
margin: 50% auto; <div class="title">
} 这是webview模式选项卡中的第4个子页面，该页面展示一个常见的设置示例
</style> </div>
<script type="text/javascript" charset="utf-8"> <ul class="mui-table-view">
mui.back = function(){ <li class="mui-table-view-cell">
//执行父页面的关闭逻辑； <a class="mui-navigate-right">
mui.currentWebview.opener().evalJS("mui.back()"); 新消息通知
} </a>
</script> </li>
<li class="mui-table-view-cell">
</body> <a class="mui-navigate-right">
隐私
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
通用
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
关于mui
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a style="text-align: center;color: #FF3B30;">
退出登录
</a>
</li>
</ul>
</div>
</style>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ bd7348c0
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div> <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group"> <div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper"> <div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll"> <div class="mui-scroll">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
...@@ -127,18 +127,28 @@ ...@@ -127,18 +127,28 @@
</div> </div>
</div> </div>
<div id="item2mobile" class="mui-slider-item mui-control-content"> <div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading"> <div class="mui-loading">
<div class="mui-spinner"> <div class="mui-spinner">
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content"> <div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading"> <div class="mui-loading">
<div class="mui-spinner"> <div class="mui-spinner">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
<h5 class="mui-content-padded">Color</h5> <h5 class="mui-content-padded">Color</h5>
...@@ -168,7 +178,7 @@ ...@@ -168,7 +178,7 @@
swipeBack: false swipeBack: false
}); });
(function($) { (function($) {
$('#scroll').scroll({ $('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条 indicators: true //是否显示滚动条
}); });
var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>'; var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
...@@ -179,13 +189,13 @@ ...@@ -179,13 +189,13 @@
if (e.detail.slideNumber === 1) { if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) { if (item2.querySelector('.mui-loading')) {
setTimeout(function() { setTimeout(function() {
item2.innerHTML = html2; item2.querySelector('.mui-scroll').innerHTML = html2;
}, 1000); }, 1000);
} }
} else if (e.detail.slideNumber === 2) { } else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) { if (item3.querySelector('.mui-loading')) {
setTimeout(function() { setTimeout(function() {
item3.innerHTML = html3; item3.querySelector('.mui-scroll').innerHTML = html3;
}, 1000); }, 1000);
} }
} }
......
examples/hello-mui/examples/tabbar.html
View file @ bd7348c0
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <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-capable" content="yes">
<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">
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
...@@ -19,7 +18,38 @@ ...@@ -19,7 +18,38 @@
display: none; display: none;
} }
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding-top: 0;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 11px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
} }
</style> </style>
<script> <script>
...@@ -28,49 +58,195 @@ ...@@ -28,49 +58,195 @@
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style>
.mui-control-content h3 {
padding-top: 100px;
text-align: center;
}
</style>
<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>
<h1 class="mui-title">选项卡（Tab）</h1> <h1 class="mui-title">选项卡（Tab）</h1>
</header> </header>
<nav class="mui-bar mui-bar-tab"> <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar"> <a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">电话咨询</span> <span class="mui-tab-label">首页</span>
</a> </a>
<a class="mui-tab-item" href="#tabbar-with-chat"> <a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">短信咨询</span> <span class="mui-tab-label">消息</span>
</a> </a>
<a class="mui-tab-item" href="#tabbar-with-contact"> <a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span> <span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span> <span class="mui-tab-label">通讯录</span>
</a> </a>
<a class="mui-tab-item" href="#tabbar-with-map"> <a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-map"></span> <span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">查看地图</span> <span class="mui-tab-label">设置</span>
</a> </a>
</nav> </nav>
<div class="mui-content"> <div class="mui-content">
<div id="tabbar" class="mui-control-content mui-active"> <div id="tabbar" class="mui-control-content mui-active">
<h3>电话咨询</h3> <div class="title">这是div模式选项卡中的第1个子页面.</div>
<div class="title">何谓div模式的选项卡？
其实就是通过DIV模拟一个独立页面，通过DIV的显示、隐藏模拟不同页面的切换，典型的SPA模式；</div>
<div class="title">
这种模式适合简单业务系统，因为每个选项卡内容要写在一个DIV中，
若逻辑复杂，会导致当前页面DOM结构繁杂，造成webview响应缓慢，甚至崩溃；
因此若系统较复杂，需要下拉刷新等操作，推荐使用webview模式的选项卡；</div>
</div> </div>
<div id="tabbar-with-chat" class="mui-control-content"> <div id="tabbar-with-chat" class="mui-control-content">
<h3>短信咨询</h3> <div class="title">这是div模式选项卡中的第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>
<div id="tabbar-with-contact" class="mui-control-content"> <div id="tabbar-with-contact" class="mui-control-content">
<h3>通讯录</h3> <div class="title">这是div模式选项卡中的第3个子页面，该页面展示一个通讯录示例.</div>
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">解缙</h4>
<span class="oa-contact-position mui-h6">文化部长</span>
</div>
<p class="oa-contact-email mui-h6">
chunyu@sina.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">张聪聪</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
zcc@163.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">马三保</h4>
<span class="oa-contact-position mui-h6">海军司令</span>
</div>
<p class="oa-contact-email mui-h6">
zhenghe@126.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">朱棣</h4>
<span class="oa-contact-position mui-h6">董事长</span>
</div>
<p class="oa-contact-email mui-h6">
zcc@163.com
</p>
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="../images/60x60.gif" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">吴丽丽</h4>
<span class="oa-contact-position mui-h6">理事长</span>
</div>
<p class="oa-contact-email mui-h6">
wulili@dh.cn
</p>
</div>
</div>
</div>
</li>
</ul>
</div> </div>
<div id="tabbar-with-map" class="mui-control-content"> <div id="tabbar-with-map" class="mui-control-content">
<h3>查看地图</h3> <div class="title">这是div模式选项卡中的第4个子页面，该页面展示一个常见的设置示例.</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
新消息通知
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
隐私
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
通用
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
关于mui
</a>
</li>
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a style="text-align: center;color: #FF3B30;">
退出登录
</a>
</li>
</ul>
</div>
</div> </div>
</div>
</body> </body>
......
examples/hello-mui/examples/template_pullrefresh.html
View file @ bd7348c0
...@@ -16,14 +16,6 @@ ...@@ -16,14 +16,6 @@
body { body {
background-color: #efeff4; background-color: #efeff4;
} }
.mui-loader {
position: absolute;
top: 25%;
width: 100%;
height: 60%;
color: #888;
text-align: center;
}
.mui-fadein { .mui-fadein {
/*-webkit-animation: fadein 0.1s; /*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/ animation: fadein 0.1s;*/
...@@ -69,15 +61,13 @@ ...@@ -69,15 +61,13 @@
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1> <h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content"></div>
<div class="mui-loader"></div>
</div>
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
var titleElem = document.getElementById("title"); var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) { window.addEventListener("updateHeader", function(e) {
......
examples/hello-mui/examples/titlebar-with-buttons.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<button class="mui-action-back mui-btn mui-pull-left">
back
</button>
<button id="M_Menu" class="mui-btn mui-btn-primary mui-btn-link mui-pull-right">
完成
</button>
<h1 class="mui-title">导航条包含按钮</h1>
</header>
<div class="mui-content">
</div>
<script>
document.getElementById('M_Menu').addEventListener('tap', function() {
mui.alert('你刚点了按钮');
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/titlebar-with-search.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<input type="search" class="mui-pull-right" placeholder="search">
<h1 class="mui-title">带搜索框的导航栏</h1>
</header>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/titlebar-with-text-and-icons.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-bar .mui-title{
right:80px;
left:80px;
}
</style>
<header class="mui-bar mui-bar-nav">
<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>
back
</button>
<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right">
menu
<span class="mui-icon mui-icon-bars"></span>
</button>
<h1 class="mui-title">导航条同时包含文字和图标</h1>
</header>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/titlebar.html deleted 100644 → 0
View file @ 9342e363
<!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>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</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">导航栏</h1>
</header>
</body>
</html>
\ No newline at end of file
examples/hello-mui/index.html
View file @ bd7348c0
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
mask&&(mask.hide()); mask&&(mask.hide());
//主窗体开始侧滑； //主窗体开始侧滑；
mui.currentWebview.setStyle({ mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%', left: '0',
transition: { transition: {
duration: 200 duration: 200
} }
......
examples/hello-mui/js/mui.min.js
View file @ bd7348c0
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.tpl.js
View file @ bd7348c0
/*! /*!
* ===================================================== * =====================================================
* Mui v0.8.0 (https://github.com/dcloudio/mui) * Mui v0.9.0 (https://github.com/dcloudio/mui)
* ===================================================== * =====================================================
*/ */
/*! /*!
......
examples/hello-mui/js/mui.tpl.min.js
View file @ bd7348c0
This diff is collapsed.
examples/hello-mui/js/update.js
View file @ bd7348c0
(function(w){ (function(w){
var server="http://d.dcloud.net.cn/hellomui/update.json",//获取升级描述文件服务器地址 var server="http://www.dcloud.io/hellomui/update.json",//获取升级描述文件服务器地址
localDir="update",localFile="update.json",//本地保存升级描述目录和文件名 localDir="update",localFile="update.json",//本地保存升级描述目录和文件名
keyUpdate="updateCheck",//取消升级键名 keyUpdate="updateCheck",//取消升级键名
keyAbort="updateAbort",//忽略版本键名 keyAbort="updateAbort",//忽略版本键名
checkInterval=60480000,//升级检查间隔，单位为ms,7天为7*24*60*60*1000=60480000, 如果每次启动需要检查设置值为0 checkInterval=60480000,//升级检查间隔，单位为ms,7天为7*24*60*60*1000=60480000, 如果每次启动需要检查设置值为0
dir=null; dir=null;
/** /**
* 准备升级操作 * 准备升级操作
* 创建升级文件保存目录 * 创建升级文件保存目录
*/ */
function initUpdate(){ function initUpdate(){
// 打开doc根目录 // 打开doc根目录
plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){ plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){
fs.root.getDirectory( localDir, {create:true}, function(entry){ fs.root.getDirectory( localDir, {create:true}, function(entry){
...@@ -22,12 +22,12 @@ function initUpdate(){ ...@@ -22,12 +22,12 @@ function initUpdate(){
},function(e){ },function(e){
console.log( "准备升级操作，打开doc目录失败："+e.message ); console.log( "准备升级操作，打开doc目录失败："+e.message );
}); });
} }
/** /**
* 检测程序升级 * 检测程序升级
*/ */
function checkUpdate() { function checkUpdate() {
// 判断升级检测是否过期 // 判断升级检测是否过期
var lastcheck = plus.storage.getItem( keyUpdate ); var lastcheck = plus.storage.getItem( keyUpdate );
if ( lastcheck ) { if ( lastcheck ) {
...@@ -63,12 +63,12 @@ function checkUpdate() { ...@@ -63,12 +63,12 @@ function checkUpdate() {
// 失败表示文件不存在，从服务器获取升级数据 // 失败表示文件不存在，从服务器获取升级数据
getUpdateData(); getUpdateData();
}); });
} }
/** /**
* 检查升级数据 * 检查升级数据
*/ */
function checkUpdateData( j ){ function checkUpdateData( j ){
var curVer=plus.runtime.version, var curVer=plus.runtime.version,
inf = j[plus.os.name]; inf = j[plus.os.name];
if ( inf ){ if ( inf ){
...@@ -94,12 +94,12 @@ function checkUpdateData( j ){ ...@@ -94,12 +94,12 @@ function checkUpdateData( j ){
}, inf.title, ["立即更新","跳过此版本","取　　消"] ); }, inf.title, ["立即更新","跳过此版本","取　　消"] );
} }
} }
} }
/** /**
* 从服务器获取升级数据 * 从服务器获取升级数据
*/ */
function getUpdateData(){ function getUpdateData(){
var xhr = new plus.net.XMLHttpRequest(); var xhr = new plus.net.XMLHttpRequest();
xhr.onreadystatechange = function () { xhr.onreadystatechange = function () {
switch ( xhr.readyState ) { switch ( xhr.readyState ) {
...@@ -128,15 +128,15 @@ function getUpdateData(){ ...@@ -128,15 +128,15 @@ function getUpdateData(){
} }
xhr.open( "GET", server ); xhr.open( "GET", server );
xhr.send(); xhr.send();
} }
/** /**
* 比较版本大小，如果新版本nv大于旧版本ov则返回true，否则返回false * 比较版本大小，如果新版本nv大于旧版本ov则返回true，否则返回false
* @param {String} ov * @param {String} ov
* @param {String} nv * @param {String} nv
* @return {Boolean} * @return {Boolean}
*/ */
function compareVersion( ov, nv ){ function compareVersion( ov, nv ){
if ( !ov || !nv || ov=="" || nv=="" ){ if ( !ov || !nv || ov=="" || nv=="" ){
return false; return false;
} }
...@@ -154,12 +154,12 @@ function compareVersion( ov, nv ){ ...@@ -154,12 +154,12 @@ function compareVersion( ov, nv ){
if ( nva.length>ova.length && 0==nv.indexOf(ov) ) { if ( nva.length>ova.length && 0==nv.indexOf(ov) ) {
return true; return true;
} }
} }
if ( w.plus ) { if ( w.plus ) {
initUpdate(); initUpdate();
} else { } else {
document.addEventListener("plusready", initUpdate, false ); document.addEventListener("plusready", initUpdate, false );
} }
})(window); })(window);
\ No newline at end of file
examples/hello-mui/list.html
View file @ bd7348c0
...@@ -193,33 +193,11 @@ ...@@ -193,33 +193,11 @@
media list（图文列表） media list（图文列表）
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
nav bar（导航栏）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/titlebar.html"> <a class="mui-navigate-right" open-type="common" href="examples/nav.html">
默认样式 nav bar（导航栏）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/titlebar-with-buttons.html">
导航条包含按钮
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/titlebar-with-icons.html">
导航条包含ICON
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/titlebar-with-text-and-icons.html">
导航条同时包含文字和图标
</a> </a>
</li> </li>
</ul>
</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="#">
off canvas（侧滑导航） off canvas（侧滑导航）
...@@ -263,8 +241,8 @@ ...@@ -263,8 +241,8 @@
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers-with-actionsheet.html"> <a class="mui-navigate-right" href="examples/actionsheet.html">
popover with action sheet Actionsheet
</a> </a>
</li> </li>
</ul> </ul>
...@@ -523,9 +501,6 @@ ...@@ -523,9 +501,6 @@
mui.openWindow({ mui.openWindow({
id: id, id: id,
url: this.href, url: this.href,
styles:{
zindex:2
},
waiting: { waiting: {
autoShow: false autoShow: 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