Skip to content

M
mui
Commit 05d5bb5c authored by MoGaven's avatar MoGaven
Browse files
Options

Merge remote-tracking branch 'dcloudio/master'

parents 6dfc9a88 64f5d730
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2112 additions and 1020 deletions
dist/css/mui.css
View file @ 05d5bb5c
/*!
* =====================================================
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -824,6 +824,12 @@ p
.mui-off-canvas-wrap .mui-bar
{
position: absolute !important;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-off-canvas-wrap
......@@ -931,6 +937,47 @@ p
right: 0;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
{
background-color: #333;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
width: 80%;
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: .1;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
{
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
transition: transform 200ms ease, opacity 200ms ease;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
{
-webkit-transform-origin: -100%;
transform-origin: -100%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
-webkit-transform-origin: 200%;
transform-origin: 200%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
{
-webkit-transform: scale(.8);
transform: scale(.8);
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.mui-loading .mui-spinner
{
display: block;
......@@ -1689,6 +1736,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
margin: 0 auto;
}
.mui-bar.mui-bar-header-secondary .mui-segmented-control
{
top: 0;
}
.mui-badge
{
font-size: 12px;
......@@ -2316,9 +2368,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mui-table-view-cell .mui-navigate-left > .mui-btn,
.mui-table-view-cell .mui-navigate-left > .mui-badge,
.mui-table-view-cell .mui-navigate-left > .mui-switch,
.mui-table-view-cell .mui-navigate-right > .mui-btn,
.mui-table-view-cell .mui-navigate-right > .mui-badge,
.mui-table-view-cell .mui-navigate-right > .mui-switch,
......@@ -2328,9 +2377,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-table-view-cell .mui-push-right > .mui-btn,
.mui-table-view-cell .mui-push-right > .mui-badge,
.mui-table-view-cell .mui-push-right > .mui-switch,
.mui-table-view-cell > a .mui-navigate-left > .mui-btn,
.mui-table-view-cell > a .mui-navigate-left > .mui-badge,
.mui-table-view-cell > a .mui-navigate-left > .mui-switch,
.mui-table-view-cell > a .mui-navigate-right > .mui-btn,
.mui-table-view-cell > a .mui-navigate-right > .mui-badge,
.mui-table-view-cell > a .mui-navigate-right > .mui-switch,
......@@ -2349,14 +2395,22 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
margin-top: 15px;
}
.mui-table-view-cell.mui-collapse .mui-table-view:after
.mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view-cell.mui-collapse .mui-table-view:after
{
left: 15px;
height: 0;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after
{
height: 0;
}
.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after
{
content: '\e581';
}
.mui-table-view-cell.mui-collapse.mui-active
{
margin-top: -1px;
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view, .mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content
{
display: block;
......@@ -2365,6 +2419,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
{
content: '\e580';
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell > a:not(.mui-btn).mui-active
{
margin-left: -31px;
padding-left: 47px;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content
{
position: relative;
......@@ -2379,7 +2438,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
-o-transition: height .35s ease;
transition: height .35s ease;
border: 1px solid #ddd;
background: white;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-input-group, .mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
......@@ -4062,7 +4120,6 @@ select:focus
transform: translate3d(100%, 0, 0);
}
.mui-navigate-left:after,
.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after
......@@ -4085,7 +4142,6 @@ select:focus
-webkit-font-smoothing: antialiased;
}
.mui-navigate-left:after,
.mui-push-left:after
{
left: 15px;
......@@ -4787,7 +4843,7 @@ select:focus
width: 100%;
height: 100%;
}
.mui-fullscreen .mui-slider-group
.mui-fullscreen.mui-slider .mui-slider-group
{
height: 100%;
}
......@@ -4800,7 +4856,7 @@ select:focus
width: 100%;
height: auto;
}
.mui-fullscreen .mui-slider-item > a
.mui-fullscreen.mui-slider .mui-slider-item > a
{
top: 50%;
......@@ -4842,11 +4898,21 @@ select:focus
display: block !important;
}
.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
{
display: table-cell !important;
}
.mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
{
display: block !important;
}
.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
{
display: table-cell !important;
}
.mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
{
display: none !important;
......
dist/css/mui.min.css
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 05d5bb5c
This diff is collapsed.
dist/js/mui.min.js
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.css
View file @ 05d5bb5c
/*!
* =====================================================
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -824,6 +824,12 @@ p
.mui-off-canvas-wrap .mui-bar
{
position: absolute !important;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-off-canvas-wrap
......@@ -931,6 +937,47 @@ p
right: 0;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable
{
background-color: #333;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
width: 80%;
-webkit-transform: scale(.8);
transform: scale(.8);
opacity: .1;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left.mui-transitioning, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right.mui-transitioning
{
-webkit-transition: -webkit-transform 200ms ease, opacity 200ms ease;
transition: transform 200ms ease, opacity 200ms ease;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-left
{
-webkit-transform-origin: -100%;
transform-origin: -100%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable > .mui-off-canvas-right
{
-webkit-transform-origin: 200%;
transform-origin: 200%;
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-inner-wrap
{
-webkit-transform: scale(.8);
transform: scale(.8);
}
.mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-left, .mui-off-canvas-wrap:not(.mui-slide-in).mui-scalable.mui-active > .mui-off-canvas-right
{
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.mui-loading .mui-spinner
{
display: block;
......@@ -1689,6 +1736,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
margin: 0 auto;
}
.mui-bar.mui-bar-header-secondary .mui-segmented-control
{
top: 0;
}
.mui-badge
{
font-size: 12px;
......@@ -2316,9 +2368,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.mui-table-view-cell .mui-navigate-left > .mui-btn,
.mui-table-view-cell .mui-navigate-left > .mui-badge,
.mui-table-view-cell .mui-navigate-left > .mui-switch,
.mui-table-view-cell .mui-navigate-right > .mui-btn,
.mui-table-view-cell .mui-navigate-right > .mui-badge,
.mui-table-view-cell .mui-navigate-right > .mui-switch,
......@@ -2328,9 +2377,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-table-view-cell .mui-push-right > .mui-btn,
.mui-table-view-cell .mui-push-right > .mui-badge,
.mui-table-view-cell .mui-push-right > .mui-switch,
.mui-table-view-cell > a .mui-navigate-left > .mui-btn,
.mui-table-view-cell > a .mui-navigate-left > .mui-badge,
.mui-table-view-cell > a .mui-navigate-left > .mui-switch,
.mui-table-view-cell > a .mui-navigate-right > .mui-btn,
.mui-table-view-cell > a .mui-navigate-right > .mui-badge,
.mui-table-view-cell > a .mui-navigate-right > .mui-switch,
......@@ -2349,14 +2395,22 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
margin-top: 15px;
}
.mui-table-view-cell.mui-collapse .mui-table-view:after
.mui-table-view-cell.mui-collapse .mui-table-view:before, .mui-table-view-cell.mui-collapse .mui-table-view:after
{
left: 15px;
height: 0;
}
.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:last-child:after
{
height: 0;
}
.mui-table-view-cell.mui-collapse > .mui-navigate-right:after, .mui-table-view-cell.mui-collapse > .mui-push-right:after
{
content: '\e581';
}
.mui-table-view-cell.mui-collapse.mui-active
{
margin-top: -1px;
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view, .mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content
{
display: block;
......@@ -2365,6 +2419,11 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
{
content: '\e580';
}
.mui-table-view-cell.mui-collapse.mui-active .mui-table-view-cell > a:not(.mui-btn).mui-active
{
margin-left: -31px;
padding-left: 47px;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content
{
position: relative;
......@@ -2379,7 +2438,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
-o-transition: height .35s ease;
transition: height .35s ease;
border: 1px solid #ddd;
background: white;
}
.mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-input-group, .mui-table-view-cell.mui-collapse .mui-collapse-content > .mui-slider
......@@ -4062,7 +4120,6 @@ select:focus
transform: translate3d(100%, 0, 0);
}
.mui-navigate-left:after,
.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after
......@@ -4085,7 +4142,6 @@ select:focus
-webkit-font-smoothing: antialiased;
}
.mui-navigate-left:after,
.mui-push-left:after
{
left: 15px;
......@@ -4787,7 +4843,7 @@ select:focus
width: 100%;
height: 100%;
}
.mui-fullscreen .mui-slider-group
.mui-fullscreen.mui-slider .mui-slider-group
{
height: 100%;
}
......@@ -4800,7 +4856,7 @@ select:focus
width: 100%;
height: auto;
}
.mui-fullscreen .mui-slider-item > a
.mui-fullscreen.mui-slider .mui-slider-item > a
{
top: 50%;
......@@ -4842,11 +4898,21 @@ select:focus
display: block !important;
}
.mui-tab-item.mui-plus-hidden, .mui-tab-item.mui-wechat-hidden
{
display: table-cell !important;
}
.mui-plus .mui-plus-visible, .mui-wechat .mui-wechat-visible
{
display: block !important;
}
.mui-plus .mui-tab-item.mui-plus-visible, .mui-wechat .mui-tab-item.mui-wechat-visible
{
display: table-cell !important;
}
.mui-plus .mui-plus-hidden, .mui-wechat .mui-wechat-hidden
{
display: none !important;
......
examples/hello-mui/css/mui.min.css
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/ad.html
View file @ 05d5bb5c
......@@ -26,6 +26,9 @@
</body>
<script type="text/javascript">
mui.plusReady(function () {
if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
mui.toast("当前网络不给力，无法加载广告");
}else{
//屏幕真实宽度
var width = window.innerWidth;
var height = window.innerHeight;
......@@ -71,6 +74,10 @@
//设置主页面的底部留白，否则会被遮住；
document.querySelector('.mui-content').style.paddingBottom = adHeight + 'px';
}
});
</script>
......
examples/hello-mui/examples/ajax.html
View file @ 05d5bb5c
......@@ -71,6 +71,16 @@
$.init({
swipeBack:true //启用右滑关闭功能
});
var network = true;
if(mui.os.plus){
mui.plusReady(function () {
if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
network = false;
}
});
}
var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response");
......@@ -121,7 +131,11 @@
};
//发送请求按钮的点击事件
document.getElementById("confirm").addEventListener('tap', function() {
if(network){
ajax();
}else{
mui.toast("当前网络不给力，请稍后再试");
}
});
//点击描述中链接时，打开对应网页介绍；
$('body').on('tap', 'a', function(e) {
......
examples/hello-mui/examples/checkbox.html
View file @ 05d5bb5c
......@@ -23,11 +23,11 @@
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>checked:false</label>
<label>checked：false</label>
<input name="checkbox" value="Item 1" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checked:true</label>
<label>checked：true</label>
<input name="checkbox" value="Item 2" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left mui-disabled">
......@@ -40,11 +40,11 @@
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox">
<label>checked:false</label>
<label>checked：false</label>
<input name="checkbox1" value="Item 3" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox">
<label>checked:true</label>
<label>checked：true</label>
<input name="checkbox1" value="Item 4" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-disabled">
......
examples/hello-mui/examples/clouddb_wilddog.html 0 → 100644
View file @ 05d5bb5c
<!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>
<script src="../js/mui.min.js"></script>
<script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
<link href="../css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style type="text/css">
.title{
background-color: rgba(0,0,0,.25);
font-weight: 400;
}
#list td{
padding:5px 5px;
}
#list tr:active{
background-color: rgba(0,0,0,.25);
}
#popover{
min-width: 282px;
height: 300px ;
top:50% !important;
margin-top: -150px;
left: 50% !important;
margin-left: -141px;
}
@media (min-width: 400px){
#popover{
width: 80%;
margin-left: -40%;
}
}
.mui-popover .mui-popover-arrow{
display: none !important;
}
.operate{
text-align: center;
margin-top: 20px
}
</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>
<a class="mui-icon mui-icon-plusempty mui-pull-right" id="open"></a>
<h1 class="mui-title">cloud DB（云端数据库）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能； 在手机上新增数据后，你可以通过测试账号（账号：demo@dcloud.io/密码：12345678）登录野狗官网， 查看数据库的实时数据。
</p>
</div>
<div style="background-color: #fff;padding-bottom: 15px;">
<div class="mui-content-padded" >
<h4 style="text-align: center;margin-bottom: 15px;padding-top: 15px;">云端数据库</h4>
<table id="list" border="1" width="100%" style="padding: 5px 10px;text-align: center;" >
</table>
</div>
</div>
</div>
<div id="popover" class="mui-popover">
<div class="mui-popover-arrow"></div>
<div class="mui-content-padded">
<h4 id="title" style="text-align: center;margin-top: 20px;">新增数据</h4>
<form class="mui-input-group" style="margin-top: 30px;">
<div class="mui-input-row">
<label>字段1：</label>
<input type="text" class="mui-input-clear" id="col1" placeholder="请输入">
</div>
<div class="mui-input-row">
<label>字段2：</label>
<input type="text" class="mui-input-clear" id="col2" placeholder="请输入">
</div>
<div class="mui-input-row">
<label>字段3：</label>
<input type="text" class="mui-input-clear" id="col3" placeholder="请输入">
</div>
</form>
<div id="add_div" class="operate mui-hidden">
<button type="button" class="mui-btn mui-btn-blue" id="add">确定</button>
</div>
<div id="edit_div" class="operate mui-hidden">
<button type="button" class="mui-btn mui-btn-blue" id="update" style="margin-right: 30px;">修改</button>
<button type="button" class="mui-btn mui-btn-red" id="del">删除</button>
</div>
</div>
</div>
<script type="text/javascript">
function trim(str){ //删除左右两端的空格
　　 return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
var network = false;
var ref = null;
mui.plusReady(function () {
if(plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE){
mui.toast("当前网络不给力，无法连接云端数据库~");
}else{
network = true;
ref = new Wilddog("https://muidemo.wilddogio.com/demo");
getList();
}
});
var list = document.getElementById("list");
var col1 = document.getElementById("col1");
var col2 = document.getElementById("col2");
var col3 = document.getElementById("col3");
var add_div = document.getElementById("add_div");
var edit_div = document.getElementById("edit_div");
var title = document.getElementById("title");
document.getElementById("open").addEventListener('tap',function () {
if(!network){
mui.toast("当前网络不给力，请稍后再试");
}else{
//清空数据
col1.value = "";
col2.value = "";
col3.value = "";
title.innerHTML = "新增数据";
add_div.classList.remove("mui-hidden");
if(!edit_div.classList.contains("mui-hidden")){
edit_div.classList.add("mui-hidden");
}
mui("#popover").popover("toggle");
}
});
document.getElementById("add").addEventListener('tap', function() {
if(!ref){
mui.toast("当前网络不给力，请稍后再试");
}else{
var check = true;
mui(".mui-input-group input").each(function () {
if(!this.value||trim(this.value)==""){
var label = this.previousElementSibling;
mui.alert(label.innerText+"不允许为空");
check = false;
return false;
}
});
if(check){
var newRef = ref.push({
"col1": col1.value,
"col2": col2.value,
"col3": col3.value,
});
add_div.classList.add("mui-hidden");
//关闭modal
mui("#popover").popover("toggle");
mui.toast("添加成功~");
//刷新界面
getList();
}
}
});
document.getElementById("update").addEventListener("tap", function() {
var check = true;
mui(".mui-input-group input").each(function () {
if(!this.value||trim(this.value)==""){
var label = this.previousElementSibling;
mui.alert(label.innerText+"不允许为空");
check = false;
return false;
}
});
if(check){
var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
newRef.update({
"col1": col1.value,
"col2": col2.value,
"col3": col3.value,
});
//关闭modal
mui("#popover").popover("toggle");
edit_div.classList.add("mui-hidden");
mui.toast("修改成功~");
//刷新界面
getList();
}
})
document.getElementById("del").addEventListener("tap", function() {
var newRef = ref.child(document.getElementById("col1").getAttribute("demoid"));
newRef.remove();
//关闭modal
mui("#popover").popover("toggle");
if(!edit_div.classList.contains("mui-hidden")){
edit_div.classList.add("mui-hidden");
}
mui.toast("删除成功~");
//刷新界面
getList();
})
//列表事件绑定，点击编辑数据
mui("#list").on("tap", "tr", function() {
var id = this.getAttribute("id");
if(id){
document.getElementById("col1").value = this.querySelector(".col1").innerHTML;
document.getElementById("col2").value = this.querySelector(".col2").innerHTML;
document.getElementById("col3").value = this.querySelector(".col3").innerHTML;
document.getElementById("col1").setAttribute("demoid", id);
title.innerHTML = "编辑数据";
if(!add_div.classList.contains("mui-hidden")){
add_div.classList.add("mui-hidden");
}
edit_div.classList.remove("mui-hidden");
mui("#popover").popover("toggle");
}
})
/**
* 获取最新记录
*/
function getList() {
ref.once("value", function(snapshot) {
list.innerHTML = "<tr class='title'><td>字段1</td><td>字段2</td><td>字段3</td></tr>";
var result = snapshot.val();
mui.each(result, function(key, elem) {
var li = document.createElement("tr");
li.setAttribute("id", key);
var col1 = document.createElement("td");
col1.className = "col1"
col1.innerHTML = elem.col1;
li.appendChild(col1);
var col2 = document.createElement("td");
col2.className = "col2"
col2.innerHTML = elem.col2;
li.appendChild(col2);
var col3 = document.createElement("td");
col3.className = "col3"
col3.innerHTML = elem.col3;
li.appendChild(col3);
list.appendChild(li);
})
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/dtpicker.html
View file @ 05d5bb5c
......@@ -69,7 +69,6 @@
$.init();
var result = $('#result')[0];
var btns = $('.btn');
var pickers = {};
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
......@@ -80,8 +79,8 @@
* 示例为了简洁，将 options 放在了按钮的 dom 上
* 也可以直接通过代码声明 optinos 用于实例化 DtPicker
*/
pickers[id] = pickers[id] || new $.DtPicker(options);
pickers[id].show(function(rs) {
var picker = new $.DtPicker(options);
picker.show(function(rs) {
/*
* rs.value 拼合后的 value
* rs.text 拼合后的 text
......@@ -92,6 +91,19 @@
* rs.i 分（minutes 的第二个字母），用法同年
*/
result.innerText = '选择结果: ' + rs.text;
/*
* 返回 false 可以阻止选择框的关闭
* return false;
*/
/*
* 释放组件资源，释放后将将不能再操作组件
* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实实。
*/
picker.dispose();
});
}, false);
});
......
examples/hello-mui/examples/echarts.html 0 → 100644
View file @ 05d5bb5c
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECahrt 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.chart {
height: 200px;
margin: 0px;
padding: 0px;
}
h5 {
margin-top: 30px;
font-weight: bold;
}
h5:first-child {
margin-top: 15px;
}
</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">chart（EChart图表）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>柱图示例</h5>
<div class="chart" id="barChart"></div>
<h5>线图示例</h5>
<div class="chart" id="lineChart"></div>
<h5>饼图示例</h5>
<div class="chart" id="pieChart"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../libs/echarts-all.js"></script>
<script>
var getOption = function(chartType) {
var chartOption = chartType == 'pie' ? {
calculable: false,
series: [{
name: '访问来源',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
data: [{
value: 335,
name: '直接访问'
}, {
value: 310,
name: '邮件营销'
}, {
value: 234,
name: '联盟广告'
}, {
value: 135,
name: '视频广告'
}, {
value: 1548,
name: '搜索引擎'
}]
}]
} : {
legend: {
data: ['蒸发量', '降水量']
},
grid: {
x: 35,
x2: 10,
y: 30,
y2: 25
},
toolbox: {
show: false,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
splitArea: {
show: true
}
}],
series: [{
name: '蒸发量',
type: chartType,
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
}, {
name: '降水量',
type: chartType,
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}]
};
return chartOption;
};
var byId = function(id) {
return document.getElementById(id);
};
var barChart = echarts.init(byId('barChart'));
barChart.setOption(getOption('bar'));
var lineChart = echarts.init(byId('lineChart'));
lineChart.setOption(getOption('line'));
var pieChart = echarts.init(byId('pieChart'));
pieChart.setOption(getOption('pie'));
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/feedback.html
View file @ 05d5bb5c
......@@ -29,7 +29,7 @@
</div>
<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
</div>
<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客户面板” 能够查阅反馈信息。</p>
<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
<script src="../js/mui.min.js"></script>
<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
......
examples/hello-mui/examples/grid-pagination.html
View file @ 05d5bb5c
......@@ -11,7 +11,7 @@
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-slider-indicator {
bottom: 0;
......@@ -21,6 +21,7 @@
}
</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>
......@@ -234,22 +235,26 @@
//克隆最后一个节点
var last = items[items.length - 1].cloneNode(true);
last.classList.add('mui-slider-item-duplicate');
//处理是否循环逻辑，若支持循环，需支持两点：
//1、在.mui-slider-group节点上增加.mui-slider-loop类
//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
var sliderApi = mui(slider).slider();
function toggleLoop(loop) {
if (loop) {
group.classList.add('mui-slider-loop');
group.insertBefore(last, group.firstChild);
group.appendChild(first);
sliderApi.refresh();
sliderApi.gotoItem(0);
} else {
group.classList.remove('mui-slider-loop');
group.removeChild(first);
group.removeChild(last);
sliderApi.refresh();
sliderApi.gotoItem(0);
}
}
//按下“循环”按钮的处理逻辑；
document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
var loop = e.detail.isActive;
......@@ -257,4 +262,5 @@
});
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/icons.html
View file @ 05d5bb5c
......@@ -83,11 +83,6 @@
<a><span class="mui-icon mui-icon-micoff"></span></a>
<a id="icon-location"><span class="mui-icon mui-icon-location"></span></a>
<a><span class="mui-icon mui-icon-map"></span></a>
<!--<a><span class="mui-icon mui-icon-volumehigh"></span></a>
<a><span class="mui-icon mui-icon-volumelow"></span></a>-->
<a><span class="mui-icon mui-icon-compose"></span></a>
<a><span class="mui-icon mui-icon-trash"></span></a>
<a><span class="mui-icon mui-icon-upload"></span></a>
......
examples/hello-mui/examples/imageviewer.html
View file @ 05d5bb5c
......@@ -10,7 +10,7 @@
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<style type="text/css">
.mui-fullscreen {
.mui-preview-image.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
......@@ -43,15 +43,22 @@
}
.mui-preview-image {
display: none;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.mui-preview-image.mui-preview-in {
display: block;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.mui-preview-image.mui-transitioning {
.mui-preview-image.mui-preview-out {
background: none;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.mui-preview-image.mui-transitioning .mui-preview-header,
.mui-preview-image.mui-transitioning .mui-preview-footer {
.mui-preview-image.mui-preview-out .mui-preview-header,
.mui-preview-image.mui-preview-out .mui-preview-footer {
display: none;
}
.mui-zoom-scroller {
......@@ -78,10 +85,6 @@
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
p img {
max-width: 100%;
height: auto;
}
.mui-slider .mui-slider-group .mui-slider-item img {
width: auto;
height: auto;
......@@ -122,6 +125,42 @@
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
p img {
max-width: 100%;
height: auto;
}
</style>
</head>
......
examples/hello-mui/examples/indexed-list-select.html
View file @ 05d5bb5c
......@@ -27,7 +27,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">选择机场</h1>
<button id='done' class="mui-btn mui-pull-right mui-btn-blue">完成</button>
<button id='done' class="mui-btn mui-pull-right mui-btn-blue mui-disabled">确定</button>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
......@@ -270,12 +270,29 @@
var checkedValues = [];
checkboxArray.forEach(function(box){
if(box.checked){
// checkedValues.push(box.parentNode.getAttribute('data-value'));
checkedValues.push(box.parentNode.innerText);
}
});
if(checkedValues.length>0){
mui.alert('你选择了: '+checkedValues);
}else{
mui.alert('你没选择任何机场');
}
},false);
mui('.mui-indexed-list-inner').on('change', 'input', function() {
var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
var value = count?"确定("+count+")":"确定";
done.innerHTML = value;
if(count){
if(done.classList.contains("mui-disabled")){
done.classList.remove("mui-disabled");
}
}else{
if(!done.classList.contains("mui-disabled")){
done.classList.add("mui-disabled");
}
}
});
});
</script>
</body>
......
examples/hello-mui/examples/info.html
View file @ 05d5bb5c
......@@ -26,10 +26,10 @@
</style>
</head>
<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>
<h1 class="mui-title">关于</h1>
</header> -->
</header>-->
<div class="mui-content">
<div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4>
......@@ -48,7 +48,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为2.0.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为2.2.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/listpicker.html
View file @ 05d5bb5c
......@@ -6,6 +6,7 @@
<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" />
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<style>
html,
......@@ -22,9 +23,6 @@
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
#userPicker {
height: 185px;
}
.mui-btn {
font-size: 16px;
padding: 8px;
......@@ -46,6 +44,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">listpicker (选择列表)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<div id='userPicker' class="mui-listpicker">
......@@ -73,7 +75,6 @@
<button data-method='setSelectedValue' data-args='zhz' class="mui-btn api-btn" type='button'>设置选中的值(智子)</button>
</p>
<div id='result' class="ui-alert"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
......@@ -85,10 +86,10 @@
//
var userPicker = doc.getElementById('userPicker');
var result = doc.getElementById('result');
userPicker.setSelectedValue('ymt');
//userPicker.setSelectedValue('ymt');
userPicker.addEventListener('change', function(event) {
var index = event.detail.index;
console.log(index);
//console.log(index);
}, false);
var apiBtns = [].slice.call($('.api-btn'));
for (var i in apiBtns) {
......@@ -104,6 +105,7 @@
}
});
})(mui, document);
</script>
</body>
......
examples/hello-mui/examples/oa-grid.html deleted 100644 → 0
View file @ 6dfc9a88
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</head>
<body>
<style>
/**grid 自适应代码**/
html, body, .mui-content {
height: 100%;
}
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
.mui-content {
position: relative;
}
.mui-grid-view {
position: absolute;
top: 184px;
bottom: 0;
min-height: 330px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
height: 33.33333333%;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -40px;
}
</style>
<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">自适应9宫图</h1>
</header>
<div class="mui-content">
<div style="height:140px;width:100%;background-image:url(../images/muwu.jpg);background-position:center center;"></div>
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">
Home
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">
Email
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-contact"></span>
<div class="mui-media-body">
Contact
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-chat"></span>
<div class="mui-media-body">
Chat
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-list"></span>
<div class="mui-media-body">
Sort
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-map"></span>
<div class="mui-media-body">
Map
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">
Search
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">
Phone
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<a href="#">
<span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">
Setting
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ 05d5bb5c
......@@ -23,22 +23,20 @@
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-right{
.mui-off-canvas-right {
color: #fff;
}
.title{
.title {
margin: 35px 15px 10px;
}
.title+.content{
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input{
input {
color: #000;
}
</style>
......@@ -53,9 +51,8 @@
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>。
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
......@@ -108,13 +105,8 @@
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content-padded">
<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中，
优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
当前页面为主界面，你可以在主界面放置任何内容；
打开侧滑菜单有多种方式：
1、在当前页面向左拖动；
2、点击页面右上角的<span class="mui-icon mui-icon-bars"></span> 图标；
3、通过JS API触发（例如点击如下蓝色按钮体验）；
<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向左拖动； 2、点击页面右上角的
<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
<span class="android-only">4、Android手机按menu键；</span>
</p>
<p style="padding: 5px 20px;margin-bottom: 5px;">
......@@ -139,6 +131,10 @@
<label>整体移动</label>
<input name="style" type="radio" value="all-move">
</div>
<div class="mui-input-row mui-radio">
<label>缩放式侧滑（类手机QQ）</label>
<input name="style" type="radio" value="main-move-scalable">
</div>
</form>
</div>
......@@ -158,51 +154,52 @@
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//Android暂不支持整体移动动画
if(!mui.os.android){
if (!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change','input',function () {
if(this.checked){
switch (this.value){
case 'main-move':
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
if(moveTogether){
classList.remove('mui-scalable');
switch (this.value) {
case 'main-move':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
moveTogether = false;
}
break;
case 'main-move-scalable':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
if(classList.contains('mui-slide-in')){
classList.remove('mui-slide-in');
}
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
......@@ -212,7 +209,6 @@
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
......@@ -228,4 +224,5 @@
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right.html
View file @ 05d5bb5c
......@@ -23,24 +23,22 @@
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-left{
.mui-off-canvas-left {
color: #fff;
}
.title{
.title {
margin: 35px 15px 10px;
}
.title+.content{
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
input{
input {
color: #000;
}
</style>
</head>
......@@ -52,9 +50,8 @@
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式：
1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置;
3.点击如下红色按钮<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向左拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>。
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
......@@ -107,12 +104,8 @@
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-content-padded">
<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中，
优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用；
当前页面为主界面，你可以在主界面放置任何内容；
打开侧滑菜单有多种方式： 1、在当前页面向右拖动； 2、点击页面左上角的
<span class="mui-icon mui-icon-bars"></span> 图标；
3、通过JS API触发（例如点击如下蓝色按钮体验）；
<p>这是可拖动式右滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向右拖动； 2、点击页面左上角的
<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
<span class="android-only">4、Android手机按menu键；</span>
</p>
<p style="padding: 5px 20px;margin-bottom: 5px;">
......@@ -137,9 +130,12 @@
<label>整体移动</label>
<input name="style" type="radio" value="all-move">
</div>
<div class="mui-input-row mui-radio">
<label>缩放式侧滑（类手机QQ）</label>
<input name="style" type="radio" value="main-move-scalable">
</div>
</form>
</div>
</div>
<!-- off-canvas backdrop -->
......@@ -155,17 +151,13 @@
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
if (!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
......@@ -173,33 +165,36 @@
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch (this.value) {
case 'main-move':
classList.remove('mui-slide-in');
if(moveTogether){
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
break;
case 'main-move-scalable':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
if(classList.contains('mui-slide-in')){
classList.remove('mui-slide-in');
}
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
}
});
//主界面‘显示侧滑菜单’按钮的点击事件
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
......@@ -221,4 +216,5 @@
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/setting.html
View file @ 05d5bb5c
......@@ -215,7 +215,7 @@
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.0.0</i></a>
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.2.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
......
examples/hello-mui/js/mui.js
View file @ 05d5bb5c
This diff is collapsed.
examples/hello-mui/js/mui.min.js
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.previewimage.js
View file @ 05d5bb5c
This diff is collapsed.
examples/hello-mui/js/mui.zoom.js
View file @ 05d5bb5c
......@@ -113,10 +113,15 @@
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
};
zoom.toggleZoom = function(position) {
zoom.toggleZoom = function(position, speed) {
if (typeof position === 'number') {
speed = position;
position = undefined;
}
speed = typeof speed === 'undefined' ? zoom.options.speed : speed;
if (scale && scale !== 1) {
scale = currentScale = 1;
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
zoom.scrollerTransition(speed).scrollerTransform(0, 0);
} else {
scale = currentScale = zoom.options.maxZoom;
if (position) {
......@@ -142,12 +147,12 @@
}
offsetX = Math.min(Math.max(offsetX, imageMinX), imageMaxX);
offsetY = Math.min(Math.max(offsetY, imageMinY), imageMaxY);
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(offsetX, offsetY);
zoom.scrollerTransition(speed).scrollerTransform(offsetX, offsetY);
} else {
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
zoom.scrollerTransition(speed).scrollerTransform(0, 0);
}
}
zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
zoom.zoomerTransition(speed).zoomerTransform(scale);
};
zoom._cal = function() {
......
examples/hello-mui/js/update.js
View file @ 05d5bb5c
......@@ -3,8 +3,8 @@ var server="http://www.dcloud.io/check/update";//获取升级描述文件服务
function update(){
mui.getJSON(server,{"appid":plus.runtime.appid,"version":plus.runtime.version,"imei":plus.device.imei},function (data) {
if(data.status){
plus.ui.confirm( data.note, function(i){
if ( 0==i ) {
plus.nativeUI.confirm( data.note, function(event){
if ( 0==event.index ) {
plus.runtime.openURL( data.url );
}
}, data.title, ["立即更新","取　　消"] );
......
examples/hello-mui/libs/echarts-all.js 0 → 100644
View file @ 05d5bb5c
This diff is collapsed.
examples/hello-mui/list.html
View file @ 05d5bb5c
......@@ -358,6 +358,16 @@
advertisement（广告模板）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/echarts.html">
chart（EChart 图表）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/clouddb_wilddog.html">
cloud DB（云端数据库）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/im-chat.html">
chat（聊天窗口）
......@@ -425,9 +435,8 @@
}
}
//Android平台暂时使用slide-in-right动画
if(mui.os.android&&parseFloat(mui.os.version)<4.4){
if(parseFloat(mui.os.version)<4.4){
aniShow = "slide-in-right";
// document.getElementById('feedback').style.display = 'none';
}
}
//初始化，并预加载webview模式的选项卡
......
examples/login/css/mui.min.css
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/js/mui.min.js
View file @ 05d5bb5c
This source diff could not be displayed because it is too large. You can view the blob instead.
js/input.plugin.js
View file @ 05d5bb5c
......@@ -38,7 +38,7 @@
this.sliderActionSelector = SELECTOR_TOOLTIP;
} else { //clear,speech,search
if (~this.options.actions.indexOf('clear')) {
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR +' '+ CLASS_HIDDEN;
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + ' ' + CLASS_HIDDEN;
this.clearActionSelector = SELECTOR_ICON_CLOSE;
}
if (~this.options.actions.indexOf('speech')) { //only for 5+
......@@ -119,7 +119,7 @@
var showTip = function() {
tooltip.classList.remove(CLASS_HIDDEN);
tooltipWidth = tooltipWidth || tooltip.offsetWidth;
var scaleWidth = Math.abs(element.value) / distince * width;
var scaleWidth = (width / distince) * Math.abs(element.value - element.min);
tooltip.style.left = (14 + offsetLeft + scaleWidth - tooltipWidth / 2) + 'px';
tooltip.innerText = element.value;
if (timer) {
......
js/mui.back.5+.js
View file @ 05d5bb5c
......@@ -6,7 +6,7 @@
*/
(function($, window) {
if ($.os.plus && $.os.android) {
$.registerBack({
$.addBack({
name: 'mui',
index: 5,
handle: function() {
......@@ -32,7 +32,7 @@
/**
* 5+ back
*/
$.registerBack({
$.addBack({
name: '5+',
index: 10,
handle: function() {
......@@ -101,7 +101,7 @@
}
});
//处理按键监听事件
$.registerInit({
$.addInit({
name: 'keyEventBind',
index: 1000,
handle: function() {
......
js/mui.back.js
View file @ 05d5bb5c
......@@ -10,13 +10,13 @@
* @param {type} back
* @returns {$.gestures}
*/
$.registerBack = function(back) {
return $.registerHandler('backs', back);
$.addBack = function(back) {
return $.addAction('backs', back);
};
/**
* default
*/
$.registerBack({
$.addBack({
name: 'browser',
index: 100,
handle: function() {
......@@ -36,9 +36,7 @@
return;
}
}
$.each($.backs, function(index, back) {
return !back.handle();
});
$.doAction('backs');
};
window.addEventListener('tap', function(e) {
var action = $.targets.action;
......
js/mui.class.scroll.js
View file @ 05d5bb5c
......@@ -28,11 +28,11 @@
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,
scrollX: false,
startX: 0,
startY: 0,
indicators: true,
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
......@@ -41,15 +41,15 @@
},
momentum: true,
snap: false,
snap: false,//图片轮播，拖拽式选项卡
bounce: true,
bounceTime: 300,
bounceEasing: ease.circular.style,
bounce: true,//是否启用回弹
bounceTime: 300,//回弹动画时间
bounceEasing: ease.circular.style,//回弹动画曲线
directionLockThreshold: 5,
parallaxElement: false,
parallaxElement: false,//视差元素
parallaxRatio: 0.5
}, options);
......@@ -353,7 +353,7 @@
} else {
isReturn = true;
}
if (isPreventDefault) {
if (this.moved || isPreventDefault) {
e.stopPropagation(); //阻止冒泡(scroll类嵌套)
detail.gesture && detail.gesture.preventDefault();
}
......
js/mui.class.scroll.pullrefresh.js
View file @ 05d5bb5c
......@@ -23,6 +23,7 @@
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......@@ -46,7 +47,7 @@
this.pulldownLoading(undefined, time || 0);
return true;
} else {
this.topPocket.classList.remove(CLASS_VISIBILITY);
!this.loading && this.topPocket.classList.remove(CLASS_VISIBILITY);
}
}
return this._super(time);
......@@ -96,7 +97,7 @@
},
endPullupToRefresh: function(finished) {
var self = this;
if (self.bottomPocket && self.loading && !this.pulldown) {
if (self.bottomPocket) { // && self.loading && !this.pulldown
self.loading = false;
if (finished) {
this.finished = true;
......@@ -106,18 +107,26 @@
self.wrapper.removeEventListener('scrollbottom', self);
} else {
self._setCaption(self.options.up.contentdown);
setTimeout(function() {
// setTimeout(function() {
self.loading || self.bottomPocket.classList.remove(CLASS_VISIBILITY);
}, 350);
// }, 300);
}
}
},
refresh: function(isReset) {
if (isReset && this.finished) {
disablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
this.wrapper.removeEventListener('scrollbottom', this);
},
enablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.classList.remove(CLASS_HIDDEN);
this._setCaption(this.options.up.contentdown);
this.wrapper.addEventListener('scrollbottom', this);
},
refresh: function(isReset) {
if (isReset && this.finished) {
this.enablePullupToRefresh();
this.finished = false;
}
this._super();
......
js/mui.detect.5+.js
View file @ 05d5bb5c
......@@ -14,11 +14,11 @@
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
}
$(function() {
document.body.classList.add($.className('plus-stream'));
});
}
}
}
detect.call($, navigator.userAgent);
})(mui, document);
\ No newline at end of file
js/mui.dialog.alert.js
View file @ 05d5bb5c
......@@ -2,23 +2,25 @@
/**
* 警告消息框
*/
$.alert = function(message,title,btnValue,callback) {
$.alert = function(message, title, btnValue, callback) {
if ($.os.plus) {
if(typeof message === undefined){
if (typeof message === undefined) {
return;
}else{
if(typeof title ==='function'){
} else {
if (typeof title === 'function') {
callback = title;
title = null;
btnValue = '确定';
}else if(typeof btnValue ==='function'){
} else if (typeof btnValue === 'function') {
callback = btnValue;
btnValue = null;
}
plus.nativeUI.alert(message,callback,title,btnValue);
$.plusReady(function() {
plus.nativeUI.alert(message, callback, title, btnValue);
});
}
}else{
} else {
//TODO H5版本
window.alert(message);
}
......
js/mui.dialog.confirm.js
View file @ 05d5bb5c
......@@ -15,7 +15,9 @@
callback = btnArray;
btnArray = null;
}
$.plusReady(function() {
plus.nativeUI.confirm(message, callback, title, btnArray);
});
}
} else {
......
js/mui.dialog.prompt.js
View file @ 05d5bb5c
......@@ -21,7 +21,9 @@
callback = btnArray;
btnArray = null;
}
$.plusReady(function() {
plus.nativeUI.prompt(text, callback, title, defaultText, btnArray);
});
}
} else {
......
js/mui.dialog.toast.js
View file @ 05d5bb5c
......@@ -3,17 +3,21 @@
* 自动消失提示框
*/
$.toast = function(message) {
if($.os.plus){
if ($.os.plus) {
//默认显示在底部；
plus.nativeUI.toast(message,{verticalAlign:'bottom'});
}else{
$.plusReady(function() {
plus.nativeUI.toast(message, {
verticalAlign: 'bottom'
});
});
} else {
var toast = document.createElement('div');
toast.classList.add($.className('toast-container'));
toast.innerHTML = '<div class="'+$.className('toast-message')+'">'+message+'</div>';
toast.innerHTML = '<div class="' + $.className('toast-message') + '">' + message + '</div>';
document.body.appendChild(toast);
setTimeout(function(){
setTimeout(function() {
document.body.removeChild(toast);
},2000);
}, 2000);
}
};
......
js/mui.event.js
View file @ 05d5bb5c
......@@ -99,6 +99,22 @@
}, true);
};
};
var findDelegateFn = function(element, event) {
var delegateCallbacks = delegateFns[mid(element)];
var result = false;
if (delegateCallbacks) {
result = [];
if (event) {
var filterFn = function(fn) {
return fn.type === event;
}
return delegateCallbacks.filter(filterFn);
} else {
result = delegateCallbacks;
}
}
return result;
};
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/**
* mui delegate events
......@@ -121,8 +137,16 @@
var delegateCallbacks = delegateCallbackObjs[selector] || (delegateCallbackObjs[selector] = []);
delegateCallbacks.push(callback);
if (isAddEventListener) {
delegateFns[mid(element)] = delegateFn(element, event, selector, callback);
element.addEventListener(event, delegateFns[mid(element)]);
var delegateFnArray = delegateFns[mid(element)];
if (!delegateFnArray) {
delegateFnArray = [];
}
var delegateCallback = delegateFn(element, event, selector, callback);
delegateFnArray.push(delegateCallback);
delegateCallback.i = delegateFnArray.length - 1;
delegateCallback.type = event;
delegateFns[mid(element)] = delegateFnArray;
element.addEventListener(event, delegateCallback);
if (event === 'tap') { //TODO 需要找个更好的解决方案
element.addEventListener('click', function(e) {
if (e.target) {
......@@ -146,11 +170,13 @@
$.fn.off = function(event, selector, callback) {
return this.each(function() {
var _mid = mid(this);
if (!callback) {
if (delegates[_mid] && delegates[_mid][event]) {
delete delegates[_mid][event][selector];
}
} else {
if (!event) { //mui(selector).off();
delegates[_mid] && delete delegates[_mid];
} else if (!selector) { //mui(selector).off(event);
delegates[_mid] && delete delegates[_mid][event];
} else if (!callback) { //mui(selector).off(event,selector);
delegates[_mid] && delegates[_mid][event] && delete delegates[_mid][event][selector];
} else { //mui(selector).off(event,selector,callback);
var delegateCallbacks = delegates[_mid] && delegates[_mid][event] && delegates[_mid][event][selector];
$.each(delegateCallbacks, function(index, delegateCallback) {
if (mid(delegateCallback) === mid(callback)) {
......@@ -159,11 +185,22 @@
}
}, true);
}
if (delegates[_mid]) {
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if (delegates[_mid] && $.isEmptyObject(delegates[_mid][event])) {
this.removeEventListener(event, delegateFns[_mid]);
delete delegateFns[_mid];
if ((!delegates[_mid][event] || $.isEmptyObject(delegates[_mid][event]))) {
findDelegateFn(this, event).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
} else {
//如果delegates[_mid]已不存在，删除所有
findDelegateFn(this).forEach(function(fn) {
this.removeEventListener(fn.type, fn);
delete delegateFns[_mid][fn.i];
}.bind(this));
}
})
});
};
})(mui);
\ No newline at end of file
js/mui.gestures.drag.js
View file @ 05d5bb5c
......@@ -27,15 +27,15 @@
if (!session.drag) {
session.drag = true;
$.trigger(event.target, name + 'start', touch);
$.trigger(session.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.drag && touch.isFinal) {
$.trigger(event.target, name + 'end', touch);
$.trigger(session.target, name + 'end', touch);
}
break;
}
......@@ -43,7 +43,7 @@
/**
* mui gesture drag
*/
$.registerGesture({
$.addGesture({
name: name,
index: 20,
handle: handle,
......
js/mui.gestures.flick.js
View file @ 05d5bb5c
......@@ -24,8 +24,8 @@
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
break;
}
......@@ -34,7 +34,7 @@
/**
* mui gesture flick
*/
$.registerGesture({
$.addGesture({
name: name,
index: 5,
handle: handle,
......
js/mui.gestures.hold.js
View file @ 05d5bb5c
......@@ -7,6 +7,7 @@
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
......@@ -14,7 +15,7 @@
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(event.target, name, touch);
$.trigger(session.target, name, touch);
}, options.holdTimeout);
}
break;
......@@ -24,7 +25,7 @@
case $.EVENT_CANCEL:
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(event.target, 'release', touch);
$.trigger(session.target, 'release', touch);
}
break;
}
......@@ -32,7 +33,7 @@
/**
* mui gesture hold
*/
$.registerGesture({
$.addGesture({
name: name,
index: 10,
handle: handle,
......
js/mui.gestures.js
View file @ 05d5bb5c
......@@ -10,6 +10,9 @@
$.EVENT_END = 'touchend';
$.EVENT_CANCEL = 'touchcancel';
$.EVENT_CLICK = 'click';
$.gestures = {
session: {}
};
/**
* Gesture preventDefault
* @param {type} e
......@@ -32,8 +35,8 @@
* @param {type} gesture
* @returns {$.gestures}
*/
$.registerGesture = function(gesture) {
return $.registerHandler('gestures', gesture);
$.addGesture = function(gesture) {
return $.addAction('gestures', gesture);
};
......@@ -96,11 +99,27 @@
}
return y > 0 ? 'up' : 'down';
};
/**
* rotation
* @param {Object} start
* @param {Object} end
*/
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
/**
* detect gestures
* @param {type} event
......@@ -111,7 +130,7 @@
if ($.gestures.stoped) {
return;
}
$.each($.gestures, function(index, gesture) {
$.doAction('gestures', function(index, gesture) {
if (!$.gestures.stoped) {
if ($.options.gestureConfig[gesture.name] !== false) {
gesture.handle(event, touch);
......@@ -120,17 +139,10 @@
});
};
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
* 暂时无用
* @param {Object} node
* @param {Object} parent
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
var hasParent = function(node, parent) {
while (node) {
if (node == parent) {
......@@ -288,7 +300,7 @@
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
direction = getDirection(deltaX, deltaY) || last.direction;
session.lastInterval = touch;
} else {
......@@ -303,25 +315,17 @@
touch.velocityY = velocityY;
touch.direction = direction;
};
var targetIds = {};
var getTouches = function(event, touch) {
var allTouches = $.slice.call(event.touches);
var allTouches = $.slice.call(event.touches || event);
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
$.gestures.session || ($.gestures.session = {
targetIds: {}
});
//当touchstart或touchmove且touches长度为1，直接获得all和changed
if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
if (type === $.EVENT_START) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
firstTarget: event.target,
targetIds: {}
};
}
var targetIds = $.gestures.session.targetIds;
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
......@@ -330,13 +334,12 @@
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var targetIds = $.gestures.session.targetIds;
var changedTouches = $.slice.call(event.changedTouches);
var changedTouches = $.slice.call(event.changedTouches || event);
touch.target = event.target;
var sessionTarget = $.gestures.session.target || event.target;
targetTouches = allTouches.filter(function(touch) {
return true; //return hasParent(touch.target, touch.firstTarget);
return hasParent(touch.target, sessionTarget);
});
if (type === $.EVENT_START) {
......@@ -366,6 +369,12 @@
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
if (type === $.EVENT_START && touchesLength - changedTouchesLength === 0) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
target: event.target
};
}
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
......
js/mui.gestures.longtap.js
View file @ 05d5bb5c
......@@ -7,12 +7,13 @@
(function($, name) {
var timer;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
$.trigger(event.target, name, touch);
$.trigger(session.target, name, touch);
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
......@@ -29,7 +30,7 @@
/**
* mui gesture longtap
*/
$.registerGesture({
$.addGesture({
name: name,
index: 10,
handle: handle,
......
js/mui.gestures.pinch.js
View file @ 05d5bb5c
......@@ -18,30 +18,30 @@
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
$.trigger(session.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
$.trigger(session.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
$.trigger(session.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
$.trigger(session.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
$.trigger(session.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
$.trigger(session.target, name + 'end', touch);
}
break;
}
......@@ -49,7 +49,7 @@
/**
* mui gesture pinch
*/
$.registerGesture({
$.addGesture({
name: name,
index: 10,
handle: handle,
......
js/mui.gestures.swipe.js
View file @ 05d5bb5c
......@@ -6,19 +6,21 @@
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
//TODO 后续根据velocity计算
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
$.trigger(session.target, name, touch);
$.trigger(session.target, name + touch.direction, touch);
}
}
};
/**
* mui gesture swipe
*/
$.registerGesture({
$.addGesture({
name: name,
index: 10,
handle: handle,
......
js/mui.gestures.tap.js
View file @ 05d5bb5c
......@@ -8,13 +8,14 @@
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
var session = $.gestures.session;
var options = this.options;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = event.target;
var target = session.target;
if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
return;
}
......@@ -29,7 +30,7 @@
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = event.target;
lastTarget = target;
}
break;
}
......@@ -37,7 +38,7 @@
/**
* mui gesture tap
*/
$.registerGesture({
$.addGesture({
name: name,
index: 30,
handle: handle,
......
js/mui.init.5+.js
View file @ 05d5bb5c
......@@ -86,7 +86,13 @@
*/
$.fire = function(webview, eventType, data) {
if (webview) {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c") + "')");
if (data !== '') {
data = data || {};
if ($.isPlainObject(data)) {
data = JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c");
}
}
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + data + "')");
}
};
/**
......@@ -97,7 +103,11 @@
*/
$.receive = function(eventType, data) {
if (eventType) {
try {
if (data) {
data = JSON.parse(data);
}
} catch (e) {}
$.trigger(document, eventType, data);
}
};
......@@ -247,7 +257,7 @@
}
//之前没有，那就新创建
if(!webview){
if (!webview) {
webview = plus.webview.create(options.url, id, $.windowOptions(options.styles), $.extend({
preload: true
}, options.extras));
......@@ -389,7 +399,7 @@
$.plusReady(function() {
$.currentWebview = plus.webview.currentWebview();
});
$.registerInit({
$.addInit({
name: '5+',
index: 100,
handle: function() {
......
js/mui.init.js
View file @ 05d5bb5c
......@@ -44,7 +44,7 @@
isInitialized = true;
$.options = $.extend(true, $.global, options || {});
$.ready(function() {
$.each($.inits, function(index, init) {
$.doAction('inits', function(index, init) {
var isInit = !!(!inits[init.name] || init.repeat);
if (isInit) {
init.handle.call($);
......@@ -59,8 +59,8 @@
* 增加初始化执行流程
* @param {function} init
*/
$.registerInit = function(init) {
return $.registerHandler('inits', init);
$.addInit = function(init) {
return $.addAction('inits', init);
};
$(function() {
var classList = document.body.classList;
......
js/mui.init.pullrefresh.js
View file @ 05d5bb5c
......@@ -4,7 +4,7 @@
* @returns {undefined}
*/
(function($) {
$.registerInit({
$.addInit({
name: 'pullrefresh',
index: 1000,
handle: function() {
......
js/mui.js
View file @ 05d5bb5c
......@@ -320,19 +320,28 @@ var mui = (function(document, undefined) {
}
return result;
};
$.registerHandler = function(type, handler) {
var handlers = $[type];
if (!handlers) {
handlers = [];
}
handler.index = handler.index || 1000;
handlers.push(handler);
handlers.sort(function(a, b) {
$.hooks = {};
$.addAction = function(type, hook) {
var hooks = $.hooks[type];
if (!hooks) {
hooks = [];
}
hook.index = hook.index || 1000;
hooks.push(hook);
hooks.sort(function(a, b) {
return a.index - b.index;
});
$[type] = handlers;
return $[type];
$.hooks[type] = hooks;
return $.hooks[type];
};
$.doAction = function(type, callback) {
if ($.isFunction(callback)) { //指定了callback
$.each($.hooks[type], callback);
} else { //未指定callback，直接执行
$.each($.hooks[type], function(index, hook) {
return !hook.handle();
});
}
};
/**
* setTimeout封装
......
js/mui.offcanvas.js
View file @ 05d5bb5c
......@@ -9,7 +9,7 @@
(function($, window, document, name) {
var CLASS_OFF_CANVAS_LEFT = $.className('off-canvas-left');
var CLASS_OFF_CANVAS_RIGHT = $.className('off-canvas-right');
var CLASS_ACTION_BACKDEOP = $.className('off-canvas-backdrop');
var CLASS_ACTION_BACKDROP = $.className('off-canvas-backdrop');
var CLASS_OFF_CANVAS_WRAP = $.className('off-canvas-wrap');
var CLASS_SLIDE_IN = $.className('slide-in');
......@@ -28,7 +28,9 @@
this.classList = this.wrapper.classList;
if (this.scroller) {
this.options = $.extend(true, {
dragThresholdX: 10
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
}, options);
document.body.classList.add($.className('fullscreen')); //fullscreen
this.refresh();
......@@ -38,6 +40,7 @@
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
this.scalable = this.classList.contains($.className('scalable')) && !this.slideIn;
this.scroller = this.wrapper.querySelector(SELECTOR_INNER_WRAP);
// !offCanvas && this.scroller.classList.remove(CLASS_TRANSITIONING);
// !offCanvas && this.scroller.setAttribute('style', '');
......@@ -69,7 +72,7 @@
// this.offCanvasLeft.classList.remove(CLASS_ACTIVE);
// this.offCanvasLeft.setAttribute('style', '');
}
this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDEOP);
this.backdrop = this.scroller.querySelector('.' + CLASS_ACTION_BACKDROP);
this.options.dragThresholdX = this.options.dragThresholdX || 10;
......@@ -103,24 +106,51 @@
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
if (this.classList.contains(CLASS_ACTIVE)) {
this.scroller = this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE) ? this.offCanvasRight : this.offCanvasLeft;
if (this.offCanvasRight && this.offCanvasRight.classList.contains(CLASS_ACTIVE)) {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
}
} else {
if (detail.direction === 'left' && this.offCanvasRight) {
this.scroller = this.offCanvasRight;
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else if (detail.direction === 'right' && this.offCanvasLeft) {
this.scroller = this.offCanvasLeft;
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.scroller = null;
}
}
} else {
if (this.classList.contains(CLASS_ACTIVE)) {
if (detail.direction === 'left') {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
}
if (this.scroller) {
} else {
if (detail.direction === 'right') {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
} else {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
}
}
}
if (this.offCanvas) {
this.startX = this.lastX;
this.isDragging = true;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this.offCanvas.classList.remove(CLASS_TRANSITIONING);
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
this._initOffCanvasVisible();
......@@ -137,10 +167,10 @@
var detail = e.detail;
var direction = detail.direction;
this.isDragging = false;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
var ratio = 0;
var x = this.getTranslateX();
if (!this.slideIn) {
if (x >= 0) {
ratio = (this.offCanvasLeftWidth && (x / this.offCanvasLeftWidth)) || 0;
......@@ -317,7 +347,7 @@
}
}
} else {
if (this.scroller.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_RIGHT)) {
if (x < 0) {
this.setTranslateX(0);
return;
......@@ -343,12 +373,35 @@
},
setTranslateX: $.animationFrame(function(x) {
if (this.scroller) {
if (this.scalable && this.offCanvas.parentNode === this.wrapper) {
var percent = Math.abs(x) / this.offCanvasWidth;
var zoomOutScale = 1 - (1 - this.options.scale) * percent;
var zoomInScale = this.options.scale + (1 - this.options.scale) * percent;
var zoomOutOpacity = 1 - (1 - this.options.opacity) * percent;
var zoomInOpacity = this.options.opacity + (1 - this.options.opacity) * percent;
if (this.offCanvas.classList.contains(CLASS_OFF_CANVAS_LEFT)) {
this.offCanvas.style.webkitTransformOrigin = '-100%';
this.scroller.style.webkitTransformOrigin = 'left';
} else {
this.offCanvas.style.webkitTransformOrigin = '200%';
this.scroller.style.webkitTransformOrigin = 'right';
}
this.offCanvas.style.opacity = zoomInOpacity;
this.offCanvas.style.webkitTransform = 'translate3d(0,0,0) scale(' + zoomInScale + ')';
this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0) scale(' + zoomOutScale + ')';
} else {
if (this.slideIn) {
this.offCanvas.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
} else {
this.scroller.style.webkitTransform = 'translate3d(' + x + 'px,0,0)';
}
}
}
}),
getTranslateX: function() {
if (this.scroller) {
var result = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
if (this.offCanvas) {
var scroller = this.slideIn ? this.offCanvas : this.scroller;
var result = $.parseTranslateMatrix($.getStyles(scroller, 'webkitTransform'));
return (result && result.x) || 0;
}
return 0;
......@@ -377,10 +430,11 @@
},
close: function() {
this._initOffCanvasVisible();
if (this.slideIn) {
this.scroller = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
}
this.offCanvas = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT + '.' + CLASS_ACTIVE) || this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_LEFT + '.' + CLASS_ACTIVE);
this.offCanvasWidth = this.offCanvas.offsetWidth;
if (this.scroller) {
this.offCanvas.offsetHeight;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
this.openPercentage(0);
}
......@@ -393,10 +447,16 @@
if (!direction) {
direction = this.wrapper.querySelector('.' + CLASS_OFF_CANVAS_RIGHT) ? 'right' : 'left';
}
if (this.slideIn) {
this.scroller = direction === 'right' ? this.offCanvasRight : this.offCanvasLeft;
if (direction === 'right') {
this.offCanvas = this.offCanvasRight;
this.offCanvasWidth = this.offCanvasRightWidth;
} else {
this.offCanvas = this.offCanvasLeft;
this.offCanvasWidth = this.offCanvasLeftWidth;
}
if (this.scroller) {
this.offCanvas.offsetHeight;
this.offCanvas.classList.add(CLASS_TRANSITIONING);
this.scroller.classList.add(CLASS_TRANSITIONING);
this.openPercentage(direction === 'left' ? 100 : -100);
}
......@@ -459,7 +519,7 @@
var target = e.target;
for (; target && target !== document; target = target.parentNode) {
if (target.tagName === 'A' && target.hash && target.hash === ('#' + $.targets.offcanvas.id)) {
e.detail.gesture.preventDefault(); //fixed hashchange
e.detail && e.detail.gesture && e.detail.gesture.preventDefault(); //fixed hashchange
$($.targets._container).offCanvas().toggle($.targets.offcanvas);
$.targets.offcanvas = $.targets._container = null;
break;
......
js/pullrefresh.5+.js
View file @ 05d5bb5c
......@@ -201,16 +201,24 @@
}
}
},
scrollTo: function(x, y, time) {
$.scrollTo(x, y, time);
disablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.className = $.className('pull-bottom-pocket') + ' ' + CLASS_HIDDEN;
window.removeEventListener('dragup', this);
},
refresh: function(isReset) {
if (isReset && this.finished) {
enablePullupToRefresh: function() {
this._initPullupRefresh();
this.bottomPocket.classList.remove(CLASS_HIDDEN);
this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
this.pullCaption.innerHTML = this.options.up.contentdown;
window.addEventListener('dragup', this);
},
scrollTo: function(x, y, time) {
$.scrollTo(x, y, time);
},
refresh: function(isReset) {
if (isReset && this.finished) {
this.enablePullupToRefresh();
this.finished = false;
}
}
......
js/tableviews.js
View file @ 05d5bb5c
......@@ -436,12 +436,14 @@
if (input) {
// input.click();
input.checked = !input.checked;
$.trigger(input, 'change');
}
} else if (classList.contains($.className('checkbox'))) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
};
......
package.json
View file @ 05d5bb5c
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "2.0.0",
"version": "2.2.0",
"keywords": [
"css",
"fonts",
......
sass/bars.scss
View file @ 05d5bb5c
......@@ -307,3 +307,6 @@
margin: 0 auto;
width: auto;
}
.#{$namespace}bar.#{$namespace}bar-header-secondary .#{$namespace}segmented-control {
top: 0px;
}
sass/fullscreen.scss
View file @ 05d5bb5c
......@@ -6,7 +6,7 @@
left: 0;
width: 100%;
height: 100%;
.#{$namespace}slider-group{
&.#{$namespace}slider .#{$namespace}slider-group{
height:100%;
}
......@@ -17,7 +17,7 @@
bottom:0;
position: absolute;
}
.#{$namespace}slider-item>a{
&.#{$namespace}slider .#{$namespace}slider-item>a{
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
......
sass/off-canvas.scss
View file @ 05d5bb5c
This diff is collapsed.
sass/os.scss
View file @ 05d5bb5c
This diff is collapsed.
sass/push.scss
View file @ 05d5bb5c
This diff is collapsed.
sass/table-views.scss
View file @ 05d5bb5c
This diff is collapsed.
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