Skip to content

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

编译至MUI V2.3.0

parent 8ced2dee
Show whitespace changes
Inline Side-by-side
Showing with 410 additions and 139 deletions
dist/css/mui.css
View file @ 1f3f986c
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -574,6 +574,29 @@ p
color: #8f8f94;
}
.mui-row:before, .mui-row:after
{
display: table;
content: ' ';
}
.mui-row:after
{
clear: both;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
position: relative;
min-height: 1px;
}
.mui-row > [class*='mui-col-']
{
float: left;
}
.mui-col-xs-12
{
width: 100%;
......@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-grid-view.mui-grid-9
{
padding: 1px 0 1px 0;
padding-right: 0;
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
{
display: table;
content: ' ';
}
.mui-grid-view.mui-grid-9:after
{
clear: both;
}
.mui-grid-view.mui-grid-9:after
{
position: static;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
margin: -1px 0 0 -1px;
margin: 0;
padding: 11px 15px;
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
{
......@@ -3232,6 +3271,20 @@ select:focus
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-segmented-control-vertical
{
border-collapse: collapse;
border-width: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
{
display: block;
border-bottom: 1px solid #c8c7cc;
border-left-width: 0;
}
.mui-segmented-control.mui-scroll-wrapper
{
height: 38px;
......@@ -3287,6 +3340,14 @@ select:focus
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
{
color: inherit;
......
dist/css/mui.min.css
View file @ 1f3f986c
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 1f3f986c
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
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);
......@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -5788,6 +5797,7 @@ var mui = (function(document, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item';
......@@ -5795,7 +5805,11 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -5845,7 +5859,6 @@ var mui = (function(document, undefined) {
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......@@ -6477,17 +6490,21 @@ var mui = (function(document, undefined) {
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......@@ -6959,16 +6976,15 @@ var mui = (function(document, undefined) {
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -6978,6 +6994,9 @@ var mui = (function(document, undefined) {
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -6994,6 +7013,9 @@ var mui = (function(document, undefined) {
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -7016,28 +7038,38 @@ var mui = (function(document, undefined) {
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = 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);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
dist/js/mui.min.js
View file @ 1f3f986c
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 @ 1f3f986c
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -574,6 +574,29 @@ p
color: #8f8f94;
}
.mui-row:before, .mui-row:after
{
display: table;
content: ' ';
}
.mui-row:after
{
clear: both;
}
.mui-col-xs-1, .mui-col-sm-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-xs-12, .mui-col-sm-12
{
position: relative;
min-height: 1px;
}
.mui-row > [class*='mui-col-']
{
float: left;
}
.mui-col-xs-12
{
width: 100%;
......@@ -2548,20 +2571,36 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
.mui-grid-view.mui-grid-9
{
padding: 1px 0 1px 0;
padding-right: 0;
margin: 0;
padding: 0;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
background-color: #f2f2f2;
}
.mui-grid-view.mui-grid-9:before, .mui-grid-view.mui-grid-9:after
{
display: table;
content: ' ';
}
.mui-grid-view.mui-grid-9:after
{
clear: both;
}
.mui-grid-view.mui-grid-9:after
{
position: static;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell
{
margin: -1px 0 0 -1px;
margin: 0;
padding: 11px 15px;
vertical-align: top;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active
{
......@@ -3232,6 +3271,20 @@ select:focus
-webkit-touch-callout: none;
}
.mui-segmented-control.mui-segmented-control-vertical
{
border-collapse: collapse;
border-width: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-vertical .mui-control-item
{
display: block;
border-bottom: 1px solid #c8c7cc;
border-left-width: 0;
}
.mui-segmented-control.mui-scroll-wrapper
{
height: 38px;
......@@ -3287,6 +3340,14 @@ select:focus
border: 0;
border-radius: 0;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active
{
border-bottom: 1px solid #c8c7cc;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item
{
color: inherit;
......
examples/hello-mui/css/mui.min.css
View file @ 1f3f986c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/clouddb_wilddog.html
View file @ 1f3f986c
......@@ -61,7 +61,7 @@
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能； 在手机上新增数据后，你可以通过测试账号（账号：demo@dcloud.io/密码：12345678）登录野狗官网， 查看数据库的实时数据。
<p style="text-indent: 22px;">这是mui无后端开发示例，集成野狗云服务，通过js操作云端数据库，实现常见的增删改查功能。
</p>
</div>
......
examples/hello-mui/js/mui.js
View file @ 1f3f986c
/*!
* =====================================================
* Mui v2.2.0 (https://github.com/dcloudio/mui)
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -1758,6 +1758,7 @@ var mui = (function(document, undefined) {
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......@@ -3192,28 +3193,28 @@ var mui = (function(document, undefined) {
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
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);
......@@ -3439,14 +3440,15 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......@@ -4086,7 +4088,6 @@ var mui = (function(document, undefined) {
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......@@ -4899,13 +4900,24 @@ var mui = (function(document, undefined) {
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add('mui-fullscreen'); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -4954,10 +4966,7 @@ var mui = (function(document, undefined) {
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......@@ -5788,6 +5797,7 @@ var mui = (function(document, undefined) {
var CLASS_CONTROL_ITEM = 'mui-control-item';
var CLASS_SEGMENTED_CONTROL = 'mui-segmented-control';
var CLASS_SEGMENTED_CONTROL_VERTICAL = 'mui-segmented-control-vertical';
var CLASS_CONTROL_CONTENT = 'mui-control-content';
var CLASS_TAB_BAR = 'mui-bar-tab';
var CLASS_TAB_ITEM = 'mui-tab-item';
......@@ -5795,7 +5805,11 @@ var mui = (function(document, undefined) {
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -5845,7 +5859,6 @@ var mui = (function(document, undefined) {
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......@@ -6477,17 +6490,21 @@ var mui = (function(document, undefined) {
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains('mui-checkbox')) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......@@ -6959,16 +6976,15 @@ var mui = (function(document, undefined) {
var inputClassName = 'mui-numbox-input';
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -6978,6 +6994,9 @@ var mui = (function(document, undefined) {
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -6994,6 +7013,9 @@ var mui = (function(document, undefined) {
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -7016,28 +7038,38 @@ var mui = (function(document, undefined) {
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = 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);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
examples/hello-mui/js/mui.min.js
View file @ 1f3f986c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/list.html
View file @ 1f3f986c
......@@ -325,22 +325,37 @@
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar.html">
div模式
底部选项卡-div模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">
webview模式
底部选项卡-webview模式
</a>
</li>
<li class="mui-table-view-cell">
<!-- <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
文字选项卡
底部选项卡-文字选项卡
</a>
</li>
</li> -->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
含二级菜单的选项卡
底部选项卡-二级菜单(div)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
顶部选项卡-div模式
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
顶部选项卡-可左右拖动(div)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/tab-with-segmented-control-vertical.html">
左侧选项卡-div模式
</a>
</li>
</ul>
......@@ -441,7 +456,12 @@
}
//初始化，并预加载webview模式的选项卡
function preload () {
mui.preload({url:'examples/tab-webview-main.html'});
mui.preload({
url:'examples/tab-webview-main.html',
styles: {
popGesture: 'hide'
}
});
mui.preload({
url:"examples/pullrefresh_main.html",
styles:{
......
js/mui.class.scroll.js
View file @ 1f3f986c
......@@ -28,28 +28,28 @@
this.stopped = false;
this.options = $.extend(true, {
scrollY: true,//是否竖向滚动
scrollX: false,//是否横向滚动
startX: 0,//初始化时滚动至x
startY: 0,//初始化时滚动至y
indicators: true,//是否显示滚动条
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
stopPropagation: false,
hardwareAccelerated: true,
fixedBadAndorid: false,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
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);
......@@ -275,14 +275,15 @@
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition && this.moved) {
if (this.isInTransition) {
this.needReset = true;
this.isInTransition = false;
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
this.resetPosition(); //reset
// this.resetPosition(); //reset
$.trigger(this.scroller, 'scrollend', this);
// e.stopPropagation();
e.preventDefault();
......
js/mui.class.scroll.pullrefresh.js
View file @ 1f3f986c
......@@ -23,7 +23,6 @@
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
e.preventDefault();
this._super(e);
},
_drag: function(e) {
......
js/mui.gestures.pinch.js
View file @ 1f3f986c
......@@ -41,6 +41,7 @@
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
session.pinch = false;
$.trigger(session.target, name + 'end', touch);
}
break;
......
js/mui.number.js
View file @ 1f3f986c
......@@ -16,16 +16,15 @@
var inputClassName = $.className('numbox-input');
var Numbox = $.Numbox = $.Class.extend({
/**
* 构造函数
**/
init: function(holder, options) {
var self = this;
if (!holder) {
throw "构造 numbox 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__numbox_inited) return;
self.holder.__numbox_inited = true;
//避免重复初始化结束
options = options || {};
options.step = parseInt(options.step || 1);
self.options = options;
......@@ -35,6 +34,9 @@
self.checkValue();
self.initEvent();
},
/**
* 初始化事件绑定
**/
initEvent: function() {
var self = this;
self.plus.addEventListener(tapEventName, function(event) {
......@@ -51,6 +53,9 @@
self.checkValue();
});
},
/**
* 验证当前值是法合法
**/
checkValue: function() {
var self = this;
var val = self.input.value;
......@@ -73,28 +78,38 @@
}
self.input.value = val;
}
},
/**
* 更新选项
**/
setOption: function(name, value) {
var self = this;
self.options[name] = value;
}
});
$.fn.numbox = function(options) {
var instanceArray = [];
//遍历选择的元素
this.each(function(i, element) {
if (element.numbox) return;
if (options) {
new Numbox(element, options);
element.numbox = 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);
element.numbox = new Numbox(element, options);
}
});
return this;
return this[0] ? this[0].numbox : null;
}
//自动处理 class='mui-locker' 的 dom
$.ready(function() {
$('.' + holderClassName).numbox();
});
}(mui))
\ No newline at end of file
js/mui.offcanvas.js
View file @ 1f3f986c
......@@ -30,13 +30,24 @@
this.options = $.extend(true, {
dragThresholdX: 10,
scale: 0.8,
opacity: 0.1
opacity: 0.1,
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
},
}, options);
document.body.classList.add($.className('fullscreen')); //fullscreen
this.refresh();
this.initEvent();
}
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
refresh: function(offCanvas) {
// offCanvas && !offCanvas.classList.contains(CLASS_ACTIVE) && this.classList.remove(CLASS_ACTIVE);
this.slideIn = this.classList.contains(CLASS_SLIDE_IN);
......@@ -85,10 +96,7 @@
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
var tagName = e.target && e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
}
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'webkitTransitionEnd': //有个bug需要处理，需要考虑假设没有触发webkitTransitionEnd的情况
if (e.target === this.scroller) {
......
js/segmented-controllers.js
View file @ 1f3f986c
......@@ -10,6 +10,7 @@
var CLASS_CONTROL_ITEM = $.className('control-item');
var CLASS_SEGMENTED_CONTROL = $.className('segmented-control');
var CLASS_SEGMENTED_CONTROL_VERTICAL = $.className('segmented-control-vertical');
var CLASS_CONTROL_CONTENT = $.className('control-content');
var CLASS_TAB_BAR = $.className('bar-tab');
var CLASS_TAB_ITEM = $.className('tab-item');
......@@ -17,7 +18,11 @@
var handle = function(event, target) {
if (target.classList && (target.classList.contains(CLASS_CONTROL_ITEM) || target.classList.contains(CLASS_TAB_ITEM))) {
if (target.parentNode && target.parentNode.classList && target.parentNode.classList.contains(CLASS_SEGMENTED_CONTROL_VERTICAL)) {
//vertical 如果preventDefault会导致无法滚动
} else {
event.preventDefault(); //stop hash change
}
// if (target.hash) {
return target;
// }
......@@ -67,7 +72,6 @@
if (!targetTab.hash) {
return;
}
targetBody = document.getElementById(targetTab.hash.replace('#', ''));
if (!targetBody) {
......
js/tableviews.js
View file @ 1f3f986c
......@@ -435,17 +435,21 @@
var input = cell.querySelector('input[type=radio]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
} else if (classList.contains($.className('checkbox'))) {
var input = cell.querySelector('input[type=checkbox]');
if (input) {
// input.click();
if (!input.disabled && !input.readOnly) {
input.checked = !input.checked;
$.trigger(input, 'change');
}
}
}
};
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
......
package.json
View file @ 1f3f986c
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "2.2.0",
"version": "2.3.0",
"keywords": [
"css",
"fonts",
......
sass/grid.scss
View file @ 1f3f986c
.#{$namespace}row {
@include clearfix();
}
.#{$namespace}col-xs-1, .#{$namespace}col-sm-1, .#{$namespace}col-xs-2, .#{$namespace}col-sm-2, .#{$namespace}col-xs-3, .#{$namespace}col-sm-3, .#{$namespace}col-xs-4, .#{$namespace}col-sm-4, .#{$namespace}col-xs-5, .#{$namespace}col-sm-5, .#{$namespace}col-xs-6, .#{$namespace}col-sm-6, .#{$namespace}col-xs-7, .#{$namespace}col-sm-7, .#{$namespace}col-xs-8, .#{$namespace}col-sm-8, .#{$namespace}col-xs-9, .#{$namespace}col-sm-9, .#{$namespace}col-xs-10, .#{$namespace}col-sm-10, .#{$namespace}col-xs-11, .#{$namespace}col-sm-11, .#{$namespace}col-xs-12, .#{$namespace}col-sm-12 {
position: relative;
min-height: 1px;
}
.#{$namespace}row>[class*="#{$namespace}col-"]{
float: left;
}
.#{$namespace}col-xs-12 {
width: 100%;
}
......
sass/segmented-controls.scss
View file @ 1f3f986c
......@@ -14,7 +14,16 @@
border: 1px solid $primary-color;
border-radius: 3px;
-webkit-touch-callout: none;//(iOS平台)分段选择禁止长按弹出菜单；
&.#{$namespace}segmented-control-vertical{
border-radius:0;
border-width: 0;
border-collapse: collapse;
.#{$namespace}control-item{
display: block;
border-left-width: 0;
border-bottom: 1px solid #c8c7cc;
}
}
&.#{$namespace}scroll-wrapper{
height: 38px;
.#{$namespace}scroll{
......@@ -61,6 +70,14 @@
width:100%;
border:0;
border-radius:0;
&.#{$namespace}segmented-control-vertical{
.#{$namespace}control-item{
border-bottom: 1px solid #c8c7cc;
&.#{$namespace}active {
border-bottom: 1px solid #c8c7cc;
}
}
}
.#{$namespace}control-item {
border:0;
color: inherit;
......
sass/table-views.scss
View file @ 1f3f986c
......@@ -461,15 +461,21 @@
}
//grid-9
.#{$namespace}grid-view.#{$namespace}grid-9{
padding-right: 0;
background-color: #f2f2f2;
padding: 1px 0 1px 0;
padding: 0;
margin:0;
border-left:1px solid #EEE;
border-top:1px solid #EEE;
@include clearfix();
&:after{
position:static;
}
.#{$namespace}table-view-cell {
vertical-align: top;
padding:11px 15px;
border-left: 1px solid #EEE;
border-top: 1px solid #EEE;
margin: -1px 0 0 -1px;
margin:0;
border-right: 1px solid #EEE;
border-bottom: 1px solid #EEE;
&.#{$namespace}active{
background-color:#eee;
}
......
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