Skip to content

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

将数字输入框代码合并入mui核心库

parent 438e6f75
Show whitespace changes
Inline Side-by-side
Showing with 178 additions and 170 deletions
dist/css/mui.css
View file @ 6dffd9ea
......@@ -406,6 +406,10 @@ a:active {
border-radius: 6px;
}
.mui-subtitle {
font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 5px;
margin-bottom: 5px;
......@@ -1694,6 +1698,14 @@ input[type="submit"]:enabled:active, input[type="submit"].mui-active:enabled,
overflow: hidden;
}
.mui-table-view .mui-media-large .mui-media-object {
max-width: 80px;
height: 80px;
line-height: 80px;
}
.mui-table-view .mui-media .mui-subtitle {
color: #000;
}
.mui-table-view .mui-media-object {
max-width: 42px;
height: 42px;
......@@ -3218,6 +3230,71 @@ select:focus {
border-radius: 7px;
}
.mui-numbox {
position: relative;
display: inline-block;
width: 120px;
height: 35px;
padding: 0 40px 0 40px;
overflow: hidden;
vertical-align: top;
vertical-align: middle;
background-color: #efeff4;
border: solid 1px #bbb;
border-radius: 3px;
}
.mui-numbox [class*=mui-numbox-btn] {
position: absolute;
top: 0;
width: 40px;
height: 100%;
padding: 0;
overflow: hidden;
font-size: 18px;
font-weight: normal;
line-height: 100%;
color: #555;
background-color: #f9f9f9;
border: none;
border-radius: 0;
}
.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: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mui-numbox .mui-numbox-btn-minus {
left: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mui-numbox .mui-numbox-input {
display: inline-block;
width: 100%;
height: 100%;
padding: 0 3px;
margin: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
word-break: normal;
border: none;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;
border-radius: 0;
}
.mui-input-row .mui-numbox {
float: right;
margin: 2px 8px;
}
@font-face {
font-family: Muiicons;
font-style: normal;
......
dist/css/mui.min.css
View file @ 6dffd9ea
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ 6dffd9ea
......@@ -642,7 +642,7 @@ var mui = (function(document, undefined) {
target = target.parentNode.querySelector('input');
}
}
if (target.type === 'radio' || target.type === 'checkbox') {
if (target && (target.type === 'radio' || target.type === 'checkbox')) {
if (!target.disabled) { //disabled
return target;
}
......@@ -6099,3 +6099,96 @@ var mui = (function(document, undefined) {
$('.mui-input-row input').input();
});
})(mui, window, document);
/**
* 数字输入框
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var touchSupport = ('ontouchstart' in document);
var tapEventName = touchSupport ? 'tap' : 'click';
var changeEventName = 'change';
var holderClassName = 'mui-numbox';
var plusClassName = 'mui-numbox-btn-plus';
var minusClassName = 'mui-numbox-btn-minus';
var inputClassName = 'mui-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
dist/js/mui.min.js
View file @ 6dffd9ea
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 @ 6dffd9ea
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 deleted 100644 → 0
View file @ 438e6f75
.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;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mui-numbox .mui-numbox-btn-minus {
left: 0px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.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;
text-overflow: ellipsis;
word-break: normal;
overflow: hidden;
}
.mui-input-row .mui-numbox {
margin: 2px 8px;
float: right;
}
\ No newline at end of file
examples/hello-mui/examples/numbox.html
View file @ 6dffd9ea
......@@ -8,7 +8,6 @@
<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,
......@@ -93,7 +92,6 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.numbox.js"></script>
<script>
(function($, doc) {
$.init();
......
examples/hello-mui/js/mui.min.js
View file @ 6dffd9ea
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 deleted 100644 → 0
View file @ 438e6f75
/**
* 数字输入框
* 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
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