Skip to content

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

编译至mui 0.8.0

parent bf7e9622
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3768 additions and 2968 deletions
dist/css/mui.css
View file @ 1685cf20
This diff is collapsed.
dist/css/mui.min.css
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 1685cf20
This diff is collapsed.
dist/js/mui.min.js
View file @ 1685cf20
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 @ 1685cf20
/*!
* =====================================================
* Mui v0.7.1 (https://github.com/dcloudio/mui)
* Mui v0.8.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/*!
......
dist/js/mui.tpl.min.js
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/css/mui.min.css
View file @ 1685cf20
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/icons.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/examples/index-menu.html deleted 100644 → 0
View file @ bf7e9622
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="buttons.html">
button（按钮）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="inputs.html">
input（输入框）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="tableview-image-left.html">
media list（图文列表）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="switches.html">
switch（开关）
</a>
</li>
</ul>
</div>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
var subWebview=null,template=null,index=null;
mui.plusReady(function () {
index = plus.webview.currentWebview().opener();
})
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
if(type=="common"){
mui.openWindow({
id: id,
url: this.href,
waiting:{
autoShow:false
}
});
}else{
if(subWebview==null){
subWebview = plus.webview.getWebviewById("template_sub");
template = plus.webview.getWebviewById("demoTemplate");
}
var title = this.innerText;
template.evalJS("with(document.getElementById('title')){innerHTML='" + title + "';className='mui-title mui-fadein';};");
if(subWebview.getURL()==this.href){
subWebview.show();
}else{
subWebview.loadURL(this.href);
}
template.show('slide-in-right', 150);
}
//然后要关闭侧滑菜单；
index.evalJS("toggleMenu()");
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 1685cf20
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为0.7.1，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为0.8.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/inputs.html
View file @ 1685cf20
......@@ -15,12 +15,6 @@
html,body {
background-color: #efeff4;
}
/*header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}*/
</style>
<script>
mui.init();
......@@ -29,69 +23,69 @@
<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">输入框（Input）</h1>
</header>
<div class="mui-content">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">输入框（Input）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div>
<div class="mui-input-row mui-input-range">
<label>slider</label>
<input type="range" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Switch</label>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="带语音输入的搜索框">
</div>
<div class="mui-input-row mui-input-range">
<label>slider</label>
<input type="range" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Switch</label>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div>
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-danger" onclick="return false;">取消</button>
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ 1685cf20
......@@ -36,8 +36,8 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">
cared
<li class="mui-table-view-cell">
card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableview-image-left.html → examples/hello-mui/examples/media-list.html
View file @ 1685cf20
......@@ -21,6 +21,11 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
font-size: 15px;
}
</style>
<script>
mui.init();
......@@ -28,19 +33,15 @@
</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>
<div class="mui-content">
<div class="mui-card">
<div class="mui-content">
<div class="title">
缩略图居左
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
......@@ -68,8 +69,55 @@
</div>
</a>
</li>
</ul>
<div class="title">
缩略图居右
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
</ul>
<div class="title">
右侧带导航箭头
</div>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class='mui-navigate-right' href="#">
<img class="mui-media-object mui-pull-left" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
......@@ -77,10 +125,51 @@
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="title">
card（卡片模式）
</div>
<div class="mui-card" style="margin-bottom: 35px;">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/muwu.jpg">
<div class="mui-media-body">
木屋
<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/cbd.jpg">
<div class="mui-media-body">
CBD
<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="#">
<img class="mui-media-object mui-pull-right" src="../images/yuantiao.jpg">
<div class="mui-media-body">
远眺
<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</body>
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html 0 → 100644
View file @ 1685cf20
<!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;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
var menu, mask = mui.createMask(closeMenu);
var showMenu = false,slideTogether = false;
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
var switchElem = document.getElementById("switch");
switchElem.parentNode.classList.remove('mui-hidden');
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
switchElem.addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在100%的地方；
menu.setStyle({
left: '100%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '30%'
});
}
});
}
mui.init({
swipeBack: false,
back:back
});
function back () {
if(showMenu){
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
}else{
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function () {
menu = mui.preload({
id: 'offcanvas-drag-left-plus-menu',
url: 'offcanvas-drag-left-plus-menu.html',
styles: {
left: "30%",
width: '70%',
zindex: 9998
},
show: {
aniShow: 'none'
},
waiting: {
autoShow: false
}
});
});
/*
* 显示菜单菜单
*/
function openMenu () {
if(!showMenu){
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "static";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
}
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
//显示主窗体遮罩
mask.show();
//主窗体开始移动
mui.currentWebview.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
//若需整体移动，则需让menu窗口同时移动；
if (slideTogether) {
menu.setStyle({
left: '30%',
transition: {
duration: 150
}
});
}
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
if(showMenu){
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
document.querySelector("header.mui-bar").style.position = "fixed";
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
}
//关闭遮罩
mask.close();
//主窗体开始移动
mui.currentWebview.setStyle({
left: '0',
transition: {
duration: 150
}
});
//若整体移动，则同时移动menu窗口；
if (slideTogether) {
menu.setStyle({
left: '100%',
transition: {
duration: 150
}
});
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 300);
showMenu = false;
}
}
//点击侧滑图标，打开侧滑菜单；
document.querySelector('.mui-action-menu').addEventListener('tap', openMenu);
//主界面向左滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swipeleft",openMenu);
//主界面向右滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swiperight",closeMenu);
//menu页面向右滑动，关闭菜单；
window.addEventListener("menu:swiperight",closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
closeMenu();
}else{
openMenu();
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-plus-menu.html → examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ 1685cf20
......@@ -28,49 +28,32 @@
</head>
<body>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</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 3
</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 5
</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 7
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 1</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 3</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 5</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 7
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">Item 8</a>
</li>
</ul>
<style type="text/css">
html,body{
......@@ -81,6 +64,12 @@
mui.init({
swipeBack:false
});
//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
window.addEventListener("swiperight",function () {
mui.fire(mui.currentWebview.opener(),"menu:swiperight");
});
</script>
</body>
......
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html 0 → 100644
View file @ 1685cf20
<!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;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
var menu, mask = mui.createMask(closeMenu);
var showMenu = false,slideTogether = false;
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
var switchElem = document.getElementById("switch");
switchElem.parentNode.classList.remove('mui-hidden');
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
switchElem.addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '0%'
});
}
});
}
mui.init({
swipeBack: false,
back:back
});
function back () {
if(showMenu){
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
}else{
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
});
/**
* 显示菜单菜单
*/
function openMenu () {
if(!showMenu){
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
//显示遮罩
mask.show();
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: '70%',
transition: {
duration: 150
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
}
showMenu = true;
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
if(showMenu){
//关闭遮罩；
mask.close();
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: '0',
transition: {
duration: 150
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function () {
menu.hide();
},300);
//改变标志位
showMenu = false;
}
}
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight",openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft",closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft",closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function () {
if(showMenu){
closeMenu();
}else{
openMenu();
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html → examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ 1685cf20
......@@ -4,7 +4,7 @@
<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="viewport" content="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">
......@@ -28,81 +28,63 @@
</head>
<body>
<div class="mui-content">
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a href="#">
Item1
</a>
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item2
</a>
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item3
</a>
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item4
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item5
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item6
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item7
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item8
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item9
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item10
</a>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
</div>
</div>
<script>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
back: function() {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
parent.hide('auto');
return false;
}
}
})
(function($) {
document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle');
});
})(mui);
swipeBack:false
});
//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
window.addEventListener("swipeleft",function () {
mui.fire(mui.currentWebview.opener(),"menu:swipeleft");
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-left-plus-main.html deleted 100644 → 0
View file @ bf7e9622
<!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;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<script>
mui.init({
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
if (!mui.os.android) {
document.getElementById("switch").parentNode.classList.remove('mui-hidden');
}
var menu, showMenu = false,
slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '0%';
if (slideTogether) {
left = '-70%';
}
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
},
waiting:{
autoShow:false
}
});
//初始化主页面位置
mui.currentWebview.setStyle({
left: 0
});
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
//控制侧滑菜单webview的显示、隐藏；
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
setTimeout(function () {
menu.hide();
},300);
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
}
//主窗体开始侧滑；
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
//如果整体移动，则menu页面也需要移动；
if (slideTogether) {
menu.setStyle({
left: showMenu ? '-70%' : '0%',
transition: {
duration: 200
}
});
}
showMenu = !showMenu;
});
function closeMenu() {
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap', closeMenu);
mui.plusReady(function() {
//按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false);
});
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
} else {
slideTogether = false;
menu.setStyle({
left: '0%'
});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews.html deleted 100644 → 0
View file @ bf7e9622
<!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 cross webviews</h1>
<a id="M_Popover_Trigger" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
</header>
<script>
mui.plusReady(function() {
var popover = plus.webview.create('popovers-with-cross-webviews-popover.html', null, {
top: '45px',
bottom: 0
});
plus.webview.currentWebview().append(popover);
document.getElementById('M_Popover_Trigger').addEventListener('tap', function() {
//mui hack plus event
mui.fire(popover, 'plus:togglePopover');
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-js-call.html deleted 100644 → 0
View file @ bf7e9622
This diff is collapsed.
examples/hello-mui/examples/popovers.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/examples/pullrefresh-main.html deleted 100644 → 0
View file @ bf7e9622
This diff is collapsed.
examples/hello-mui/examples/speech.html deleted 100644 → 0
View file @ bf7e9622
This diff is collapsed.
examples/hello-mui/examples/tableview-image-right.html deleted 100644 → 0
View file @ bf7e9622
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 1685cf20
......@@ -36,7 +36,7 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">cared
<li class="mui-table-view-cell">card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 1685cf20
......@@ -37,7 +37,7 @@
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-hidden">cared
<li class="mui-table-view-cell">card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
......
examples/hello-mui/examples/tableviews.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/examples/template.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/examples/template_pullrefresh.html 0 → 100644
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/examples/test.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/index-mask.html 0 → 100644
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/index-menu.html 0 → 100644
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/index.html
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/js/app.js
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/js/mui.min.js
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/js/mui.tpl.js
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/js/mui.tpl.min.js
View file @ 1685cf20
This diff is collapsed.
examples/hello-mui/list.html
View file @ 1685cf20
This diff is collapsed.
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