Skip to content

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

新增城市联动模板

parent 2b1387f2
Show whitespace changes
Inline Side-by-side
Showing with 787 additions and 41 deletions
dist/css/mui.css
View file @ c84e518c
......@@ -2229,6 +2229,7 @@ select:focus {
display: inline-block;
float: none;
width: 100%;
padding-right: 58px;
}
.mui-radio.mui-left input[type="radio"], .mui-checkbox.mui-left input[type="checkbox"] {
......@@ -2236,6 +2237,7 @@ select:focus {
}
.mui-radio.mui-left label, .mui-checkbox.mui-left label {
padding-right: 15px;
padding-left: 58px;
}
......
dist/css/mui.min.css
View file @ c84e518c
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 @ c84e518c
......@@ -2229,6 +2229,7 @@ select:focus {
display: inline-block;
float: none;
width: 100%;
padding-right: 58px;
}
.mui-radio.mui-left input[type="radio"], .mui-checkbox.mui-left input[type="checkbox"] {
......@@ -2236,6 +2237,7 @@ select:focus {
}
.mui-radio.mui-left label, .mui-checkbox.mui-left label {
padding-right: 15px;
padding-left: 58px;
}
......
examples/hello-mui/css/mui.listpicker.css 0 → 100644
View file @ c84e518c
/**
* 选择列表插件
* varstion 1.0.0
* by Houfeng
* Houfeng@DCloud.io
*/
.mui-listpicker {
position: relative;
border: solid 1px #ccc;
padding: 0px;
margin: 3px;
height: 200px;
background-color: #fff;
overflow: hidden;
border-radius: 3px;
}
.mui-listpicker .mui-listpicker-inner {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border-radius: 3px;
}
.mui-listpicker .mui-listpicker-inner-ios {
width: calc(100% + 8px);
padding-right: 8px;
}
.mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
width: 0px;
height: 0px;
visibility: hidden;
}
.mui-listpicker ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
}
.mui-listpicker ul li {
position: relative;
padding: 8px;
text-align: center;
color: #555;
}
.mui-listpicker ul li:last-child {
border-bottom: none;
}
.mui-listpicker ul li::first-child {
border-top: none;
}
.mui-listpicker .mui-listpicker-rule {
position: absolute;
border: solid 1px #ccc;
border-left: none;
border-right: none;
background-color: #dfd;
opacity: 0.5;
width: 100%;
left: 0px;
top: 50%;
z-index: 0;
}
.mui-listpicker .mui-listpicker-highlight {
color: green;
}
\ No newline at end of file
examples/hello-mui/css/mui.min.css
View file @ c84e518c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/listpicker.html 0 → 100644
View file @ c84e518c
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<style>
html,
body,
.mui-content {
height: 0px;
margin: 0px;
background-color: #efeff4;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
}
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.ui-alert {
text-align: center;
padding: 20px 10px;
font-size: 16px;
}
/*.ui-mask {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999998;
background-color: rgba(0, 0, 0, 0.15);
display: none;
-webkit-transition: .3s;
}*/
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
/*用户列表示例*/
.user-panel {
/*position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);*/
}
.mui-picker-panel{
position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);
}
.mui-picker-panel .mui-panel-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-picker-panel .mui-panel-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}
.user-panel .mui-listpicker {
width: 100%;
height: 100%;
margin: 0px;
border: none;
}
.mui-panel-header button {
font-size: 12px;
padding: 5px 10px;
}
.mui-panel-header button:last-child {
float: right;
}
/**级联示例样式**/
.city-panel {
/*position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);*/
}
/*.city-panel .city-panel-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-panel-header button {
font-size: 12px;
padding: 5px 10px;
}
.city-panel-header button:last-child {
float: right;
}
.city-panel .city-panel-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}*/
.city-panel .mui-listpicker {
width: 50%;
height: 100%;
margin: 0px;
float: left;
border: none;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">普通示例</h5>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>显示选择人员 ...</button>
<button id='showUserPickerAndSelect' class="mui-btn mui-btn-block" type='button'>显示并选中指定的项（庄颜） ...</button>
<div id='userPickerResult' class="ui-alert"></div>
<div class="user-panel mui-picker-panel">
<div class="mui-panel-header">
<button id='userPickerCancelBtn' class="mui-btn">取消</button>
<button id='userPickerOKBtn' class="mui-btn mui-btn-blue">确定</button>
</div>
<div class="mui-panel-body">
<div id='userPicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
<li data-value="ywj">董事长 叶文洁</li>
<li data-value="aaa">总经理 艾AA</li>
<li data-value="lj">罗辑</li>
<li data-value="ymt">云天明</li>
<li data-value="shq">史强</li>
<li data-value="zhbh">章北海</li>
<li data-value="zhy">庄颜</li>
<li data-value="gyf">关一帆</li>
<li data-value="zhz">智子</li>
<li data-value="gezh">歌者</li>
</ul>
</div>
</div>
</div>
</div>
<h5 class="mui-content-padded">级联示例</h5>
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>显示选择城市 ...</button>
<div id='cityPickerResult' class="ui-alert"></div>
<div class="city-panel mui-picker-panel">
<div class="mui-panel-header">
<button id='cityPickerCancel' class="mui-btn">取消</button>
<button id='cityPickerOK' class="mui-btn mui-btn-blue">确定</button>
</div>
<div class="mui-panel-body">
<div id='provincePicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
</ul>
</div>
</div>
<div id='cityPicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
</ul>
</div>
</div>
</div>
</div>
<!--<div class="ui-mask"></div>-->
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script type="text/javascript" charset="utf-8">
(function($, doc) {
$.init();
$.ready(function() {
// var mask = doc.querySelector('.ui-mask');
var mask = mui.createMask(_hidePickerPanel);
var currentPanel = null;
//普通示例****************************************************
var showUserPickerBtn = doc.querySelector('#showUserPicker');
var showUserPickerAndSelect = doc.querySelector('#showUserPickerAndSelect');
var userPickerPanel = doc.querySelector('.user-panel');
var userPickerOKBtn = doc.querySelector('#userPickerOKBtn');
var userPickerCancelBtn = doc.querySelector('#userPickerCancelBtn');
var userPickerResult = doc.querySelector('#userPickerResult');
var userPicker = doc.querySelector('#userPicker');
userPicker.setSelectedValue('shq');
var showUserPanel = function() {
// mask.style.display = 'block';
mask.show();
currentPanel = userPickerPanel;
userPickerPanel.style.webkitTransform = 'translateY(0px)';
};
// function hideUserPanel() {
// userPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// }
//关闭弹出的选择面板
function _hidePickerPanel () {
if(currentPanel){
currentPanel.style.webkitTransform = 'translateY(280px)';
currentPanel = null;
}
}
//关闭弹出的选择面板
function hidePickerPanel () {
_hidePickerPanel();
mask.close();
}
// mask.addEventListener('tap', hideUserPanel, false);
showUserPickerBtn.addEventListener('tap', showUserPanel, false);
showUserPickerAndSelect.addEventListener('tap', function() {
userPicker.setSelectedValue('zhy');
showUserPanel();
}, false);
//确定按钮的点击事件
userPickerOKBtn.addEventListener('tap', function() {
var buffer = [];
buffer.push('索引: ' + userPicker.getSelectedIndex());
buffer.push('值: ' + userPicker.getSelectedValue());
buffer.push('文本: ' + userPicker.getSelectedText());
buffer.push('项: ' + JSON.stringify(userPicker.getSelectedItem()));
userPickerResult.innerHTML = buffer.join(' , ');
hidePickerPanel();
}, false);
//取消按钮的点击事件
userPickerCancelBtn.addEventListener('tap', hidePickerPanel, false);
/*
userPicker.addEventListener('change', function(event) {
var item = event.detail.item;
console.log(item.value);
}, false);
*/
//级联示例********************************************
var showCityPickerBtn = doc.querySelector('#showCityPicker');
var cityPickerPanel = doc.querySelector('.city-panel');
var cityCancelBtn = doc.querySelector('#cityPickerCancel');
var cityOKBtn = doc.querySelector('#cityPickerOK');
var provincePicker = doc.querySelector('#provincePicker');
var cityPicker = doc.querySelector('#cityPicker');
var cityPickerResult = doc.querySelector('#cityPickerResult');
var showCityPanel = function() {
// mask.style.display = 'block';
mask.show();
currentPanel = cityPickerPanel;
cityPickerPanel.style.webkitTransform = 'translateY(0px)';
};
// var hideCityPanel = function() {
// cityPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// };
//TODO chb
// mask.addEventListener('tap', function() {
// hideCityPanel();
// }, false);
showCityPickerBtn.addEventListener('tap', showCityPanel, false);
cityCancelBtn.addEventListener('tap', hidePickerPanel, false);
//城市级联选择的确定按钮
cityOKBtn.addEventListener('tap', function() {
cityPickerResult.innerText = '您选择了: ' + provincePicker.getSelectedText() + cityPicker.getSelectedText();
hidePickerPanel();
}, false);
//城市列表数据
var provinces = [{
value: 'sx',
text: '陕西',
citys: [{
value: 'xy',
text: '咸阳'
}, {
value: 'xa',
text: '西安'
}, {
value: 'ya',
text: '延安'
}, {
value: 'bj',
text: '宝鸡'
}, {
value: 'tc',
text: '铜川'
}, {
value: 'wn',
text: '渭南'
}, {
value: 'sl',
text: '商洛 '
}, {
value: 'hz',
text: '汉中 '
}]
}, {
value: 'hn',
text: '河南',
citys: [{
value: 'ly',
text: '洛阳'
}, {
value: 'df',
text: '开封'
}, {
value: 'ny',
text: '南阳'
}, {
value: 'ay',
text: '安阳'
}, {
value: 'jy',
text: '济源'
}, {
value: 'jz',
text: '焦作'
}, {
value: 'xx',
text: '新乡'
}, {
value: 'xy',
text: '信阳'
}, {
value: 'py',
text: '濮阳'
}, {
value: 'smx',
text: '三门峡'
}, {
value: 'sq',
text: '商丘'
}, {
value: 'zk',
text: '周口'
}, {
value: 'pds',
text: '平顶山'
}]
}, {
value: 'sd',
text: '山东',
citys: [{
value: 'qf',
text: '曲阜'
}, {
value: 'jn',
text: '济南'
}, {
value: 'qd',
text: '青岛'
}, {
value: 'wh',
text: '威海'
}, {
value: 'yc',
text: '烟台'
}, {
value: 'hz',
text: '荷泽'
}, {
value: 'ta',
text: '泰安'
}]
}];
//绑定
provincePicker.setItems(provinces);
provincePicker.addEventListener('change', function(event) {
var eventData = event.detail;
cityPicker.setItems(eventData.item.citys);
}, false);
setTimeout(function() {
provincePicker.setSelectedIndex(1);
}, 200);
});
})(mui, document);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/locker-dom.html
View file @ c84e518c
......@@ -54,6 +54,7 @@
rs.sender.clear();
return;
}
console.log(rs.points.join(''));
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
......
examples/hello-mui/js/mui.lazyload.img.js
View file @ c84e518c
......@@ -4,7 +4,7 @@
this._super(element, options);
},
_init: function() {
this.options.selector = 'img';
this.options.selector = 'img[data-lazyload]';
this._super();
},
addElement: function(img) {
......@@ -36,6 +36,7 @@
});
}
}
return true;
}
return false;
},
......@@ -44,6 +45,7 @@
if (dataSrc && img.src != dataSrc) {
img.src = dataSrc;
img.removeAttribute('data-lazyload');
img.parentNode.parentNode.setAttribute('data-lazyload', 'true');
}
}
});
......
examples/hello-mui/js/mui.lazyload.js
View file @ c84e518c
(function($, window, document) {
var mid = 0;
$.Lazyload = $.Class.extend({
init: function(element, options) {
var self = this;
......@@ -251,17 +252,25 @@
self.refresh();
}
},
addElements: function() {
addElements: function(elements) {
var self = this;
self._counter = self._counter || 0;
if (self.options.selector) {
var lazyloads = self.container.querySelectorAll(self.options.selector);
var lazyloads = [];
if (!elements && self.options.selector) {
lazyloads = self.container.querySelectorAll(self.options.selector);
} else {
$.each(elements, function(index, el) {
lazyloads = lazyloads.concat($.qsa(self.options.selector, el));
});
}
$.each(lazyloads, function(index, el) {
if (!el.getAttribute('data-lazyload-id')) {
if (self.addElement(el)) {
el.setAttribute('data-lazyload-id', mid++);
self.addCallback(el, self.handle);
}
});
}
});
},
addElement: function(el) {
return true;
......@@ -269,7 +278,10 @@
handle: function() {
//throw new Error('需子类实现');
},
refresh: function() {
refresh: function(check) {
if (check) { //检查新的lazyload
this.addElements();
}
this._loadFn();
},
pause: function() {
......@@ -281,6 +293,7 @@
window.removeEventListener('touchmove', load);
window.removeEventListener('resize', load);
if (this._containerIsNotDocument) {
this.container.removeEventListener('scrollend', load);
this.container.removeEventListener('scroll', load);
this.container.removeEventListener('touchmove', load);
}
......@@ -294,6 +307,7 @@
window.addEventListener('touchmove', load, false);
window.addEventListener('resize', load, false);
if (this._containerIsNotDocument) {
this.container.addEventListener('scrollend', load, false);
this.container.addEventListener('scroll', load, false);
this.container.addEventListener('touchmove', load, false);
}
......
examples/hello-mui/js/mui.listpicker.js 0 → 100644
View file @ c84e518c
/**
* 选择列表插件
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
//create dom
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement('div');
}
$.__create_dom_div__.innerHTML = str;
return [].slice.call($.__create_dom_div__.childNodes);
};
//plugin
$.fn.listpicker = function(options) {
return this.each(function(index, box) {
if (box.getAttribute('data-listpicker-inited')) {
return;
}
box.setAttribute('data-listpicker-inited', '1');
//
var boxInner = $('.mui-listpicker-inner', box)[0];
if ($.os.ios) {
boxInner.classList.add('mui-listpicker-inner-ios');
}
var boxHeight = box.offsetHeight;
var ul = $('ul', boxInner)[0];
var firstItem = $('li', ul)[0];
var itemHeight = 0;
if (firstItem) {
itemHeight = firstItem.offsetHeight;
} else {
ul.innerHTML = "<li>...</li>";
firstItem = $('li', ul)[0];
itemHeight = firstItem.offsetHeight;
ul.innerHTML = '';
}
ul.style.paddingTop = ul.style.paddingBottom = (boxHeight / 2 - itemHeight / 2) + 'px';
var rule = $.dom('<div class="mui-listpicker-rule"> </div>')[0];
rule.style.height = itemHeight + 'px';
rule.style.marginTop = -(itemHeight / 2) + 'px';
box.appendChild(rule);
//
var disabledScrollEnd = false;
var scrollEnd = function(event) {
if (disabledScrollEnd) return;
disabledScrollEnd = true;
/*
var remainder = boxInner.scrollTop % itemHeight;
if(remainder>itemHeight/2){
boxInner.scrollTop+=(itemHeight-remainder);
}el
boxInner.scrollTop-=remainder;
}*/
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
box.setSelectedIndex(fiexd);
setTimeout(function() {
disabledScrollEnd = false;
$.trigger(box, 'change', {
index: box.getSelectedIndex(),
value: box.getSelectedValue(),
text: box.getSelectedText(),
item: box.getSelectedItem(),
element: box.getSelectedElement()
});
handleHighlight(event);
}, 200);
};
var handleHighlight = function(event) {
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
var itemElements = $('li', ul);
for (var index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.classList) continue;
if (index == fiexd) {
itemElement.classList.add('mui-listpicker-highlight');
} else {
itemElement.classList.remove('mui-listpicker-highlight');
}
}
/*
var opacity = 1;
for (var index = fiexd; index >= 0; index--) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
opacity = 1;
var length = itemElements.length;
for (var index = fiexd; index < itemElements.length; index++) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
*/
};
var isTouchDown = false;
var delayExecScrollEnd = false;
boxInner.addEventListener('scroll', function(event) {
if (boxInner.scrollTimer) {
clearTimeout(boxInner.scrollTimer);
}
handleHighlight(event);
isTouchDown = true;
boxInner.scrollTimer = setTimeout(function() {
scrollEnd(event);
}, 80);
}, false);
$(boxInner).on('tap', 'li', function(event) {
var tapItem = this;
var items = [].slice.call($('li', ul));
for (var i in items) {
var item = items[i];
if (item == tapItem) {
box.setSelectedIndex(i);
return;
}
};
});
box.getSelectedIndex = function() {
return parseInt(boxInner.scrollTop / itemHeight);
};
var aniScrollTop = function(y1, y2, dur, callback) {
var stepNum = dur / 13;
var stepSize = (y2 - y1) / stepNum;
_aniScrollTop(y1, y2, 0, stepNum, stepSize, callback);
};
var _aniScrollTop = function(y1, y2, stepIndex, stepNum, stepSize, callback) {
var val = stepIndex * stepSize;
boxInner.scrollTop = y1 + val;
if (stepIndex < stepNum) {
stepIndex++;
setTimeout(function() {
_aniScrollTop(y1, y2, stepIndex, stepNum, stepSize);
}, 13);
} else {
boxInner.scrollTop = y2;
if (callback) callback();
}
};
box.setSelectedIndex = function(index) {
index = parseInt(index || 0);
//boxInner.scrollTop = itemHeight * index;
aniScrollTop(boxInner.scrollTop, itemHeight * index, 100);
};
box.getSelectedElement = function() {
var index = box.getSelectedIndex();
return $('li', ul)[index];
};
box.getSelectedItem = function() {
var itemElement = box.getSelectedElement();
if (!itemElement) return null;
var itemJson = itemElement.getAttribute('data-item');
return itemJson ? JSON.parse(itemJson) : {
text: itemElement.innerText,
value: itemElement.getAttribute('data-value')
};
};
box.setItems = function(items) {
var buffer = [];
for (index in items) {
var item = items[index] || {
text: 'null',
value: 'null' + index
};
var itemJson = JSON.stringify(item);
buffer.push("<li data-value='" + item.value + "' data-item='" + itemJson + "'>" + item.text + "</li>");
};
ul.innerHTML = buffer.join('');
scrollEnd();
};
box.getItems = function() {
var items = [];
var itemElements = $('li', ul);
for (index in itemElements) {
var itemElement = itemElements[index];
var itemJson = itemElement.getAttribute('data-item');
items.push(itemJson ? JSON.parse(itemJson) : {
text: itemElement.innerText,
value: itemElement.getAttribute('data-value')
});
}
return items;
};
box.getSelectedValue = function() {
var item = box.getSelectedItem();
if (!item) return null;
return item.value;
};
box.getSelectedText = function() {
var item = box.getSelectedItem();
if (!item) return null;
return item.text;
};
box.setSelectedValue = function(value) {
var itemElements = $('li', ul);
for (index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.getAttribute) {
continue;
}
if (itemElement.getAttribute('data-value') == value) {
box.setSelectedIndex(index);
return;
}
}
};
});
}
//auto apply
$.ready(function() {
$('.mui-listpicker').listpicker();
});
})(mui);
\ No newline at end of file
examples/hello-mui/js/mui.locker.js
View file @ c84e518c
......@@ -17,6 +17,8 @@
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>";
var times = 4;
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
......@@ -52,12 +54,12 @@
if (self.options.height) self.holder.style.height = self.options.height + 'px';
self.CW = self.holder.offsetWidth || self.CW;
self.CH = self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 2 倍
self.R *= 2;
self.CW *= 2;
self.CH *= 2;
self.OffsetX *= 2;
self.OffsetY *= 2;
//处理 “宽、高” 等数值, 全部扩大 times 倍
self.R *= times;
self.CW *= times;
self.CH *= times;
self.OffsetX *= times;
self.OffsetY *= times;
//
canvas.width = self.CW;
canvas.height = self.CH;
......@@ -100,7 +102,7 @@
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 10 * 2;
cxt.lineWidth = 2 * times;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke();
cxt.closePath();
......@@ -118,18 +120,18 @@
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.arc(Point.X, Point.Y, R, 0, Math.PI * times, true);
cxt.closePath();
cxt.fill();
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - 3 * 1, 0, Math.PI * 2, true);
cxt.arc(Point.X, Point.Y, R - (2 * times), 0, Math.PI * times, 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 * 2, 0, Math.PI * 2, true);
cxt.arc(Point.X, Point.Y, R - (16 * times), 0, Math.PI * times, true);
cxt.closePath();
cxt.fill();
}
......@@ -159,8 +161,8 @@
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
self.isPointSelect(e.point, linePoint);
isDown = true;
};
......@@ -170,8 +172,8 @@
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
......@@ -184,8 +186,8 @@
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * 2;
e.point.elementY = (e.point.pageY - holder.offsetTop) * 2;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
......
examples/hello-mui/list.html
View file @ c84e518c
......@@ -326,6 +326,11 @@
lazyload（懒加载）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/listpicker.html">
list picker（选择列表）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/locker-dom.html">
locker（手势图案锁屏）
......
examples/login/js/mui.locker.js
View file @ c84e518c
/**
* 手势锁屏插件
* varstion 1.0.4
* varstion 1.0.5
* by Houfeng
* Houfeng@DCloud.io
*/
......@@ -17,6 +17,8 @@
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>";
var times = 4;
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
......@@ -47,10 +49,20 @@
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);
self.CW = self.holder.offsetWidth || self.CW;
self.CH = self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 times 倍
self.R *= times;
self.CW *= times;
self.CH *= times;
self.OffsetX *= times;
self.OffsetY *= times;
//
canvas.width = self.CW;
canvas.height = self.CH;
var cxt = self.cxt = canvas.getContext("2d");
//两个圆之间的外距离 就是说两个圆心的距离去除两个半径
var X = (self.CW - 2 * self.OffsetX - self.R * 2 * 3) / 2;
......@@ -90,7 +102,7 @@
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 10;
cxt.lineWidth = 2 * times;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke();
cxt.closePath();
......@@ -108,18 +120,18 @@
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.arc(Point.X, Point.Y, R, 0, Math.PI * times, 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.arc(Point.X, Point.Y, R - (2 * times), 0, Math.PI * times, 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.arc(Point.X, Point.Y, R - (16 * times), 0, Math.PI * times, true);
cxt.closePath();
cxt.fill();
}
......@@ -149,8 +161,8 @@
//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);
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
self.isPointSelect(e.point, linePoint);
isDown = true;
};
......@@ -160,8 +172,8 @@
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);
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
......@@ -174,8 +186,8 @@
//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);
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
......@@ -256,7 +268,7 @@
$.ready(function() {
setTimeout(function() {
$('.' + lockerClassName).locker();
}, 200);
}, 350);
});
}(mui, document));
\ No newline at end of file
sass/forms.scss
View file @ c84e518c
......@@ -234,6 +234,7 @@ select {
float: none;
display: inline-block;
width: 100%;
padding-right: 58px;
}
}
......@@ -242,6 +243,7 @@ select {
}
.#{$namespace}radio.#{$namespace}left label,.#{$namespace}checkbox.#{$namespace}left label{
padding-left: 58px;
padding-right: 15px;
}
.#{$namespace}radio input[type="radio"],.#{$namespace}checkbox input[type="checkbox"]{
-webkit-appearance:none;
......
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