From 3218d18fc3fcd13eec6fe25bddf877049a8a9db9 Mon Sep 17 00:00:00 2001 From: liteng <930372551@qq.com> Date: Wed, 4 Jul 2018 07:51:26 +0800 Subject: [PATCH] =?UTF-8?q?ui=E6=8E=A7=E4=BB=B6=E6=B5=8B=E8=AF=95=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Color.js | 31 +++++++++++++++++++----------- src/ui/HorizontalRule.js | 10 +++++++++- src/ui/Input.js | 14 +++++++++++++- src/ui/Integer.js | 19 ++++++++++++------ test/ui/11 ColorTest.html | 26 +++++++++++++++++++++++++ test/ui/12 HorizontalRuleTest.html | 22 +++++++++++++++++++++ test/ui/13 InputTest.html | 26 +++++++++++++++++++++++++ test/ui/14 IntegerTest.html | 28 +++++++++++++++++++++++++++ 8 files changed, 157 insertions(+), 19 deletions(-) create mode 100644 test/ui/11 ColorTest.html create mode 100644 test/ui/12 HorizontalRuleTest.html create mode 100644 test/ui/13 InputTest.html create mode 100644 test/ui/14 IntegerTest.html diff --git a/src/ui/Color.js b/src/ui/Color.js index fe6a050e..01bdebfc 100644 --- a/src/ui/Color.js +++ b/src/ui/Color.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 颜色选择器 @@ -6,7 +7,13 @@ import Control from './Control'; */ function Color(options) { Control.call(this, options); + options = options || {}; + + this.id = options.id || null; this.value = options.value || null; + this.cls = options.cls || 'Color'; + this.style = options.style || 'width: 64px; height: 17px; border: none; padding: 2px; background-color: transparent;'; + this.onChange = options.onChange || null; }; @@ -15,26 +22,26 @@ Color.prototype.constructor = Color; Color.prototype.render = function () { this.dom = document.createElement('input'); - this.dom.className = 'Color'; - this.dom.style.width = '64px'; - this.dom.style.height = '17px'; - this.dom.style.border = '0px'; - this.dom.style.padding = '2px'; - this.dom.style.backgroundColor = 'transparent'; + + if (this.id) { + this.dom.id = this.id; + } + + this.dom.className = this.cls; + this.dom.style = this.style; try { this.dom.type = 'color'; - if (this.value && Number.isNaN(this.value)) { - this.setHexValue(this.value); - } else if (this.value) { + if (this.value && this.value.toString().startsWith('#')) { // #ffffff this.setValue(this.value); + } else if (this.value) { // 0xffffff + this.setHexValue(this.value); } else { this.dom.value = '#ffffff'; } - } catch (exception) { - + console.warn(exception); } this.parent.appendChild(this.dom); @@ -62,4 +69,6 @@ Color.prototype.setHexValue = function (hex) { return this; }; +XType.add('color', Color); + export default Color; \ No newline at end of file diff --git a/src/ui/HorizontalRule.js b/src/ui/HorizontalRule.js index e83ef228..b690975f 100644 --- a/src/ui/HorizontalRule.js +++ b/src/ui/HorizontalRule.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 水平线 @@ -6,6 +7,9 @@ import Control from './Control'; */ function HorizontalRule(options) { Control.call(this, options); + options = options || {}; + + this.cls = options.cls || 'HorizontalRule'; }; HorizontalRule.prototype = Object.create(Control.prototype); @@ -13,8 +17,12 @@ HorizontalRule.prototype.constructor = HorizontalRule; HorizontalRule.prototype.render = function () { this.dom = document.createElement('hr'); - this.dom.className = 'HorizontalRule'; + + this.dom.className = this.cls; + this.parent.appendChild(this.dom); }; +XType.add('hr', HorizontalRule); + export default HorizontalRule; \ No newline at end of file diff --git a/src/ui/Input.js b/src/ui/Input.js index d0dbd9f5..d7feb679 100644 --- a/src/ui/Input.js +++ b/src/ui/Input.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 输入框 @@ -7,9 +8,13 @@ import Control from './Control'; function Input(options) { Control.call(this, options); options = options || {}; + + this.id = options.id || null; this.value = options.value || ''; + this.cls = options.cls || 'Input'; this.style = options.style || null; this.disabled = options.disabled || false; + this.onChange = options.onChange || null; }; @@ -18,7 +23,12 @@ Input.prototype.constructor = Input; Input.prototype.render = function () { this.dom = document.createElement('input'); - this.dom.className = 'Input'; + + if (this.id) { + this.dom.id = this.id; + } + + this.dom.className = this.cls; if (this.style) { this.dom.style = this.style; @@ -53,4 +63,6 @@ Input.prototype.setValue = function (value) { return this; }; +XType.add('input', Input); + export default Input; \ No newline at end of file diff --git a/src/ui/Integer.js b/src/ui/Integer.js index 718939e1..7d59d35b 100644 --- a/src/ui/Integer.js +++ b/src/ui/Integer.js @@ -1,4 +1,5 @@ import Control from './Control'; +import XType from './XType'; /** * 整数 @@ -6,15 +7,15 @@ import Control from './Control'; */ function Integer(options) { Control.call(this, options); - options = options || {}; + this.id = options.id || null; this.value = options.value || 0; - this.min = options.range ? options.range[0] : -Infinity; this.max = options.range ? options.range[1] : Infinity; - - this.step = options.step || 1; + this.step = options.step || 1; // TODO: step无效 + this.cls = options.cls || 'Number'; + this.style = options.style || null; this.onChange = options.onChange || null; }; @@ -24,7 +25,12 @@ Integer.prototype.constructor = Integer; Integer.prototype.render = function () { this.dom = document.createElement('input'); - this.dom.className = 'Number'; + + if (this.id) { + this.dom.id = this.id; + } + + this.dom.className = this.cls; this.dom.value = '0'; this.dom.addEventListener('keydown', function (event) { @@ -67,7 +73,6 @@ Integer.prototype.render = function () { _this.setValue(value); _this.dom.dispatchEvent(changeEvent); } - prevPointer = [event.clientX, event.clientY]; } @@ -135,4 +140,6 @@ Integer.prototype.setRange = function (min, max) { return this; }; +XType.add('int', Integer); + export default Integer; \ No newline at end of file diff --git a/test/ui/11 ColorTest.html b/test/ui/11 ColorTest.html new file mode 100644 index 00000000..235fa6c2 --- /dev/null +++ b/test/ui/11 ColorTest.html @@ -0,0 +1,26 @@ + + + + + + + Color Test + + + + + + + + + \ No newline at end of file diff --git a/test/ui/12 HorizontalRuleTest.html b/test/ui/12 HorizontalRuleTest.html new file mode 100644 index 00000000..2b869521 --- /dev/null +++ b/test/ui/12 HorizontalRuleTest.html @@ -0,0 +1,22 @@ + + + + + + + Horizontal Rule Test + + + + + + + + + \ No newline at end of file diff --git a/test/ui/13 InputTest.html b/test/ui/13 InputTest.html new file mode 100644 index 00000000..e0f470e7 --- /dev/null +++ b/test/ui/13 InputTest.html @@ -0,0 +1,26 @@ + + + + + + + Input Test + + + + + + + + + \ No newline at end of file diff --git a/test/ui/14 IntegerTest.html b/test/ui/14 IntegerTest.html new file mode 100644 index 00000000..4ca94332 --- /dev/null +++ b/test/ui/14 IntegerTest.html @@ -0,0 +1,28 @@ + + + + + + + Integer Test + + + + + + + + + \ No newline at end of file