Skip to content

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

新增城市联动模板

parent 2b1387f2
Expand all 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
This diff is collapsed.
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