Skip to content

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

编译至mui 0.8.0

parent bf7e9622
Expand all Show 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
......@@ -12,13 +12,14 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
......@@ -29,7 +30,7 @@
<body>
<style>
<style>
.mui-content-padded {
padding: 10px;
}
......@@ -47,26 +48,26 @@
.mui-content-padded a .mui-icon {
margin-top: 12px;
}
.mui-spinner {
.mui-spinner,
.mui-spinner-white {
margin-top: 12px
}
.active .mui-spinner-indicator {
background: #007AFF;
}
.mui-content a{
.mui-content a {
color: #8F8F94;
}
.mui-content a.active{
.mui-content a.active {
color: #007aff;
}
</style>
<header class="mui-bar mui-bar-nav">
</style>
<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">Icons</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
</header>
<div class="mui-content">
<div class="mui-content-padded" >
<p>点击图标查看高亮样式</p>
<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>
......@@ -107,23 +108,8 @@
<a><span class="mui-icon mui-icon-loop"></span></a>
<!--<a><span class="mui-icon mui-icon-loopstrong"></span></a>-->
<a>
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>
<span class="mui-spinner"></span>
</a>
<a><span class="mui-icon mui-icon-spinner mui-spin"></span></a>
<a><span class="mui-icon mui-icon-spinner-cycle mui-spin"></span></a>
<a id="icon-star"><span class="mui-icon mui-icon-star"></span></a>
<a><span class="mui-icon mui-icon-starhalf"></span></a>
<a id="icon-plus"><span class="mui-icon mui-icon-plus"></span></a>
......@@ -141,7 +127,7 @@
<!--<a><span class="mui-icon mui-icon-settingsstrong"></span></a>-->
<a><span class="mui-icon mui-icon-list"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a ><span class="mui-icon mui-icon-paperplane"></span></a>
<a><span class="mui-icon mui-icon-paperplane"></span></a>
<a id="icon-info"><span class="mui-icon mui-icon-info"></span></a>
<a id="icon-help"><span class="mui-icon mui-icon-help"></span></a>
<a><span class="mui-icon mui-icon-locked"></span></a>
......@@ -168,39 +154,40 @@
<a><span class="mui-icon mui-icon-pulldown"></span></a>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var active = null,lastid,span;
mui(".mui-content").on("tap","a",function(){
</div>
<script type="text/javascript" charset="utf-8">
var active = null,
lastid, span;
mui(".mui-content").on("tap", "a", function() {
var id = this.getAttribute("id");
if(!active){
if (!active) {
this.classList.add("active");
if(id){
if (id) {
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
span.classList.remove("mui-" + id);
span.classList.add("mui-" + id + "-filled");
}
active = this;
}else{
} else {
active.classList.remove("active");
if(lastid){
span.classList.remove("mui-"+lastid+"-filled");
span.classList.add("mui-"+lastid);
if (lastid) {
span.classList.remove("mui-" + lastid + "-filled");
span.classList.add("mui-" + lastid);
}
this.classList.add("active");
if(id){
if (id) {
span = this.querySelector("span");
span.classList.remove("mui-"+id);
span.classList.add("mui-"+id+"-filled");
span.classList.remove("mui-" + id);
span.classList.add("mui-" + id + "-filled");
}
active = this;
}
lastid = id;
});
</script>
</script>
</body>
</body>
</html>
\ No newline at end of file
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,11 +23,11 @@
<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>
<h1 class="mui-title">输入框（Input）</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
......@@ -78,20 +72,20 @@
<textarea id="textarea" rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
</div>
<style type="text/css">
<style type="text/css">
h5 {
margin: 5px 7px;
}
</style>
<script>
</style>
<script>
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
});
</script>
</body>
</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">
<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 class="mui-content">
<div class="title">
缩略图居左
</div>
</li>
<ul class="mui-table-view">
<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 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>
</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">
<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>
<a class="mui-navigate-right">Item 1</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
<a class="mui-navigate-right">Item 2</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
<a class="mui-navigate-right">Item 3</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
<a class="mui-navigate-right">Item 4</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
<a class="mui-navigate-right">Item 5</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
<a class="mui-navigate-right">Item 6</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
<a class="mui-navigate-right">Item 7
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
<a class="mui-navigate-right">Item 8</a>
</li>
</ul>
</ul>
<style type="text/css">
html,body{
......@@ -82,6 +65,12 @@
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">
<li class="mui-table-view-cell">
<a href="#">
Item1
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item2
</a>
</li>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell">
<a href="#">
Item3
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item4
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item5
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item6
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item7
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item8
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item9
<a class="mui-navigate-right">
Item 7
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item10
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
back: function() {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
parent.hide('auto');
return false;
}
<style type="text/css">
html,body{
background-color: #333;
}
})
(function($) {
document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle');
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
});
//优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；
window.addEventListener("swipeleft",function () {
mui.fire(mui.currentWebview.opener(),"menu:swipeleft");
});
})(mui);
</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/offcanvas-right-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-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>
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 = '30%';
if(slideTogether){
left = '100%';
}
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-action-menu').addEventListener('tap', function() {
//解决android 4.4以下版本webview移动时，导致fixed定位元素错乱的bug;
if(mui.os.android&&parseFloat(mui.os.version)<4.4){
var bar_position = showMenu?"fixed":"static";
document.querySelector("header.mui-bar").style.position = bar_position;
//同时需要修改以下.mui-contnt的padding-top，否则会多出空白；
var content_padding = showMenu?"44px":"0px";
document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = content_padding;
}
//控制侧滑菜单webview的显示、隐藏；
if(showMenu){
//侧滑菜单已显示，则等主窗体移动完毕后，再隐藏自己；
setTimeout(function () {
menu.hide();
},300);
}else{
//侧滑菜单处于隐藏状态，则立即显示出来；
menu.show();
}
//主窗体开始移动
mui.currentWebview.setStyle({
left: showMenu ? '0' : '-70%',
transition: {
duration: 200
}
});
if(slideTogether){
menu.setStyle({
left: showMenu ? '100%' : '30%',
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需要在100%的地方；
menu.setStyle({left:'100%'});
}else{
slideTogether = false;
menu.setStyle({left:'30%'});
}
});
</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
<!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>
<style>
.mui-popover {
top: 125px;
}
</style>
<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</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">Open Popover</a>
</div>
<div id="popover" class="mui-popover">
<div class="mui-content-padded">
<a id="closePopover" class="mui-btn mui-btn-primary mui-btn-block">Close Popover</a>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</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>
</ul>
</div>
</div>
<script>
document.getElementById('openPopover').addEventListener('tap', function() {
mui('#popover').popover('show', {
left: 100,
right: 200
});
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
document.getElementById('closePopover').addEventListener('tap', function() {
mui('#popover').popover('hide');
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers.html
View file @ 1685cf20
......@@ -12,14 +12,16 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
/*header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
padding-top: 0;
}*/
.mui-content {
padding: 10px;
}
</style>
<script>
......@@ -28,32 +30,165 @@
</head>
<body>
<style>
/*跨webview需要手动指定位置*/
<style>
.mui-popover{
top: 74px;
#topPopover {
position: fixed;
top: 16px;
right: 6px;
}
#topPopover .mui-popover-arrow {
left: auto;
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;
}
</style>
<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</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="padding: 20px 10px;">
<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
.mui-backdrop-action.mui-backdrop {
bottom: 0;
}
p {
text-indent: 22px;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-popover {
height: 300px;
}
</style>
<header class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
<p>popover最常用的两个位置：顶部导航栏右侧和底部工具栏右侧； 点击本页右上角的
<span class="mui-icon mui-icon-bars"></span> 图标体验，这是一个
<strong>跨webview</strong>的popover示例，
<span class="mui-icon mui-icon-bars"></span>在父webview中，点击后通过自定义事件 通知子webview， 子webview再执行popover的显示隐藏逻辑； 接着点击本页面右下角的“菜单”按钮体验。
</p>
<p>除了页面顶部导航栏、底部工具栏固定位置之外，其它区域要使用弹出菜单，都要准确计算物理位置，从而实现弹出菜单的绝对定位； mui封装的手势事件中，可以获得点击位置，通过这些位置可实现任意区域的弹出菜单显示，点击如下按钮体验：
</p>
<p>
<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开弹出菜单</a>
</p>
</div>
</div>
<!--右上角弹出菜单-->
<div id="topPopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</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>
</ul>
</div>
</div>
</div>
<div id="popover" class="mui-popover">
<div id="middlePopover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
<li class="mui-table-view-cell"><a href="#">Item6</a></li>
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</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>
</ul>
</div>
</div>
</div>
</body>
</div>
<!--右下角弹出菜单-->
<div id="bottomPopover" class="mui-popover mui-popover-bottom">
<div class="mui-popover-arrow"></div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item2</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item3</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item4</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item5</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item6</a>
</li>
<li class="mui-table-view-cell"><a href="#">Item7</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>
</ul>
</div>
</div>
</div>
<script>
mui('.mui-scroll-wrapper').scroll();
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullrefresh-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;
}
#pull{
text-align: left;
}
/*#pull {
width: 24px;
height: 100%;
display: inline-block;
margin: 0 1em;
}
#icon {
height: 24px;
vertical-align: middle;
}*/
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var list;
// 扩展API加载完毕，现在可以正常调用扩展API
function init() {
list = plus.webview.create("pullrefresh-content.html", "pullrefresh-content.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
plus.webview.currentWebview().append(list);
if (mui.os.plus && mui.os.android) {
// 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({
position: {
top: "100px"
},
changeoffset: {
top: "50px"
}
});
}
}
mui.plusReady(init);
// DOMContentLoaded事件处理
var etext = null,
eicon = null;
document.addEventListener("DOMContentLoaded", function() {
etext = document.getElementById("text");
eicon = document.getElementById("icon");
}, false);
// 下拉状态改变
function onPullStateChange(e) {
switch (e.status) {
case "beforeChangeOffset": //下拉可刷新状态
pull1();
break;
case "afterChangeOffset": //松开可刷新状态
pull2();
break;
case "dragEndAfterChangeOffset": //正在刷新状态
list.evalJS("pulldownRefresh();");
pull3();
break;
default:
break;
}
}
function pull1() {
etext.innerText = "下拉可以刷新";
eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(0deg)";
}
function pull2() {
etext.innerText = "释放立即刷新";
eicon.className = 'mui-pull-loading mui-icon mui-icon-pulldown';
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(180deg)";
}
function pull3() {
etext.innerText = "正在刷新...";
eicon.className = 'mui-pull-loading mui-icon mui-icon-spinner-cycle';
eicon.style.webkitAnimation = "spin 1s infinite linear";
}
function pullReset() {
etext.innerText = "下拉可刷新";
eicon.style.webkitTransition = "";
eicon.style.webkitTransform = "";
eicon.style.webkitAnimation = "";
}
</script>
<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-pull-top-pocket">
<div class="mui-pull">
<div id="icon" class="mui-pull-loading mui-icon mui-icon-pulldown"></div>
<div id="text" class="mui-pull-caption">下拉可以刷新</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/speech.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">语音助手</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded" style="text-align: center;">长按进行语音输入(支持命令：列表，按钮)</h5>
</div>
<script>
(function($) {
var content = document.querySelector('.mui-content');
window.addEventListener('longtap', function() {
if (window.plus) {
plus.speech.startRecognize({
engine : 'iFly'
}, function(s) {
s = (s + '').replace(/[\ |\!|\;|\:|\,|\.|\?|\。|\，|\？|\！]/g, '').trim();
if (s) {
if (speechs.hasOwnProperty(s)) {
speechs[s]();
} else {
alert('命令"' + s + '"错误,支持语音命令：列表，按钮。');
}
} else {
alert('您好像没有说话哦');
}
plus.speech.stopRecognize();
}, function(e) {
});
} else {
alert('only for 5+');
}
event.preventDefault();
});
var speechs = {
'列表' : function() {
var div = document.createElement('div');
div.innerHTML = '<ul class="mui-table-view"><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></ul>';
content.appendChild(div.firstElementChild);
},
'按钮' : function() {
var div = document.createElement('div');
div.innerHTML = '<button>按钮</button>';
content.appendChild(div.firstElementChild);
}
}
})(mui);
</script>
</body>
</html>
\ No newline at end of file
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.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