Skip to content

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

hello mui在iOS平台不再使用模板方案

parent eb9cf9e5
Show whitespace changes
Inline Side-by-side
Showing with 352 additions and 503 deletions
examples/hello-mui/css/app.css 0 → 100644
View file @ a7378e36
/*
*这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；
* 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
*
* */
.mui-android header.mui-bar{
display: none;
}
.mui-android .mui-bar-nav~.mui-content{
padding: 0;
}
\ No newline at end of file
examples/hello-mui/examples/accordion.html
View file @ a7378e36
......@@ -8,19 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/actionsheet-plus.html
View file @ a7378e36
......@@ -8,18 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
p {
text-indent: 22px;
}
......@@ -46,7 +39,7 @@
<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>
<h1 class="mui-title">原生模式actionsheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a id="delete-btn" class="mui-tab-item">
......
examples/hello-mui/examples/actionsheet.html
View file @ a7378e36
......@@ -7,18 +7,11 @@
<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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
p {
text-indent: 22px;
}
......@@ -45,7 +38,7 @@
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Popovers with action sheet</h1>
<h1 class="mui-title">H5模式actionsheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#delete">
......
examples/hello-mui/examples/ajax.html
View file @ a7378e36
......@@ -8,19 +8,15 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
.mui-content-padded {
padding: 10px;
}
body,
body .mui-content {
body,body .mui-content {
background-color: #fff !important;
}
code {
......@@ -37,7 +33,7 @@
<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">AJAX</h1>
<h1 class="mui-title">ajax（网络请求）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="padding-bottom: 50px;">
......
examples/hello-mui/examples/badges.html
View file @ a7378e36
......@@ -7,19 +7,11 @@
<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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
h5 {
margin: 10px;
}
......@@ -32,7 +24,7 @@
<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">数字角标（Badges）</h1>
<h1 class="mui-title">badge（数字角标）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
......
examples/hello-mui/examples/buttons-with-badges.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn{
margin-top: 10px;
margin-right: 100px;
......
examples/hello-mui/examples/buttons-with-block.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-content-padded{
margin: 10px;
}
......
examples/hello-mui/examples/buttons-with-icons.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn{
margin-top: 10px;
margin-left: 10px;
......
examples/hello-mui/examples/buttons.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
input, button, .mui-btn {
margin-top: 10px;
margin-left: 10px;
......@@ -29,7 +23,7 @@
<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">按钮（Button）</h1>
<h1 class="mui-title">普通按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
......
examples/hello-mui/examples/checkbox.html
View file @ a7378e36
......@@ -8,23 +8,15 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</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">复选框（checkbox）</h1>
<h1 class="mui-title">checkbox（复选框）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
......
examples/hello-mui/examples/dialog.html
View file @ a7378e36
......@@ -7,17 +7,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn{
display: block;
width: 120px;
......@@ -33,7 +27,7 @@
<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">消息框（dialog）</h1>
<h1 class="mui-title">dialog（消息框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
......
examples/hello-mui/examples/grid-default.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/grid-pagination.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-slider-indicator {
bottom: 0;
}
......
examples/hello-mui/examples/icons.html
View file @ a7378e36
......@@ -8,19 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
.flex-container {
display: -webkit-box;
display: -webkit-flex;
......@@ -65,7 +57,7 @@
<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">Icons</h1>
<h1 class="mui-title">icon（图标）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
......
examples/hello-mui/examples/info.html
View file @ a7378e36
......@@ -8,14 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
p {
text-indent: 22px;
padding: 5px 8px;
......
examples/hello-mui/examples/input.html
View file @ a7378e36
......@@ -8,11 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
h5 {
margin: 5px 7px;
}
......@@ -20,6 +20,10 @@
</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">input（输入框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
......
examples/hello-mui/examples/lazyload-image.html
View file @ a7378e36
......@@ -8,16 +8,17 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</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">
<ul id="list" class="mui-table-view mui-table-view-chevron">
......
examples/hello-mui/examples/list-triplex-row.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
......
examples/hello-mui/examples/list-with-input.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/listpicker.html
View file @ a7378e36
......@@ -5,16 +5,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<style>
html,
body,
.mui-content {
height: 0px;
margin: 0px;
background-color: #efeff4;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
......@@ -138,6 +135,10 @@
</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">list picker（选择列表）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">普通示例</h5>
......
examples/hello-mui/examples/locker-dom.html
View file @ a7378e36
......@@ -7,7 +7,10 @@
<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" />
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
html,
body {
......@@ -34,8 +37,14 @@
</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">locker（手势图案锁屏）</h1>
</header>
<div class="mui-content">
<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
<div id='alert'></div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.locker.js"></script>
......
examples/hello-mui/examples/media-list.html
View file @ a7378e36
......@@ -8,18 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
.title {
margin: 20px 15px 10px;
color: #6d6d72;
......@@ -31,7 +24,7 @@
<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>
<h1 class="mui-title">media list（图文列表）</h1>
</header>
<div class="mui-content">
<!--<ul class="mui-table-view mui-unfold">
......
examples/hello-mui/examples/numbox.html
View file @ a7378e36
......@@ -7,7 +7,10 @@
<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" />
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body,
......@@ -27,6 +30,10 @@
</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">number box（数字输入框）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">默认</h5>
......
examples/hello-mui/examples/pagination.html
View file @ a7378e36
......@@ -8,21 +8,17 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding-top: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</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">pagination（分页）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">分页(默认尺寸)</h5>
<div class="mui-content-padded">
......
examples/hello-mui/examples/popovers.html
View file @ a7378e36
......@@ -8,14 +8,19 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
html,
body {
background-color: #efeff4;
}
/*跨webview需要手动指定位置*/
header.mui-bar {
display: none!important;
}
.mui-bar-nav~.mui-content {
padding: 0!important;
}
#topPopover {
position: fixed;
top: 16px;
......@@ -44,9 +49,14 @@
</head>
<body>
<header class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">popover（弹出菜单）</h1>
</header>
<footer class="mui-bar mui-bar-footer">
<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
</footer>
<div class="mui-content">
<div class="mui-content-padded">
<p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
......@@ -158,7 +168,7 @@
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
swipeBack: true //启用右滑关闭功能
});
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
......
examples/hello-mui/examples/radio.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/range.html
View file @ a7378e36
......@@ -8,17 +8,12 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
h5{
padding-top: 15px;
}
......
examples/hello-mui/examples/setting.html
View file @ a7378e36
......@@ -36,8 +36,8 @@
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
......@@ -94,8 +94,8 @@
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease;
transition: opacity 200ms ease, transform 200ms ease;
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
......
examples/hello-mui/examples/slider-default.html
View file @ a7378e36
......@@ -8,19 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/slider-table-default.html
View file @ a7378e36
......@@ -8,17 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
h5{
padding-top: 8px;
padding-bottom: 8px;
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/slider-with-title.html
View file @ a7378e36
......@@ -8,24 +8,16 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</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>
<h1 class="mui-title">下方悬浮标题</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
......
examples/hello-mui/examples/switches.html
View file @ a7378e36
......@@ -7,19 +7,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ a7378e36
......@@ -8,18 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
.mui-card .mui-control-content {
padding: 10px;
}
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ a7378e36
......@@ -8,24 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<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>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......@@ -173,6 +159,7 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ a7378e36
......@@ -8,18 +8,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
.mui-bar-popover {
width: 30%;
}
......
examples/hello-mui/examples/tabbar.html
View file @ a7378e36
......@@ -7,17 +7,12 @@
<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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding-top: 0;
}
.title{
margin: 20px 15px 10px;
color: #6d6d72;
......@@ -55,7 +50,7 @@
<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">选项卡（Tab）</h1>
<h1 class="mui-title">选项卡（Tab）-div模式</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
......
examples/hello-mui/examples/tableviews-with-badges.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ a7378e36
......@@ -8,18 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ a7378e36
......@@ -8,19 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
......
examples/hello-mui/examples/tableviews.html
View file @ a7378e36
......@@ -7,15 +7,11 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style>
html,body {
background-color: #efeff4;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.title{
margin: 20px 15px 7px;
color: #6d6d72;
......@@ -25,6 +21,10 @@
</style>
</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="title">
右侧无导航箭头
......
examples/hello-mui/examples/typography.html
View file @ a7378e36
......@@ -8,21 +8,10 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-content-padded {
padding: 10px;
}
</style>
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/index-menu.html
View file @ a7378e36
......@@ -43,12 +43,6 @@
</div>
<div class="title" style="margin-bottom: 25px;">mui典型控件</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
<!--<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/list-long.html">
千行列表
</a>
</li>-->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh.html">
下拉刷新
......@@ -93,16 +87,23 @@
mui('.mui-table-view').on('tap', 'a', function() {
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
var href = this.href;
if(type=="common"){
var webview_style = {
popGesture: "close"
};
mui.openWindow({
id: id,
url: this.href,
url: href,
styles: webview_style,
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}else{
var href = this.href;
var title = this.innerText;
if(~href.indexOf('pullrefresh')){
var template = plus.webview.getWebviewById("pullrefresh-main");
......@@ -110,6 +111,19 @@
mui.fire(template,'updateHeader',{title:title,showMenu:false});
subWebview.show();
template.show('slide-in-right', 150);
}else{
if(mui.os.ios){
mui.openWindow({
id: id,
url: href,
styles: webview_style,
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}else{
template = plus.webview.getWebviewById("default-main");
//获得共用子webview
......@@ -124,6 +138,8 @@
}
template.show('slide-in-right', 150);
}
}
}
});
......
examples/hello-mui/index.html
View file @ a7378e36
......@@ -138,20 +138,52 @@
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
if(mui.os.ios){
mui.openWindow({
id: 'about',
url: 'examples/info.html',
styles: {
popGesture: "close"
},
show: {
aniShow: 'slide-in-right'
},
waiting: {
autoShow: false
}
});
}else{
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
subWebview.loadURL('examples/info.html');
var reload = true;
if (subWebview.getURL() != 'examples/info.html') {
subWebview.loadURL("examples/info.html");
} else {
reload = false;
}
(!reload) && subWebview.show();
// subWebview.loadURL('examples/info.html');
if(reload){
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于',
showMenu: false
});
template.show('slide-in-right', 150);
}else{
console.log("show direct");
subWebview.show("none");
}
template.show('zoom-fade-out', 150);
}
}
});
//首页返回键处理
......
examples/hello-mui/list.html
View file @ a7378e36
......@@ -346,6 +346,7 @@
</div>
<script src="js/mui.min.js"></script>
<script>
var aniShow = "pop-in";
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
var list = document.querySelectorAll('.ios-only');
......@@ -354,16 +355,15 @@
list[i].style.display = 'none';
}
}
//Android平台暂时使用slide-in-right动画
// aniShow = "slide-in-right"
}
//初始化，并预加载webview模式的选项卡
mui.init({
preloadPages:[
{
url:'examples/tab-webview-main.html',
id:'examples/tab-webview-main.html'
}
]
preloadPages: [{
url: 'examples/tab-webview-main.html',
id: 'examples/tab-webview-main.html'
}]
});
var templates = {};
var getTemplate = function(name, header, content, loading) {
......@@ -371,24 +371,24 @@
if (!template) {
//预加载共用父模板；
var headerWebview = mui.preload({
url:header,
id:name+"-main",
styles:{
popGesture:"hide",
url: header,
id: name + "-main",
styles: {
popGesture: "hide",
},
extras:{
extras: {
mType: 'main'
}
});
//预加载共用子webview
var subWebview = mui.preload({
url:!content?"":content,
id:name+"-sub",
styles:{
url: !content ? "" : content,
id: name + "-sub",
styles: {
top: '45px',
bottom: '0px',
},
extras:{
extras: {
mType: 'sub'
}
});
......@@ -412,63 +412,75 @@
loaded: loading
};
}
return template;
};
var initTemplates = function() {
getTemplate('pullrefresh', 'examples/template_pullrefresh.html', 'examples/pullrefresh.html', true);
getTemplate('default', 'examples/template.html');
};
mui.plusReady(function() {
//初始化模板
initTemplates(); //预加载所有模板
//关闭splash页面；
plus.navigator.closeSplashscreen();
});
//主列表点击事件
mui('#list').on('tap', 'a', function() {
var id = this.getAttribute('href');
var href = this.href;
var type = this.getAttribute("open-type");
//不使用父子模板方案的页面
if (type == "common") {
var webview_style = {
popGesture: "close"
};
//侧滑菜单需动态控制一下zindex值；
if (~id.indexOf('offcanvas-')) {
var pop = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
webview_style.zindex = 9998;
webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
}
mui.openWindow({
id: id,
url: this.href,
styles: {
zindex: 9998,
popGesture: pop
styles: webview_style,
show: {
aniShow: aniShow
},
waiting: {
autoShow: false
}
});
} else {
} else if (id && ~id.indexOf('.html')) {
if (!~id.indexOf('popovers.html') && !~href.indexOf('pullrefresh.html') && mui.os.ios) {
mui.openWindow({
id: id,
url: this.href,
styles: {
popGesture: 'close'
},
show: {
aniShow: aniShow
},
waiting: {
autoShow: false
}
});
}
} else {
if (id && ~id.indexOf('.html')) {
var href = this.href;
//使用父子模板方案打开的页面
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html')?getTemplate('pullrefresh'):getTemplate('default');
var template = ~href.indexOf('pullrefresh.html') ? getTemplate('pullrefresh') : getTemplate('default');
//判断是否显示右上角menu图标；
var showMenu = ~href.indexOf('popovers.html')?true:false;
var showMenu = ~href.indexOf('popovers.html') ? true : false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText.trim();
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview,'updateHeader',{title:title,showMenu:showMenu});
mui.fire(headerWebview, 'updateHeader', {
title: title,
showMenu: showMenu
});
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
......@@ -480,31 +492,29 @@
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show('slide-in-right', 150);
}
}
});
var index = null;//主页面
function openMenu () {
!index&&(index = mui.currentWebview.parent());
mui.fire(index,"menu:open");
var index = null; //主页面
function openMenu() {
!index && (index = mui.currentWebview.parent());
mui.fire(index, "menu:open");
}
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart',function(e){
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('dragright', function(e) {
if(!mui.isScrolling){
if (!mui.isScrolling) {
e.detail.gesture.preventDefault();
}
});
//监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
window.addEventListener("swiperight",function (e) {
window.addEventListener("swiperight", function(e) {
//默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
if(Math.abs(e.detail.angle)<4){
if (Math.abs(e.detail.angle) < 4) {
openMenu();
}
});
......
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