Skip to content

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

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

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