Skip to content

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

编译至v1.5.0

parent 48f4a40e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1825 additions and 578 deletions
dist/css/mui.css
View file @ df377fd1
/*!
* =====================================================
* Mui v1.4.0 (https://github.com/dcloudio/mui)
* Mui v1.5.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -629,6 +629,9 @@ p {
width: auto;
overflow: auto;
}
.mui-plus-pullrefresh .mui-slider-group {
overflow: visible;
}
.mui-plus-pullrefresh .mui-scroll {
position: static;
width: auto;
......@@ -886,15 +889,15 @@ button,
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
input[type="button"]:active, input[type="button"].mui-active,
input[type="submit"]:active,
input[type="submit"].mui-active,
input[type="reset"]:active,
input[type="reset"].mui-active,
button:active,
button.mui-active,
.mui-btn:active,
.mui-btn.mui-active {
input[type="button"]:enabled:active, input[type="button"].mui-active:enabled,
input[type="submit"]:enabled:active,
input[type="submit"].mui-active:enabled,
input[type="reset"]:enabled:active,
input[type="reset"].mui-active:enabled,
button:enabled:active,
button.mui-active:enabled,
.mui-btn:enabled:active,
.mui-btn.mui-active:enabled {
color: #fff;
background-color: #929292;
}
......@@ -916,9 +919,9 @@ input[type="submit"],
background-color: #007aff;
border: 1px solid #007aff;
}
input[type="submit"]:active, input[type="submit"].mui-active,
.mui-btn-primary:active,
.mui-btn-primary.mui-active, .mui-btn-blue:active, .mui-btn-blue.mui-active {
input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled,
.mui-btn-primary:enabled:active,
.mui-btn-primary.mui-active:enabled, .mui-btn-blue:enabled:active, .mui-btn-blue.mui-active:enabled {
color: #fff;
background-color: #0062cc;
border: 1px solid #0062cc;
......@@ -929,7 +932,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #4cd964;
border: 1px solid #4cd964;
}
.mui-btn-positive:active, .mui-btn-positive.mui-active, .mui-btn-success:active, .mui-btn-success.mui-active, .mui-btn-green:active, .mui-btn-green.mui-active {
.mui-btn-positive:enabled:active, .mui-btn-positive.mui-active:enabled, .mui-btn-success:enabled:active, .mui-btn-success.mui-active:enabled, .mui-btn-green:enabled:active, .mui-btn-green.mui-active:enabled {
color: #fff;
background-color: #2ac845;
border: 1px solid #2ac845;
......@@ -940,7 +943,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #f0ad4e;
border: 1px solid #f0ad4e;
}
.mui-btn-warning:active, .mui-btn-warning.mui-active, .mui-btn-yellow:active, .mui-btn-yellow.mui-active {
.mui-btn-warning:enabled:active, .mui-btn-warning.mui-active:enabled, .mui-btn-yellow:enabled:active, .mui-btn-yellow.mui-active:enabled {
color: #fff;
background-color: #ec971f;
border: 1px solid #ec971f;
......@@ -951,7 +954,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #dd524d;
border: 1px solid #dd524d;
}
.mui-btn-negative:active, .mui-btn-negative.mui-active, .mui-btn-danger:active, .mui-btn-danger.mui-active, .mui-btn-red:active, .mui-btn-red.mui-active {
.mui-btn-negative:enabled:active, .mui-btn-negative.mui-active:enabled, .mui-btn-danger:enabled:active, .mui-btn-danger.mui-active:enabled, .mui-btn-red:enabled:active, .mui-btn-red.mui-active:enabled {
color: #fff;
background-color: #cf2d28;
border: 1px solid #cf2d28;
......@@ -962,7 +965,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #8a6de9;
border: 1px solid #8a6de9;
}
.mui-btn-royal:active, .mui-btn-royal.mui-active, .mui-btn-purple:active, .mui-btn-purple.mui-active {
.mui-btn-royal:enabled:active, .mui-btn-royal.mui-active:enabled, .mui-btn-purple:enabled:active, .mui-btn-purple.mui-active:enabled {
color: #fff;
background-color: #6641e2;
border: 1px solid #6641e2;
......@@ -973,7 +976,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #c7c7cc;
border: 1px solid #c7c7cc;
}
.mui-btn-grey:active, .mui-btn-grey.mui-active {
.mui-btn-grey:enabled:active, .mui-btn-grey.mui-active:enabled {
color: #fff;
background-color: #acacb4;
border: 1px solid #acacb4;
......@@ -997,7 +1000,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
.mui-btn-outlined.mui-btn-royal, .mui-btn-outlined.mui-btn-purple {
color: #8a6de9;
}
.mui-btn-outlined.mui-btn-primary:active, .mui-btn-outlined.mui-btn-blue:active, .mui-btn-outlined.mui-btn-positive:active, .mui-btn-outlined.mui-btn-success:active, .mui-btn-outlined.mui-btn-green:active, .mui-btn-outlined.mui-btn-warning:active, .mui-btn-outlined.mui-btn-yellow:active, .mui-btn-outlined.mui-btn-negative:active, .mui-btn-outlined.mui-btn-danger:active, .mui-btn-outlined.mui-btn-red:active, .mui-btn-outlined.mui-btn-royal:active, .mui-btn-outlined.mui-btn-purple:active {
.mui-btn-outlined.mui-btn-primary:enabled:active, .mui-btn-outlined.mui-btn-blue:enabled:active, .mui-btn-outlined.mui-btn-positive:enabled:active, .mui-btn-outlined.mui-btn-success:enabled:active, .mui-btn-outlined.mui-btn-green:enabled:active, .mui-btn-outlined.mui-btn-warning:enabled:active, .mui-btn-outlined.mui-btn-yellow:enabled:active, .mui-btn-outlined.mui-btn-negative:enabled:active, .mui-btn-outlined.mui-btn-danger:enabled:active, .mui-btn-outlined.mui-btn-red:enabled:active, .mui-btn-outlined.mui-btn-royal:enabled:active, .mui-btn-outlined.mui-btn-purple:enabled:active {
color: #fff;
}
......@@ -1008,7 +1011,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: transparent;
border: 0;
}
.mui-btn-link:active, .mui-btn-link.mui-active {
.mui-btn-link:enabled:active, .mui-btn-link.mui-active:enabled {
color: #0062cc;
background-color: transparent;
}
......@@ -1028,13 +1031,13 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-btn .mui-badge-inverted,
.mui-btn:active .mui-badge-inverted {
.mui-btn:enabled:active .mui-badge-inverted {
background-color: transparent;
}
.mui-btn-primary:active .mui-badge-inverted,
.mui-btn-positive:active .mui-badge-inverted,
.mui-btn-negative:active .mui-badge-inverted {
.mui-btn-primary:enabled:active .mui-badge-inverted,
.mui-btn-positive:enabled:active .mui-badge-inverted,
.mui-btn-negative:enabled:active .mui-badge-inverted {
color: #fff;
}
......@@ -1512,8 +1515,6 @@ input[type="submit"]:active, input[type="submit"].mui-active,
overflow: hidden;
background-color: inherit;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after {
......
dist/css/mui.min.css
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ df377fd1
/*!
* =====================================================
* Mui v1.4.0 (https://github.com/dcloudio/mui)
* Mui v1.5.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -656,6 +656,9 @@ var mui = (function(document, undefined) {
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
if (target.disabled || target.readOnly) {
return;
}
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
......@@ -1370,7 +1373,7 @@ var mui = (function(document, undefined) {
*/
$.fire = function(webview, eventType, data) {
if (webview) {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}) + "')");
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c") + "')");
}
};
/**
......@@ -4701,7 +4704,7 @@ var mui = (function(document, undefined) {
$.trigger(this, 'shown', this);
}
var onPopoverHidden = function(e) {
this.setAttribute('style', '');
setStyle(this,'none');
this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
this.removeEventListener('touchmove', $.preventDefault);
fixedPopoverScroll(false);
......@@ -4788,7 +4791,7 @@ var mui = (function(document, undefined) {
// }
}
}
popover.setAttribute('style', 'display:block'); //actionsheet transform
setStyle(popover, 'block'); //actionsheet transform
popover.offsetHeight;
popover.classList.add(CLASS_ACTIVE);
backdrop.setAttribute('style', '');
......@@ -4798,6 +4801,15 @@ var mui = (function(document, undefined) {
backdrop.classList.add(CLASS_ACTIVE);
popover.addEventListener('webkitTransitionEnd', onPopoverShown);
};
var setStyle = function(popover, display, top, left) {
var style = popover.style;
if (typeof display !== 'undefined')
style.display = display;
if (typeof top !== 'undefined')
style.top = top + 'px';
if (typeof left !== 'undefined')
style.left = left + 'px';
};
var calPosition = function(popover, anchor, isActionSheet) {
if (!popover || !anchor) {
return;
......@@ -4808,7 +4820,7 @@ var mui = (function(document, undefined) {
var pWidth = popover.offsetWidth;
var pHeight = popover.offsetHeight;
if (isActionSheet) { //actionsheet
popover.setAttribute('style', 'display:block;top:' + (wHeight - pHeight + window.pageYOffset) + 'px;left:' + (wWidth - pWidth) / 2 + 'px;');
setStyle(popover, 'block', (wHeight - pHeight + window.pageYOffset), (wWidth - pWidth) / 2)
return;
}
var aWidth = anchor.offsetWidth;
......@@ -4862,7 +4874,7 @@ var mui = (function(document, undefined) {
} else if (position === 'middle') {
arrow.setAttribute('style', 'display:none');
}
popover.setAttribute('style', 'display:block;top:' + pTop + 'px;left:' + pLeft + 'px;');
setStyle(popover, 'block', pTop, pLeft);
};
$.createMask = function(callback) {
......
dist/js/mui.min.js
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.min.css
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.numbox.css 0 → 100644
View file @ df377fd1
.mui-numbox {
border: solid 1px #bbb;
overflow: hidden !important;
display: inline-block;
height: 35px;
border-radius: 3px;
background-color: #efeff4 !important;
vertical-align: top;
box-sizing: border-box;
position: relative;
padding: 0px 40px 0px 40px;
width: 120px;
vertical-align: middle;
}
.mui-numbox [class*=mui-numbox-btn] {
width: 40px;
height: 100%;
margin: 0px;
position: absolute;
top: 0px;
border: none;
border-radius: 0px !important;
font-size: 18px;
color: #555;
line-height: 100%;
font-weight: normal;
overflow: hidden;
padding: 0px;
background-color: #f9f9f9;
}
.mui-numbox [class*=mui-numbox-btn]:active {
background-color: #ccc;
}
.mui-numbox [class*=mui-numbox-btn][disabled] {
color: #c0c0c0;
}
.mui-numbox .mui-numbox-btn-plus {
right: 0px;
}
.mui-numbox .mui-numbox-btn-minus {
left: 0px;
}
.mui-numbox .mui-numbox-input {
width: 100% !important;
height: 100% !important;
text-align: center;
border: none;
border-left: solid 1px #ccc !important;
border-right: solid 1px #ccc !important;
appearance: none;
margin: 0px;
padding: 0px 3px !important;
display: inline-block;
border-radius: 0px !important;
}
.mui-input-row .mui-numbox {
margin: 2px 8px;
float: right;
}
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ df377fd1
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为1.4.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.5.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/locker-dom.html 0 → 100644
View file @ df377fd1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手势锁屏示例</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" />
<style>
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #efeff4;
}
#holder {
width: 300px;
height: 300px;
border: solid 1px #bbb;
border-radius: 5px;
margin: 50px auto;
background-color: #fff;
}
#alert {
width: 300px;
height: 45px;
line-height: 45px;
text-align: center;
color: red;
margin: auto auto;
border: dashed 1px #bbb;
border-radius: 5px;
background-color: #fff;
}
</style>
</head>
<body>
<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.locker.js"></script>
<script>
(function($,doc){
$.init();
var holder = doc.querySelector('#holder'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = [];
rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
alert.innerText = '手势设定完成';
} else {
alert.innerText = '两次手势设定不一致';
}
rs.sender.clear();
record = [];
} else {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/numbox.html 0 → 100644
View file @ df377fd1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字输入框</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" />
<link rel="stylesheet" href="../css/mui.numbox.css" />
<style>
html,
body,
.mui-content {
height: 0px;
margin: 0px;
background-color: #efeff4;
}
h5.mui-content-padded {
margin-left: 0px !important;
margin-top: 20px !important;
}
.mui-card {
margin: 0px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">默认</h5>
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
<h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" value="5" />
<button class="mui-numbox-btn-plus" type="button">+</button>
</div>
<h5 class="mui-content-padded">设定步长值(步长 10)</h5>
<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
<button class="mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button>
</div>
<h5 class="mui-content-padded">在行内</h5> 购买数量:
<div class="mui-numbox">
<button class="mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button>
</div>
<h5 class="mui-content-padded">在表单中</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row">
<label>数字框一</label>
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</div>
<div class="mui-input-row">
<label>数字框二</label>
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</div>
</form>
</div>
<h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>
<div class="mui-numbox" style="width: 220px;height: 60px;">
<button class="mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-numbox-btn-plus" type="button">+</button>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.numbox.js"></script>
<script>
mui.init();
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/setting.html 0 → 100644
View file @ df377fd1
This diff is collapsed.
examples/hello-mui/index.html
View file @ df377fd1
......@@ -143,7 +143,7 @@
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
subWebview = template.children()[0];
subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
......
examples/hello-mui/js/mui.locker.js 0 → 100644
View file @ df377fd1
/**
* 手势锁屏插件
* varstion 1.0.4
* by Houfeng
* Houfeng@DCloud.io
*/
(function($, doc) {
var touchSupport = ('ontouchstart' in document);
var startEventName = touchSupport ? 'touchstart' : 'mousedown';
var moveEventName = touchSupport ? 'touchmove' : 'mousemove';
var endEventName = touchSupport ? 'touchend' : 'mouseup';
var lockerHolderClassName = $.className('locker-holder');
var lockerClassName = $.className('locker');
var styleHolder = doc.querySelector('head') || doc.querySelector('body');
styleHolder.innerHTML += "<style>.mui-locker-holder{overflow:hidden;position:relative;padding:0px;}.mui-locker-holder canvas{width:100%;height:100%;}</style>";
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
CW: 400,
CH: 320,
OffsetX: 30,
OffsetY: 30,
/**
* 构造函数
* */
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 Locker 时缺少容器元素";
}
self.holder = holder;
self.options = options || {};
self.options.callback = self.options.callback || self.options.done || $.noop;
self.holder.innerHTML = '<canvas></canvas>';
//
self.holder.classList.add(lockerHolderClassName);
//初始化
var canvas = self.canvas = $.qsa('canvas', self.holder)[0];
canvas.on = canvas.addEventListener || function(name, handler, capture) {
canvas.attachEvent('on' + name, handler, capture);
};
canvas.off = canvas.removeEventListener || function(name, handler, capture) {
canvas.detachEvent('on' + name, handler, capture);
};
if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px';
canvas.width = self.CW = (options.width || canvas.offsetWidth);
canvas.height = self.CH = (options.height || canvas.offsetHeight);
var cxt = self.cxt = canvas.getContext("2d");
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径
var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2;
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
self.pointLocationArr = self.caculateNinePointLotion(X, Y);
self.initEvent(canvas, cxt, self.holder);
self.draw(cxt, self.pointLocationArr, [], null);
},
/**
* 计算
*/
caculateNinePointLotion: function(diffX, diffY) {
var self = this;
var Re = [];
for (var row = 0; row < 3; row++) {
for (var col = 0; col < 3; col++) {
var Point = {
X: (self.OffsetX + col * diffX + (col * 2 + 1) * self.R),
Y: (self.OffsetY + row * diffY + (row * 2 + 1) * self.R)
};
Re.push(Point);
}
}
return Re;
},
/**
* 绘制
*/
draw: function(cxt, _PointLocationArr, _LinePointArr, touchPoint) {
var self = this;
var R = self.R;
if (_LinePointArr.length > 0) {
cxt.beginPath();
for (var i = 0; i < _LinePointArr.length; i++) {
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 10;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke();
cxt.closePath();
if (touchPoint != null) {
var lastPointIndex = _LinePointArr[_LinePointArr.length - 1];
var lastPoint = _PointLocationArr[lastPointIndex];
cxt.beginPath();
cxt.moveTo(lastPoint.X, lastPoint.Y);
cxt.lineTo(touchPoint.X, touchPoint.Y);
cxt.stroke();
cxt.closePath();
}
}
for (var i = 0; i < _PointLocationArr.length; i++) {
var Point = _PointLocationArr[i];
cxt.fillStyle = self.options.ringColor || "#888"; //圆圈边框颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
if (_LinePointArr.indexOf(i) >= 0) {
cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 16, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
},
isPointSelect: function(touches, linePoint) {
var self = this;
for (var i = 0; i < self.pointLocationArr.length; i++) {
var currentPoint = self.pointLocationArr[i];
var xdiff = Math.abs(currentPoint.X - touches.elementX);
var ydiff = Math.abs(currentPoint.Y - touches.elementY);
var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
if (dir < self.R) {
if (linePoint.indexOf(i) < 0) {
linePoint.push(i);
}
break;
}
}
},
initEvent: function(canvas, cxt, holder) {
var self = this;
var linePoint = [];
var isDown = false; //针对鼠标事件
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
self.isPointSelect(e.point, linePoint);
isDown = true;
};
canvas.on(startEventName, self._startHandler, false);
//move
self._moveHanlder = function(e) {
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, {
X: touches.elementX,
Y: touches.elementY
});
};
canvas.on(moveEventName, self._moveHanlder, false);
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft);
e.point.elementY = (e.point.pageY - holder.offsetTop);
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
var eventData = {
sender: self,
points: linePoint
};
/*
* 回调完成事件
*
* 备注:
* 比较理想的做法是为 Locker 的实例启用事件机制，比如 locker.on('done',handler);
* 在 mui 没有完整的公共事件模块前，此版本中 locker 实例暂通过 options.callback 处理
*/
self.options.callback(eventData);
//触发声明的DOM的自定义事件(暂定 done 为事件名，可以考虑更有针对的事件名 )
$.trigger(self.holder, 'done', eventData);
//-
linePoint = [];
isDown = false;
};
canvas.on(endEventName, self._endHandler, false);
},
pointLocationArr: [],
/**
* 清除图形
* */
clear: function() {
var self = this;
//self.pointLocationArr = [];
if (self.cxt) {
self.cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(self.cxt, self.pointLocationArr, [], {
X: 0,
Y: 0
});
}
},
/**
* 释放资源
* */
dispose: function() {
var self = this;
self.cxt = null;
self.canvas.off(startEventName, self._startHandler);
self.canvas.off(moveEventName, self._moveHandler);
self.canvas.off(endEventName, self._endHandler);
self.holder.innerHTML = '';
self.canvas = null;
}
});
//添加 locker 插件
$.fn.locker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (options) {
new Locker(element, options);
} else {
var optionsText = element.getAttribute('data-locker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor;
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor;
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor;
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor;
options.width = element.getAttribute('data-locker-width') || options.width;
options.height = element.getAttribute('data-locker-height') || options.height;
new Locker(element, options);
}
});
return this;
};
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
setTimeout(function() {
$('.' + lockerClassName).locker();
}, 200);
});
}(mui, document));
\ No newline at end of file
examples/hello-mui/js/mui.min.js
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.numbox.js 0 → 100644
View file @ df377fd1
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'touchstart' : 'click';
var changeEventName = 'change';
var holderClassName = $.className('numbox');
var plusClassName = $.className('numbox-btn-plus');
var minusClassName = $.className('numbox-btn-minus');
var inputClassName = $.className('numbox-input');
var Numbox = $.Numbox = $.Class.extend({
init: function(holder, options) {
var self = this;
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
self.holder = holder;
self.input = $.qsa('.' + inputClassName, self.holder)[0];
self.plus = $.qsa('.' + plusClassName, self.holder)[0];
self.minus = $.qsa('.' + minusClassName, self.holder)[0];
self.checkValue();
self.initEvent();
},
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) + self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.minus.addEventListener(tapEventName, function(event) {
var val = parseInt(self.input.value) - self.options.step;
self.input.value = val.toString();
$.trigger(self.input, changeEventName, null);
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
});
},
checkValue: function() {
var self = this;
var val = self.input.value;
if (val == null || val == '' || isNaN(val)) {
self.input.value = self.options.min || 0;
self.minus.disabled = self.options.min != null;
} else {
var val = parseInt(val);
if (self.options.max != null && !isNaN(self.options.max) && val >= parseInt(self.options.max)) {
val = self.options.max;
self.plus.disabled = true;
} else {
self.plus.disabled = false;
}
if (self.options.min != null && !isNaN(self.options.min) && val <= parseInt(self.options.min)) {
val = self.options.min;
self.minus.disabled = true;
} else {
self.minus.disabled = false;
}
self.input.value = val;
}
}
});
$.fn.numbox = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (options) {
new Numbox(element, options);
} else {
var optionsText = element.getAttribute('data-numbox-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.step = element.getAttribute('data-numbox-step') || options.step;
options.min = element.getAttribute('data-numbox-min') || options.min;
options.max = element.getAttribute('data-numbox-max') || options.max;
new Numbox(element, options);
}
});
return this;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
examples/hello-mui/list.html
View file @ df377fd1
This diff is collapsed.
examples/login/css/mui.css
View file @ df377fd1
/*!
* =====================================================
* Mui v1.2.0 (https://github.com/dcloudio/mui)
* Mui v1.5.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -629,6 +629,9 @@ p {
width: auto;
overflow: auto;
}
.mui-plus-pullrefresh .mui-slider-group {
overflow: visible;
}
.mui-plus-pullrefresh .mui-scroll {
position: static;
width: auto;
......@@ -752,39 +755,51 @@ p {
0% {
-webkit-transform: rotate(0deg);
}
8.33333333% {
-webkit-transform: rotate(30deg);
}
16.66666667% {
-webkit-transform: rotate(60deg);
}
25% {
-webkit-transform: rotate(90deg);
}
33.33333333% {
-webkit-transform: rotate(120deg);
}
41.66666667% {
-webkit-transform: rotate(150deg);
}
50% {
-webkit-transform: rotate(180deg);
}
58.33333333% {
-webkit-transform: rotate(210deg);
}
66.66666667% {
-webkit-transform: rotate(240deg);
}
75% {
-webkit-transform: rotate(270deg);
}
83.33333333% {
-webkit-transform: rotate(300deg);
}
91.66666667% {
-webkit-transform: rotate(330deg);
}
100% {
-webkit-transform: rotate(360deg);
}
......@@ -793,39 +808,51 @@ p {
0% {
transform: rotate(0deg);
}
8.33333333% {
transform: rotate(30deg);
}
16.66666667% {
transform: rotate(60deg);
}
25% {
transform: rotate(90deg);
}
33.33333333% {
transform: rotate(120deg);
}
41.66666667% {
transform: rotate(150deg);
}
50% {
transform: rotate(180deg);
}
58.33333333% {
transform: rotate(210deg);
}
66.66666667% {
transform: rotate(240deg);
}
75% {
transform: rotate(270deg);
}
83.33333333% {
transform: rotate(300deg);
}
91.66666667% {
transform: rotate(330deg);
}
100% {
transform: rotate(360deg);
}
......@@ -862,15 +889,15 @@ button,
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
input[type="button"]:active, input[type="button"].mui-active,
input[type="submit"]:active,
input[type="submit"].mui-active,
input[type="reset"]:active,
input[type="reset"].mui-active,
button:active,
button.mui-active,
.mui-btn:active,
.mui-btn.mui-active {
input[type="button"]:enabled:active, input[type="button"].mui-active:enabled,
input[type="submit"]:enabled:active,
input[type="submit"].mui-active:enabled,
input[type="reset"]:enabled:active,
input[type="reset"].mui-active:enabled,
button:enabled:active,
button.mui-active:enabled,
.mui-btn:enabled:active,
.mui-btn.mui-active:enabled {
color: #fff;
background-color: #929292;
}
......@@ -892,9 +919,9 @@ input[type="submit"],
background-color: #007aff;
border: 1px solid #007aff;
}
input[type="submit"]:active, input[type="submit"].mui-active,
.mui-btn-primary:active,
.mui-btn-primary.mui-active, .mui-btn-blue:active, .mui-btn-blue.mui-active {
input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled,
.mui-btn-primary:enabled:active,
.mui-btn-primary.mui-active:enabled, .mui-btn-blue:enabled:active, .mui-btn-blue.mui-active:enabled {
color: #fff;
background-color: #0062cc;
border: 1px solid #0062cc;
......@@ -905,7 +932,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #4cd964;
border: 1px solid #4cd964;
}
.mui-btn-positive:active, .mui-btn-positive.mui-active, .mui-btn-success:active, .mui-btn-success.mui-active, .mui-btn-green:active, .mui-btn-green.mui-active {
.mui-btn-positive:enabled:active, .mui-btn-positive.mui-active:enabled, .mui-btn-success:enabled:active, .mui-btn-success.mui-active:enabled, .mui-btn-green:enabled:active, .mui-btn-green.mui-active:enabled {
color: #fff;
background-color: #2ac845;
border: 1px solid #2ac845;
......@@ -916,7 +943,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #f0ad4e;
border: 1px solid #f0ad4e;
}
.mui-btn-warning:active, .mui-btn-warning.mui-active, .mui-btn-yellow:active, .mui-btn-yellow.mui-active {
.mui-btn-warning:enabled:active, .mui-btn-warning.mui-active:enabled, .mui-btn-yellow:enabled:active, .mui-btn-yellow.mui-active:enabled {
color: #fff;
background-color: #ec971f;
border: 1px solid #ec971f;
......@@ -927,7 +954,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #dd524d;
border: 1px solid #dd524d;
}
.mui-btn-negative:active, .mui-btn-negative.mui-active, .mui-btn-danger:active, .mui-btn-danger.mui-active, .mui-btn-red:active, .mui-btn-red.mui-active {
.mui-btn-negative:enabled:active, .mui-btn-negative.mui-active:enabled, .mui-btn-danger:enabled:active, .mui-btn-danger.mui-active:enabled, .mui-btn-red:enabled:active, .mui-btn-red.mui-active:enabled {
color: #fff;
background-color: #cf2d28;
border: 1px solid #cf2d28;
......@@ -938,7 +965,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #8a6de9;
border: 1px solid #8a6de9;
}
.mui-btn-royal:active, .mui-btn-royal.mui-active, .mui-btn-purple:active, .mui-btn-purple.mui-active {
.mui-btn-royal:enabled:active, .mui-btn-royal.mui-active:enabled, .mui-btn-purple:enabled:active, .mui-btn-purple.mui-active:enabled {
color: #fff;
background-color: #6641e2;
border: 1px solid #6641e2;
......@@ -949,7 +976,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: #c7c7cc;
border: 1px solid #c7c7cc;
}
.mui-btn-grey:active, .mui-btn-grey.mui-active {
.mui-btn-grey:enabled:active, .mui-btn-grey.mui-active:enabled {
color: #fff;
background-color: #acacb4;
border: 1px solid #acacb4;
......@@ -973,7 +1000,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
.mui-btn-outlined.mui-btn-royal, .mui-btn-outlined.mui-btn-purple {
color: #8a6de9;
}
.mui-btn-outlined.mui-btn-primary:active, .mui-btn-outlined.mui-btn-blue:active, .mui-btn-outlined.mui-btn-positive:active, .mui-btn-outlined.mui-btn-success:active, .mui-btn-outlined.mui-btn-green:active, .mui-btn-outlined.mui-btn-warning:active, .mui-btn-outlined.mui-btn-yellow:active, .mui-btn-outlined.mui-btn-negative:active, .mui-btn-outlined.mui-btn-danger:active, .mui-btn-outlined.mui-btn-red:active, .mui-btn-outlined.mui-btn-royal:active, .mui-btn-outlined.mui-btn-purple:active {
.mui-btn-outlined.mui-btn-primary:enabled:active, .mui-btn-outlined.mui-btn-blue:enabled:active, .mui-btn-outlined.mui-btn-positive:enabled:active, .mui-btn-outlined.mui-btn-success:enabled:active, .mui-btn-outlined.mui-btn-green:enabled:active, .mui-btn-outlined.mui-btn-warning:enabled:active, .mui-btn-outlined.mui-btn-yellow:enabled:active, .mui-btn-outlined.mui-btn-negative:enabled:active, .mui-btn-outlined.mui-btn-danger:enabled:active, .mui-btn-outlined.mui-btn-red:enabled:active, .mui-btn-outlined.mui-btn-royal:enabled:active, .mui-btn-outlined.mui-btn-purple:enabled:active {
color: #fff;
}
......@@ -984,7 +1011,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
background-color: transparent;
border: 0;
}
.mui-btn-link:active, .mui-btn-link.mui-active {
.mui-btn-link:enabled:active, .mui-btn-link.mui-active:enabled {
color: #0062cc;
background-color: transparent;
}
......@@ -1004,13 +1031,13 @@ input[type="submit"]:active, input[type="submit"].mui-active,
}
.mui-btn .mui-badge-inverted,
.mui-btn:active .mui-badge-inverted {
.mui-btn:enabled:active .mui-badge-inverted {
background-color: transparent;
}
.mui-btn-primary:active .mui-badge-inverted,
.mui-btn-positive:active .mui-badge-inverted,
.mui-btn-negative:active .mui-badge-inverted {
.mui-btn-primary:enabled:active .mui-badge-inverted,
.mui-btn-positive:enabled:active .mui-badge-inverted,
.mui-btn-negative:enabled:active .mui-badge-inverted {
color: #fff;
}
......@@ -1360,7 +1387,7 @@ input[type="submit"]:active, input[type="submit"].mui-active,
.mui-card {
margin: 0 15px;
overflow: hidden;
background-color: #fff;
background-color: white;
background-clip: padding-box;
border: 1px solid #ddd;
border-radius: 6px;
......@@ -1488,8 +1515,6 @@ input[type="submit"]:active, input[type="submit"].mui-active,
overflow: hidden;
background-color: inherit;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after {
......@@ -3563,5 +3588,3 @@ select:focus {
.mui-android.mui-android-4-0 textarea:focus {
-webkit-user-modify: inherit;
}
/*# sourceMappingURL=mui.css.map */
examples/login/css/mui.min.css
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/login/js/mui.js
View file @ df377fd1
/*!
* =====================================================
* Mui v1.2.0 (https://github.com/dcloudio/mui)
* Mui v1.5.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -656,6 +656,9 @@ var mui = (function(document, undefined) {
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
if (target.disabled || target.readOnly) {
return;
}
document.body.classList.add(CLASS_FOCUSIN);
var isFooter = false;
for (; target && target !== document; target = target.parentNode) {
......@@ -1370,7 +1373,7 @@ var mui = (function(document, undefined) {
*/
$.fire = function(webview, eventType, data) {
if (webview) {
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}) + "')");
webview.evalJS("typeof mui!=='undefined'&&mui.receive('" + eventType + "','" + JSON.stringify(data || {}).replace(/\'/g, "\\u0027").replace(/\\/g, "\\u005c") + "')");
}
};
/**
......@@ -4701,7 +4704,7 @@ var mui = (function(document, undefined) {
$.trigger(this, 'shown', this);
}
var onPopoverHidden = function(e) {
this.setAttribute('style', '');
setStyle(this,'none');
this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
this.removeEventListener('touchmove', $.preventDefault);
fixedPopoverScroll(false);
......@@ -4788,7 +4791,7 @@ var mui = (function(document, undefined) {
// }
}
}
popover.setAttribute('style', 'display:block'); //actionsheet transform
setStyle(popover, 'block'); //actionsheet transform
popover.offsetHeight;
popover.classList.add(CLASS_ACTIVE);
backdrop.setAttribute('style', '');
......@@ -4798,6 +4801,15 @@ var mui = (function(document, undefined) {
backdrop.classList.add(CLASS_ACTIVE);
popover.addEventListener('webkitTransitionEnd', onPopoverShown);
};
var setStyle = function(popover, display, top, left) {
var style = popover.style;
if (typeof display !== 'undefined')
style.display = display;
if (typeof top !== 'undefined')
style.top = top + 'px';
if (typeof left !== 'undefined')
style.left = left + 'px';
};
var calPosition = function(popover, anchor, isActionSheet) {
if (!popover || !anchor) {
return;
......@@ -4808,7 +4820,7 @@ var mui = (function(document, undefined) {
var pWidth = popover.offsetWidth;
var pHeight = popover.offsetHeight;
if (isActionSheet) { //actionsheet
popover.setAttribute('style', 'display:block;top:' + (wHeight - pHeight + window.pageYOffset) + 'px;left:' + (wWidth - pWidth) / 2 + 'px;');
setStyle(popover, 'block', (wHeight - pHeight + window.pageYOffset), (wWidth - pWidth) / 2)
return;
}
var aWidth = anchor.offsetWidth;
......@@ -4862,7 +4874,7 @@ var mui = (function(document, undefined) {
} else if (position === 'middle') {
arrow.setAttribute('style', 'display:none');
}
popover.setAttribute('style', 'display:block;top:' + pTop + 'px;left:' + pLeft + 'px;');
setStyle(popover, 'block', pTop, pLeft);
};
$.createMask = function(callback) {
......
examples/login/js/mui.min.js
View file @ df377fd1
This source diff could not be displayed because it is too large. You can view the blob instead.
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