Skip to content

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

增加原生Actionsheet示例

parent 8306ce1d
Show 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,13 +36,11 @@ ...@@ -28,13 +36,11 @@
</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;"> <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> <button id='alertBtn' 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='confirmBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
...@@ -46,9 +52,8 @@ ...@@ -46,9 +52,8 @@
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" charset="utf-8">
<script type="text/javascript" charset="utf-8">
var info = document.getElementById("info"); var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){ document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){ mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
...@@ -105,18 +110,6 @@ ...@@ -105,18 +110,6 @@
info.innerText = "您没有选择时间" info.innerText = "您没有选择时间"
},{title:"请选择时间",is24Hour:true,time:dTime}); },{title:"请选择时间",is24Hour:true,time:dTime});
}); });
</script> </script>
<style type="text/css"> </body>
.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,23 +243,11 @@ ...@@ -224,23 +243,11 @@
pagination（分页） pagination（分页）
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="">
popover（弹出菜单）
</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers.html"> <a class="mui-navigate-right" href="examples/popovers.html">
popover popover（弹出菜单）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/actionsheet.html">
Actionsheet
</a> </a>
</li> </li>
</ul>
</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">
pull to refresh（下拉刷新和上拉加载更多） pull to refresh（下拉刷新和上拉加载更多）
......
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