Skip to content

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

增加原生Actionsheet示例

parent 8306ce1d
Hide whitespace changes
Inline Side-by-side
Showing with 271 additions and 114 deletions
examples/hello-mui/examples/actionsheet-plus.html 0 → 100644
View file @ 511889ec
<!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;
}
#info{
padding: 20px 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">Actionsheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="delete-btn" class="mui-tab-item">
<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="#">
</a>
</nav>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是5+ runtime封装的原生Actionsheet，
优点是无需考虑跨webview的遮罩问题，
缺点是样式固定，无法自定义；
多webview模式下推荐使用原生模式的Actionsheet；
<!--<span class="mui-icon mui-icon-trash"></span>会弹出删除信息确认框； 点击本页面右下角
<span class="mui-icon mui-icon-undo"></span>会弹出转发确认框； 你也可点击如下按钮，打开照片选择框：-->
</p>
<p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a>
</p>
</div>
</div>
<p id="info"></p>
</body>
<script>
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
//console.log('hidden', e.detail.id);//detail为当前popover元素
});
var info = document.getElementById("info");
document.getElementById("picture-btn").addEventListener('tap',function () {
var btnArray = [{title:"拍照或录像"},{title:"选取现有的"}];
plus.nativeUI.actionSheet( {
title:"选择照片",
cancel:"取消",
buttons:btnArray
}, function(e){
var index = e.index;
var text = "你刚点击了\"";
switch (index){
case 0:
text += "取消";
break;
case 1:
text += "拍照或录像";
break;
case 2:
text += "选取现有的";
break;
}
info.innerHTML = text+"\"按钮";
} );
});
document.getElementById("delete-btn").addEventListener('tap',function () {
var btnArray = [{title:"删除信息",style:"destructive"}];
plus.nativeUI.actionSheet( {
cancel:"取消",
buttons:btnArray
}, function(e){
var index = e.index;
var text = "你刚点击了\"";
switch (index){
case 0:
text += "取消";
break;
case 1:
text += "删除信息";
break;
}
info.innerHTML = text+"\"按钮";
} );
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/actionsheet.html
View file @ 511889ec
...@@ -31,6 +31,9 @@ ...@@ -31,6 +31,9 @@
margin-left: -15px; margin-left: -15px;
padding-right: 10px; padding-right: 10px;
} }
#info{
padding: 20px 10px ;
}
</style> </style>
<script> <script>
mui.init(); mui.init();
...@@ -64,6 +67,13 @@ ...@@ -64,6 +67,13 @@
<p> <p>
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a> <a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开Actionsheet</a>
</p> </p>
<p>本页面为H5模式的Actionsheet演示示例，
H5模式的优点是可通过css自由定制展现样式，
缺点是不支持跨webview的遮罩，
当前页面使用了双webview的模板机制，故Actionsheet弹出后，顶部导航栏并未被遮罩层覆盖；
在单webview模式下，推荐使用H5模式的Actionsheet；
</p>
<p id="info"></p>
</div> </div>
</div> </div>
...@@ -123,6 +133,19 @@ ...@@ -123,6 +133,19 @@
mui('body').on('hidden', '.mui-popover', function(e) { mui('body').on('hidden', '.mui-popover', function(e) {
//console.log('hidden', e.detail.id);//detail为当前popover元素 //console.log('hidden', e.detail.id);//detail为当前popover元素
}); });
var info = document.getElementById("info");
mui('body').on('tap','.mui-popover-action li>a',function () {
var a = this,parent;
//根据点击按钮，反推当前是哪个actionsheet
for(parent=a.parentNode;parent!=document.body;parent=parent.parentNode){
if(parent.classList.contains('mui-popover-action')){
break;
}
}
//关闭actionsheet
mui('#'+parent.id).popover('toggle');
info.innerHTML = "你刚点击了\""+a.innerHTML+"\"按钮";
})
</script> </script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html
View file @ 511889ec
...@@ -21,6 +21,14 @@ ...@@ -21,6 +21,14 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
</style> </style>
<script> <script>
mui.init(); mui.init();
...@@ -28,95 +36,80 @@ ...@@ -28,95 +36,80 @@
</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">消息框（dialog）</h1>
<h1 class="mui-title">消息框（dialog）</h1> </header>
</header> <div class="mui-content">
<div class="mui-content"> <div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<div class="mui-content-padded" style="margin: 5px;text-align: center;"> <button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<button id='alertBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button> <button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<button id='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button> <button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<button id='promptBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button> <button id='pickDateBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择框</button>
<button id='toastBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button> <button id='pickTimeBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">时间选择框</button>
<button id='pickDateBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择框</button> <div id="info">
<button id='pickTimeBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">时间选择框</button>
<div id="info"> </div>
</div>
</div> </div>
</div> <script type="text/javascript" charset="utf-8">
</div> var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
<script type="text/javascript" charset="utf-8"> mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
var info = document.getElementById("info"); info.innerText = '你刚关闭了警告框';
document.getElementById("alertBtn").addEventListener('tap',function(){ });
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){ });
info.innerText = '你刚关闭了警告框';
}); document.getElementById("confirmBtn").addEventListener('tap',function(){
}); var btnArray = ['是','否'];
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){
document.getElementById("confirmBtn").addEventListener('tap',function(){ if(e.index==0){
var btnArray = ['是','否']; info.innerText = '你刚确认MUI是个好框架';
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){ }else{
if(e.index==0){ info.innerText = 'MUI没有得到你的认可，继续加油'
info.innerText = '你刚确认MUI是个好框架'; }
}else{ })
info.innerText = 'MUI没有得到你的认可，继续加油' });
}
}) //TODO iOS 8.x平台存在bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了，故临时使用click代替tap；
}); document.getElementById("promptBtn").addEventListener('click',function(){
var btnArray = ['确定','取消'];
//TODO iOS 8.x平台存在bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了，故临时使用click代替tap； mui.prompt('请输入你对MUI的评语：','性能好','Hello MUI',btnArray,function(e){
document.getElementById("promptBtn").addEventListener('click',function(){ if(e.index==0){
var btnArray = ['确定','取消']; info.innerText = '谢谢你的评语：'+e.value;
mui.prompt('请输入你对MUI的评语：','性能好','Hello MUI',btnArray,function(e){ }else{
if(e.index==0){ info.innerText = '你点了取消按钮';
info.innerText = '谢谢你的评语：'+e.value; }
}else{ })
info.innerText = '你点了取消按钮'; });
} document.getElementById("toastBtn").addEventListener('tap',function(){
}) mui.toast('欢迎体验Hello MUI');
}); });
document.getElementById("toastBtn").addEventListener('tap',function(){ document.getElementById("pickDateBtn").addEventListener('tap',function () {
mui.toast('欢迎体验Hello MUI'); var dDate=new Date();
}); dDate.setFullYear(2014,7,16);
document.getElementById("pickDateBtn").addEventListener('tap',function () { var minDate=new Date();
var dDate=new Date(); minDate.setFullYear(2010,0,1);
dDate.setFullYear(2014,7,16); var maxDate=new Date();
var minDate=new Date(); maxDate.setFullYear(2016,11,31);
minDate.setFullYear(2010,0,1); plus.nativeUI.pickDate( function(e) {
var maxDate=new Date(); var d=e.date;
maxDate.setFullYear(2016,11,31); info.innerText = '您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate();
plus.nativeUI.pickDate( function(e) { },function(e){
var d=e.date; info.innerText = "您没有选择日期";
info.innerText = '您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate(); },{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
},function(e){ })
info.innerText = "您没有选择日期"; document.getElementById("pickTimeBtn").addEventListener('tap',function () {
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate}); var dTime=new Date();
}) dTime.setHours(6,0);
document.getElementById("pickTimeBtn").addEventListener('tap',function () { plus.nativeUI.pickTime(function(e){
var dTime=new Date(); var d=e.date;
dTime.setHours(6,0); info.innerText = "您选择的时间是："+d.getHours()+":"+d.getMinutes();
plus.nativeUI.pickTime(function(e){ },function (e){
var d=e.date; info.innerText = "您没有选择时间"
info.innerText = "您选择的时间是："+d.getHours()+":"+d.getMinutes(); },{title:"请选择时间",is24Hour:true,time:dTime});
},function (e){ });
info.innerText = "您没有选择时间" </script>
},{title:"请选择时间",is24Hour:true,time:dTime}); </body>
});
</script>
<style type="text/css">
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
</style>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 511889ec
...@@ -23,9 +23,6 @@ ...@@ -23,9 +23,6 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -38,7 +35,7 @@ ...@@ -38,7 +35,7 @@
<ul id="OA_task_1" class="mui-table-view"> <ul id="OA_task_1" class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled"> <div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-red">delete</a> <a class="mui-btn mui-btn-red">删除</a>
</div> </div>
<div class="mui-slider-handle"> <div class="mui-slider-handle">
左滑显示删除按钮 左滑显示删除按钮
...@@ -140,6 +137,10 @@ ...@@ -140,6 +137,10 @@
</ul> </ul>
</div> </div>
<script> <script>
//禁止右滑关闭
mui.init({
swipeBack: false
});
(function($) { (function($) {
//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单 //$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象 //$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
......
examples/hello-mui/index-menu.html
View file @ 511889ec
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/inputs.html"> <a class="mui-navigate-right" href="examples/input.html">
输入框（input） 输入框（input）
</a> </a>
</li> </li>
......
examples/hello-mui/list.html
View file @ 511889ec
...@@ -27,6 +27,24 @@ ...@@ -27,6 +27,24 @@
accordion（折叠面板） accordion（折叠面板）
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">
Actionsheet（操作表）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet.html">
H5模式Actionsheet
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet-plus.html">
原生模式Actionsheet
</a>
</li>
</ul>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/ajax.html"> <a class="mui-navigate-right" href="examples/ajax.html">
ajax（网络请求） ajax（网络请求）
...@@ -62,7 +80,13 @@ ...@@ -62,7 +80,13 @@
块级按钮 块级按钮
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/buttons-with-fabs.html">
浮动控制按钮
</a>
</li>-->
</ul> </ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/checkbox.html"> <a class="mui-navigate-right" href="examples/checkbox.html">
...@@ -125,11 +149,6 @@ ...@@ -125,11 +149,6 @@
可左右滑动的9宫导航 可左右滑动的9宫导航
</a> </a>
</li> </li>
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/oa-grid.html">
高度自适应示例
</a>
</li>-->
</ul> </ul>
</li> </li>
...@@ -224,22 +243,10 @@ ...@@ -224,22 +243,10 @@
pagination（分页） pagination（分页）
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-collapse"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href=""> <a class="mui-navigate-right" href="examples/popovers.html">
popover（弹出菜单） popover（弹出菜单）
</a> </a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers.html">
popover
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet.html">
Actionsheet
</a>
</li>
</ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh.html"> <a class="mui-navigate-right" href="examples/pullrefresh.html">
......
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