Skip to content

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

hello mui中增加login模板说明

parent 258dd0d3
Show whitespace changes
Inline Side-by-side
Showing with 119 additions and 12 deletions
examples/hello-mui/examples/login.html 0 → 100644
View file @ d2549d1a
<!DOCTYPE html>
<html>
<head>
<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" />
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
h5,
p,
ol,
li {
color: #666;
font-size: 14px;
}
h5 {
font-weight: bold;
}
p,
ol {
padding: 5px auto;
margin-bottom: 20px;
}
p,
li {
color: #999;
}
img {
width: 90%;
border: solid 1px #ddd;
border-radius: 5px;
box-shadow: 0px 0px 5px 1px #aaa;
margin: 5px auto;
}
</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">login（登录）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>简单说明</h5>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们为 “登录模板” 制作了一独立的 “演示应用”，包括 “账号密码登录、第三方账号登录、账号注册、手势锁屏、分享” 等功能演示。
</p>
<h5>体验方式</h5>
<ol>
<li>在 HBuilder 中新建“移动App”工程，选择 “mui登录模板” ；</li>
<li>在 GitHub 上查看或下载 <a _src='https://github.com/dcloudio/mui/tree/master/examples/login'>登录模板源码</a> 。
</li>
</ol>
<h5>演示截图</h5>
<p style="text-align: center;">
<img src="../images/login-1.png" />
</p>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function(mui, window, document, undefined) {
mui.init();
var qsa = function() {
return [].slice.call(document.querySelectorAll.apply(document, arguments));
};
qsa("[_src]").forEach(function(item) {
item.addEventListener('tap', function() {
var url = this.getAttribute('_src');
if (url) {
plus.runtime.openURL(url);
};
}, false);
});
})(mui, window, document, undefined);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/poppicker.html → examples/hello-mui/examples/picker.html
View file @ d2549d1a
...@@ -35,10 +35,20 @@ ...@@ -35,10 +35,20 @@
<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">list picker（选择列表）</h1> <h1 class="mui-title">picker（选择器）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5 class="mui-content-padded">原生 SELECT</h5>
<select class="mui-btn mui-btn-block">
<option value="item-1">item-1</option>
<option value="item-2">item-2</option>
<option value="item-3">item-3</option>
<option value="item-4">item-4</option>
<option value="item-5">item-5</option>
</select>
<br />
<p>原生 SELECT（选择框）在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。</p>
<h5 class="mui-content-padded">普通示例</h5> <h5 class="mui-content-padded">普通示例</h5>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button> <button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
<div id='userResult' class="ui-alert"></div> <div id='userResult' class="ui-alert"></div>
...@@ -96,6 +106,8 @@ ...@@ -96,6 +106,8 @@
showUserPickerButton.addEventListener('tap', function(event) { showUserPickerButton.addEventListener('tap', function(event) {
userPicker.show(function(items) { userPicker.show(function(items) {
userResult.innerText = JSON.stringify(items[0]); userResult.innerText = JSON.stringify(items[0]);
//返回 false 可以阻止选择框的关闭
//return false;
}); });
}, false); }, false);
//----------------------------------------- //-----------------------------------------
...@@ -108,11 +120,13 @@ ...@@ -108,11 +120,13 @@
var cityResult = doc.getElementById('cityResult'); var cityResult = doc.getElementById('cityResult');
showCityPickerButton.addEventListener('tap', function(event) { showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) { cityPicker.show(function(items) {
cityResult.innerText ="你选择的城市是:" + items[0].text+" " + items[1].text; cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
//返回 false 可以阻止选择框的关闭
//return false;
}); });
}, false); }, false);
//----------------------------------------- //-----------------------------------------
// //级联示例 // //级联示例
var cityPicker3 = new $.PopPicker({ var cityPicker3 = new $.PopPicker({
layer: 3 layer: 3
}); });
...@@ -121,7 +135,9 @@ ...@@ -121,7 +135,9 @@
var cityResult3 = doc.getElementById('cityResult3'); var cityResult3 = doc.getElementById('cityResult3');
showCityPickerButton.addEventListener('tap', function(event) { showCityPickerButton.addEventListener('tap', function(event) {
cityPicker3.show(function(items) { cityPicker3.show(function(items) {
cityResult3.innerText ="你选择的城市是:" + items[0].text+" " + items[1].text+" " + items[2].text; cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
//返回 false 可以阻止选择框的关闭
//return false;
}); });
}, false); }, false);
}); });
......
examples/hello-mui/examples/setting.html
View file @ d2549d1a
...@@ -148,6 +148,9 @@ ...@@ -148,6 +148,9 @@
z-index: 20; z-index: 20;
background-color: #000; background-color: #000;
} }
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
</style> </style>
</head> </head>
......
examples/hello-mui/list.html
View file @ d2549d1a
...@@ -261,6 +261,11 @@ ...@@ -261,6 +261,11 @@
pagination（分页） pagination（分页）
</a> </a>
</li> </li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/picker.html">
picker（选择器）
</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/popovers.html"> <a class="mui-navigate-right" href="examples/popovers.html">
popover（弹出菜单） popover（弹出菜单）
...@@ -391,13 +396,13 @@ ...@@ -391,13 +396,13 @@
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/poppicker.html"> <a class="mui-navigate-right" href="examples/locker-dom.html">
list picker（选择列表） locker（手势图案锁屏）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/locker-dom.html"> <a class="mui-navigate-right" href="examples/login.html">
locker（手势图案锁屏） login（登录）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
......
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