From 41b8edf8121038c887bae392440085531e0abb4e Mon Sep 17 00:00:00 2001 From: guy Date: Tue, 9 May 2017 14:53:22 +0800 Subject: [PATCH] =?UTF-8?q?IE8=E5=85=BC=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bi/base.css | 4 +- bi/base.js | 160 +++++++++++++++++- bi/core.js | 35 ++++ bi/widget.js | 24 ++- docs/base.css | 4 +- docs/base.js | 160 +++++++++++++++++- docs/core.js | 35 ++++ docs/resource.css | 26 +-- docs/widget.js | 24 ++- src/base/table/native.scrollbar.js | 155 +++++++++++++++++ src/base/table/table.grid.scrollbar.js | 6 +- src/config.js | 15 ++ src/core/base.js | 20 +++ src/css/base/table/table.grid.scrollbar.css | 4 +- src/css/resource/app.css | 26 +-- src/less/base/table/table.grid.scrollbar.less | 4 +- src/less/lib/colors.less | 51 ------ src/less/lib/constant.less | 29 ---- src/less/resource/app.less | 27 ++- .../sequencetable/listnumber.sequencetable.js | 12 +- .../sequencetable/treenumber.sequencetable.js | 12 +- 21 files changed, 692 insertions(+), 141 deletions(-) create mode 100644 src/base/table/native.scrollbar.js diff --git a/bi/base.css b/bi/base.css index c9c048d618..189a1a0f83 100644 --- a/bi/base.css +++ b/bi/base.css @@ -1196,13 +1196,13 @@ li.CodeMirror-hint-active { } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, -.public-scrollbar-faceActive:after { +.public-scrollbar-face-active:after { background-color: rgba(102, 102, 102, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, -.bi-theme-dark .public-scrollbar-faceActive:after { +.bi-theme-dark .public-scrollbar-face-active:after { background-color: rgba(204, 204, 204, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } diff --git a/bi/base.js b/bi/base.js index 534178084d..871dd8e958 100644 --- a/bi/base.js +++ b/bi/base.js @@ -28225,6 +28225,160 @@ BI.Svg = BI.inherit(BI.Widget, { } }); BI.shortcut("bi.svg", BI.Svg);/** + * + * 原生表格滚动条，为了IE8的兼容 + * + * Created by GUY on 2016/1/12. + * @class BI.NativeTableScrollbar + * @extends BI.Widget + */ +BI.NativeTableScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + defaultPosition: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollTop()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrolly: true, + items: [{ + type: "bi.layout", + width: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + mounted: function () { + this._populate(); + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollTop(o.position); + } catch (e) { + + } + this.inner.element.height(o.contentSize); + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setHeight(size); + this.options.size = size; + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_scrollbar", BI.NativeTableScrollbar); + + +BI.NativeTableHorizontalScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableHorizontalScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollLeft()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrollx: true, + items: [{ + type: "bi.layout", + height: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setWidth(size); + this.options.size = size; + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollLeft(o.position); + } catch (e) { + + } + this.inner.element.width(o.contentSize); + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableHorizontalScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_horizontal_scrollbar", BI.NativeTableHorizontalScrollbar);/** * * 表格 * @@ -29821,7 +29975,11 @@ BI.GridTableScrollbar = BI.inherit(BI.Widget, { } else { this._mouseMoveTracker.captureMouseMoves(e); } - this.element[0].focus(); + try { + this.element[0].focus(); + } catch (e) { + + } }, _onMouseMove: function (deltaX, deltaY) { diff --git a/bi/core.js b/bi/core.js index d9254f2022..782e18b6ce 100644 --- a/bi/core.js +++ b/bi/core.js @@ -2920,6 +2920,26 @@ if (!window.BI) { return /(msie|trident)/i.test(navigator.userAgent.toLowerCase()); }, + isIE9Below: function () { + if (!BI.isIE()) { + return false; + } + var version = 0; + var agent = navigator.userAgent.toLowerCase(); + var v1 = agent.match(/(?:msie\s([\w.]+))/); + var v2 = agent.match(/(?:trident.*rv:([\w.]+))/); + if (v1 && v2 && v1[1] && v2[1]) { + version = Math.max(v1[1] * 1, v2[1] * 1); + } else if (v1 && v1[1]) { + version = v1[1] * 1; + } else if (v2 && v2[1]) { + version = v2[1] * 1; + } else { + version = 0; + } + return version < 9; + }, + isEdge: function () { return /edge/i.test(navigator.userAgent.toLowerCase()); }, @@ -17811,6 +17831,21 @@ $(function () { return ob; } }); + //注册滚动条 + BI.Plugin.registerWidget("bi.grid_table_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_scrollbar"}); + } else { + return ob; + } + }); + BI.Plugin.registerWidget("bi.grid_table_horizontal_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_horizontal_scrollbar"}); + } else { + return ob; + } + }); //注册控件 BI.Plugin.registerWidget("bi.grid_table", function (ob) { diff --git a/bi/widget.js b/bi/widget.js index c3e05ff996..2c97d202d2 100644 --- a/bi/widget.js +++ b/bi/widget.js @@ -178,7 +178,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { } this.layout.attr("items", items); this.layout.resize(); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _getHeaderHeight: function () { @@ -352,7 +356,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } }, @@ -15816,7 +15824,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { this.layout.attr("items", items); this.layout.resize(); this.container.setHeight(o.items.length * o.rowSize); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _createHeader: function () { @@ -15925,7 +15937,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } }, diff --git a/docs/base.css b/docs/base.css index c9c048d618..189a1a0f83 100644 --- a/docs/base.css +++ b/docs/base.css @@ -1196,13 +1196,13 @@ li.CodeMirror-hint-active { } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, -.public-scrollbar-faceActive:after { +.public-scrollbar-face-active:after { background-color: rgba(102, 102, 102, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, -.bi-theme-dark .public-scrollbar-faceActive:after { +.bi-theme-dark .public-scrollbar-face-active:after { background-color: rgba(204, 204, 204, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } diff --git a/docs/base.js b/docs/base.js index 534178084d..871dd8e958 100644 --- a/docs/base.js +++ b/docs/base.js @@ -28225,6 +28225,160 @@ BI.Svg = BI.inherit(BI.Widget, { } }); BI.shortcut("bi.svg", BI.Svg);/** + * + * 原生表格滚动条，为了IE8的兼容 + * + * Created by GUY on 2016/1/12. + * @class BI.NativeTableScrollbar + * @extends BI.Widget + */ +BI.NativeTableScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + defaultPosition: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollTop()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrolly: true, + items: [{ + type: "bi.layout", + width: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + mounted: function () { + this._populate(); + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollTop(o.position); + } catch (e) { + + } + this.inner.element.height(o.contentSize); + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setHeight(size); + this.options.size = size; + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_scrollbar", BI.NativeTableScrollbar); + + +BI.NativeTableHorizontalScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableHorizontalScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollLeft()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrollx: true, + items: [{ + type: "bi.layout", + height: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setWidth(size); + this.options.size = size; + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollLeft(o.position); + } catch (e) { + + } + this.inner.element.width(o.contentSize); + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableHorizontalScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_horizontal_scrollbar", BI.NativeTableHorizontalScrollbar);/** * * 表格 * @@ -29821,7 +29975,11 @@ BI.GridTableScrollbar = BI.inherit(BI.Widget, { } else { this._mouseMoveTracker.captureMouseMoves(e); } - this.element[0].focus(); + try { + this.element[0].focus(); + } catch (e) { + + } }, _onMouseMove: function (deltaX, deltaY) { diff --git a/docs/core.js b/docs/core.js index ca61c1ec35..015d1c47fc 100644 --- a/docs/core.js +++ b/docs/core.js @@ -14062,6 +14062,26 @@ if (!window.BI) { return /(msie|trident)/i.test(navigator.userAgent.toLowerCase()); }, + isIE9Below: function () { + if (!BI.isIE()) { + return false; + } + var version = 0; + var agent = navigator.userAgent.toLowerCase(); + var v1 = agent.match(/(?:msie\s([\w.]+))/); + var v2 = agent.match(/(?:trident.*rv:([\w.]+))/); + if (v1 && v2 && v1[1] && v2[1]) { + version = Math.max(v1[1] * 1, v2[1] * 1); + } else if (v1 && v1[1]) { + version = v1[1] * 1; + } else if (v2 && v2[1]) { + version = v2[1] * 1; + } else { + version = 0; + } + return version < 9; + }, + isEdge: function () { return /edge/i.test(navigator.userAgent.toLowerCase()); }, @@ -28953,6 +28973,21 @@ $(function () { return ob; } }); + //注册滚动条 + BI.Plugin.registerWidget("bi.grid_table_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_scrollbar"}); + } else { + return ob; + } + }); + BI.Plugin.registerWidget("bi.grid_table_horizontal_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_horizontal_scrollbar"}); + } else { + return ob; + } + }); //注册控件 BI.Plugin.registerWidget("bi.grid_table", function (ob) { diff --git a/docs/resource.css b/docs/resource.css index 5412c25c6b..3b508458c0 100644 --- a/docs/resource.css +++ b/docs/resource.css @@ -3,7 +3,7 @@ /**** custom color(自定义颜色,用于特定场景) ****/ @font-face { font-family: 'bi'; - src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); + src: url('font/iconfont.eot'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ } @@ -51,20 +51,11 @@ body { -moz-outline: 0 none; outline: 0 none; } -#wrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; -} div::-webkit-scrollbar, textarea::-webkit-scrollbar { -webkit-appearance: none; background-color: rgba(102, 102, 102, 0.05); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); width: 6px; height: 6px; } @@ -74,11 +65,18 @@ textarea::-webkit-scrollbar-thumb { -moz-border-radius: 0; border-radius: 0; background-color: rgba(102, 102, 102, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666); +} +div::-webkit-scrollbar-thumb:hover, +textarea::-webkit-scrollbar-thumb:hover { + background-color: rgba(102, 102, 102, 0.7); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark div::-webkit-scrollbar, .bi-theme-dark textarea::-webkit-scrollbar { -webkit-appearance: none; background-color: rgba(204, 204, 204, 0.05); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); width: 6px; height: 6px; } @@ -88,6 +86,12 @@ textarea::-webkit-scrollbar-thumb { -moz-border-radius: 0; border-radius: 0; background-color: rgba(204, 204, 204, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc); +} +.bi-theme-dark div::-webkit-scrollbar-thumb:hover, +.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { + background-color: rgba(204, 204, 204, 0.7); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } .base-line-conn-background { background: url('icon/tree-vertical-line-1.png') repeat-y 0 0; diff --git a/docs/widget.js b/docs/widget.js index c3e05ff996..2c97d202d2 100644 --- a/docs/widget.js +++ b/docs/widget.js @@ -178,7 +178,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { } this.layout.attr("items", items); this.layout.resize(); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _getHeaderHeight: function () { @@ -352,7 +356,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } }, @@ -15816,7 +15824,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { this.layout.attr("items", items); this.layout.resize(); this.container.setHeight(o.items.length * o.rowSize); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _createHeader: function () { @@ -15925,7 +15937,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } }, diff --git a/src/base/table/native.scrollbar.js b/src/base/table/native.scrollbar.js new file mode 100644 index 0000000000..b584d2b3c6 --- /dev/null +++ b/src/base/table/native.scrollbar.js @@ -0,0 +1,155 @@ +/** + * + * 原生表格滚动条，为了IE8的兼容 + * + * Created by GUY on 2016/1/12. + * @class BI.NativeTableScrollbar + * @extends BI.Widget + */ +BI.NativeTableScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + defaultPosition: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollTop()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrolly: true, + items: [{ + type: "bi.layout", + width: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + mounted: function () { + this._populate(); + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollTop(o.position); + } catch (e) { + + } + this.inner.element.height(o.contentSize); + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setHeight(size); + this.options.size = size; + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_scrollbar", BI.NativeTableScrollbar); + + +BI.NativeTableHorizontalScrollbar = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.NativeTableHorizontalScrollbar.superclass._defaultConfig.apply(this, arguments), { + attributes: { + tabIndex: 0 + }, + contentSize: 0, + position: 0, + size: 0 + }) + }, + + render: function () { + var self = this, o = this.options; + //把滚动台size改掉 + BI.GridTableScrollbar.SIZE = 16; + + var throttle = BI.throttle(function () { + self.fireEvent(BI.NativeTableScrollbar.EVENT_SCROLL, self.element.scrollLeft()); + }, 150, {leading: false}); + this.element.scroll(function () { + throttle(); + }); + return { + type: "bi.default", + scrollx: true, + items: [{ + type: "bi.layout", + height: 1, + ref: function (_ref) { + self.inner = _ref; + } + }] + } + }, + + setContentSize: function (contentSize) { + this.options.contentSize = contentSize; + }, + + setPosition: function (position) { + this.options.position = position; + }, + + setSize: function (size) { + this.setWidth(size); + this.options.size = size; + }, + + _populate: function () { + var self = this, o = this.options; + if (o.size < 1 || o.contentSize <= o.size) { + this.setVisible(false); + return; + } + this.setVisible(true); + try { + this.element.scrollLeft(o.position); + } catch (e) { + + } + this.inner.element.width(o.contentSize); + }, + + populate: function () { + this._populate(); + } +}); +BI.NativeTableHorizontalScrollbar.EVENT_SCROLL = "EVENT_SCROLL"; +BI.shortcut("bi.native_table_horizontal_scrollbar", BI.NativeTableHorizontalScrollbar); \ No newline at end of file diff --git a/src/base/table/table.grid.scrollbar.js b/src/base/table/table.grid.scrollbar.js index 6faf27cc0e..7f1bcb3841 100644 --- a/src/base/table/table.grid.scrollbar.js +++ b/src/base/table/table.grid.scrollbar.js @@ -154,7 +154,11 @@ BI.GridTableScrollbar = BI.inherit(BI.Widget, { } else { this._mouseMoveTracker.captureMouseMoves(e); } - this.element[0].focus(); + try { + this.element[0].focus(); + } catch (e) { + + } }, _onMouseMove: function (deltaX, deltaY) { diff --git a/src/config.js b/src/config.js index fa06102d05..31b55260e9 100644 --- a/src/config.js +++ b/src/config.js @@ -54,6 +54,21 @@ $(function () { return ob; } }); + //注册滚动条 + BI.Plugin.registerWidget("bi.grid_table_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_scrollbar"}); + } else { + return ob; + } + }); + BI.Plugin.registerWidget("bi.grid_table_horizontal_scrollbar", function (ob) { + if (BI.isIE9Below()) { + return BI.extend(ob, {type: "bi.native_table_horizontal_scrollbar"}); + } else { + return ob; + } + }); //注册控件 BI.Plugin.registerWidget("bi.grid_table", function (ob) { diff --git a/src/core/base.js b/src/core/base.js index 44711e0ad3..d291ca5c76 100644 --- a/src/core/base.js +++ b/src/core/base.js @@ -1025,6 +1025,26 @@ if (!window.BI) { return /(msie|trident)/i.test(navigator.userAgent.toLowerCase()); }, + isIE9Below: function () { + if (!BI.isIE()) { + return false; + } + var version = 0; + var agent = navigator.userAgent.toLowerCase(); + var v1 = agent.match(/(?:msie\s([\w.]+))/); + var v2 = agent.match(/(?:trident.*rv:([\w.]+))/); + if (v1 && v2 && v1[1] && v2[1]) { + version = Math.max(v1[1] * 1, v2[1] * 1); + } else if (v1 && v1[1]) { + version = v1[1] * 1; + } else if (v2 && v2[1]) { + version = v2[1] * 1; + } else { + version = 0; + } + return version < 9; + }, + isEdge: function () { return /edge/i.test(navigator.userAgent.toLowerCase()); }, diff --git a/src/css/base/table/table.grid.scrollbar.css b/src/css/base/table/table.grid.scrollbar.css index 2fc4a1a446..9bef8681d2 100644 --- a/src/css/base/table/table.grid.scrollbar.css +++ b/src/css/base/table/table.grid.scrollbar.css @@ -100,13 +100,13 @@ } .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, -.public-scrollbar-faceActive:after { +.public-scrollbar-face-active:after { background-color: rgba(102, 102, 102, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark .public-scrollbar-main:hover .public-scrollbar-face:after, .bi-theme-dark .public-scrollbar-main-active .public-scrollbar-face:after, -.bi-theme-dark .public-scrollbar-faceActive:after { +.bi-theme-dark .public-scrollbar-face-active:after { background-color: rgba(204, 204, 204, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } diff --git a/src/css/resource/app.css b/src/css/resource/app.css index a4f1431802..76b8632060 100644 --- a/src/css/resource/app.css +++ b/src/css/resource/app.css @@ -3,7 +3,7 @@ /**** custom color(自定义颜色,用于特定场景) ****/ @font-face { font-family: 'bi'; - src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); + src: url('font/iconfont.eot'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ } @@ -51,20 +51,11 @@ body { -moz-outline: 0 none; outline: 0 none; } -#wrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; -} div::-webkit-scrollbar, textarea::-webkit-scrollbar { -webkit-appearance: none; background-color: rgba(102, 102, 102, 0.05); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0d666666,endColorstr=#0d666666); width: 6px; height: 6px; } @@ -74,11 +65,18 @@ textarea::-webkit-scrollbar-thumb { -moz-border-radius: 0; border-radius: 0; background-color: rgba(102, 102, 102, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d666666,endColorstr=#4d666666); +} +div::-webkit-scrollbar-thumb:hover, +textarea::-webkit-scrollbar-thumb:hover { + background-color: rgba(102, 102, 102, 0.7); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3666666,endColorstr=#b3666666); } .bi-theme-dark div::-webkit-scrollbar, .bi-theme-dark textarea::-webkit-scrollbar { -webkit-appearance: none; background-color: rgba(204, 204, 204, 0.05); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0dcccccc,endColorstr=#0dcccccc); width: 6px; height: 6px; } @@ -88,4 +86,10 @@ textarea::-webkit-scrollbar-thumb { -moz-border-radius: 0; border-radius: 0; background-color: rgba(204, 204, 204, 0.3); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4dcccccc,endColorstr=#4dcccccc); +} +.bi-theme-dark div::-webkit-scrollbar-thumb:hover, +.bi-theme-dark textarea::-webkit-scrollbar-thumb:hover { + background-color: rgba(204, 204, 204, 0.7); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3cccccc,endColorstr=#b3cccccc); } diff --git a/src/less/base/table/table.grid.scrollbar.less b/src/less/base/table/table.grid.scrollbar.less index 950bf8b2f6..ae6ba22f8f 100644 --- a/src/less/base/table/table.grid.scrollbar.less +++ b/src/less/base/table/table.grid.scrollbar.less @@ -126,14 +126,14 @@ .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, -.public-scrollbar-faceActive:after { +.public-scrollbar-face-active:after { .background-color(@scroll-color, 70%); } .bi-theme-dark { .public-scrollbar-main:hover .public-scrollbar-face:after, .public-scrollbar-main-active .public-scrollbar-face:after, - .public-scrollbar-faceActive:after { + .public-scrollbar-face-active:after { .background-color(@scroll-color-theme-dark, 70%); } } diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index bc7c6b0cbe..d4f4529f21 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -107,56 +107,5 @@ //失败边框 @color-bi-tooltip-warning-border: @border-color-error; -//dimension -@color-dimension-background: @background-color-light-blue; -@color-target-background: @background-color-light-green; -@color-dimension-region-border: @border-color-light-blue; -@color-target-region-border: @border-color-light-green; -@color-dimension-background-theme-dark: @background-color-light-blue-theme-dark; -@color-target-background-theme-dark: @background-color-light-green-theme-dark; -@color-dimension-region-border-theme-dark: @border-color-light-blue-theme-dark; -@color-target-region-border-theme-dark: @border-color-light-green-theme-dark; - -//etl operator -@color-etl-operator: @background-color-light-blue; - -//data source table, etl table, excel table, sql table -@color-table-active-background: @background-color-light-blue; - -//join union 表格的间隔色 -@color-table-result-background: @table-color-blue; -@color-table-background1: @table-color-yellow; -@color-table-background2: @table-color-green; -@color-table-background3: @table-color-light-blue; -@color-table-background4: @table-color-purple; -@color-table-background5: @table-color-pink; - -//我创建的 -@color-create-file-text: @font-color-orange; - -@color-target-style-condition-background: @background-color-light-blue; -@color-target-style-condition-border: @border-color-light-blue; - -@color-target-style-less: @background-color-negative; -@color-target-style-equal: @background-color-yellow; -@color-target-style-more: @background-color-dark-success; - -@color-login-info-fields-group-background: @background-color-light-blue; //mask颜色 @color-bi-button-mask: @color-bi-background-black; - -// 数据连接底色 10种 --start-- -@color-bi-data-link-button-color1: @data-link-color1; -@color-bi-data-link-button-color2: @data-link-color2; -@color-bi-data-link-button-color3: @data-link-color3; -@color-bi-data-link-button-color4: @data-link-color4; -@color-bi-data-link-button-color5: @data-link-color5; -@color-bi-data-link-button-color6: @data-link-color6; -@color-bi-data-link-button-color7: @data-link-color7; -@color-bi-data-link-button-color8: @data-link-color8; -@color-bi-data-link-button-color9: @data-link-color9; -@color-bi-data-link-button-color10: @data-link-color10; -// 数据连接底色 10种 --end-- - -@color-bi-progress-text-bar-background: @border-color-light-green; -@color-bi-progress-text-bar-processor: @border-color-success; diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index 71f7758a59..c513629835 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -41,11 +41,6 @@ @background-color-dark: #d4dadd; @background-color-disabled: #cccccc; -@background-color-light-blue: #d8f2fd;// -@background-color-light-green: #e1f4e7;// -@background-color-light-blue-theme-dark: #008ae9;// -@background-color-light-green-theme-dark: #04b1c2;// - @background-color-orange: #fef6de; @background-color-green: #eefbff; @background-color-yellow: #f9a744; @@ -73,11 +68,6 @@ @border-color-error: #f4cbcb; @border-color-normal-success: #eddea2; -@border-color-light-blue: #d8f2fd;// -@border-color-light-green: #e1f4e7;// -@border-color-light-blue-theme-dark: #008ae9;// -@border-color-light-green-theme-dark: #04b1c2;// - @border-color-dark: #c4c6c6; //scroll color @@ -94,22 +84,3 @@ //shadow color @shadow-color-black: #000000; - -//表格的间隔色 -@table-color-blue: #d9f2fc; -@table-color-yellow: #fef6df; -@table-color-green: #daf3dc; -@table-color-light-blue: #d6f7f0; -@table-color-purple: #e8e6fe; -@table-color-pink: #fee9e9; - -@data-link-color1: #009de3; -@data-link-color2: #4fc1e9; -@data-link-color3: #48cfad; -@data-link-color4: #57cb7c; -@data-link-color5: #a0d468; -@data-link-color6: #fbaf4f; -@data-link-color7: #fc6e51; -@data-link-color8: #ed5565; -@data-link-color9: #ac92ec; -@data-link-color10: #5d9cec; \ No newline at end of file diff --git a/src/less/resource/app.less b/src/less/resource/app.less index ab03dc43b1..2d73ca0631 100644 --- a/src/less/resource/app.less +++ b/src/less/resource/app.less @@ -2,7 +2,7 @@ @font-face { font-family: 'bi'; - src: url('@{webUrl}font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('@{webUrl}font/iconfont.woff') format('woff'), /* chrome、firefox */ url('@{webUrl}font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{webUrl}font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ + src: url('@{webUrl}font/iconfont.eot'), /* IE6-IE8 */ url('@{webUrl}font/iconfont.woff') format('woff'), /* chrome、firefox */ url('@{webUrl}font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{webUrl}font/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */ } .b-font { @@ -47,27 +47,19 @@ body { outline: 0 none; } -#wrapper { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; -} - div, textarea { &::-webkit-scrollbar { -webkit-appearance: none; - background-color: @scroll-color; + .background-color(@scroll-color, 5%); width: 6px; height: 6px; } &::-webkit-scrollbar-thumb { .border-radius(0); - background-color: @scroll-thumb-color; + .background-color(@scroll-color, 30%); + &:hover { + .background-color(@scroll-color, 70%); + } } } @@ -75,13 +67,16 @@ div, textarea { div, textarea { &::-webkit-scrollbar { -webkit-appearance: none; - background-color: @scroll-color-theme-dark; + .background-color(@scroll-color-theme-dark, 5%); width: 6px; height: 6px; } &::-webkit-scrollbar-thumb { .border-radius(0); - background-color: @scroll-thumb-color-theme-dark; + .background-color(@scroll-color-theme-dark, 30%); + &:hover { + .background-color(@scroll-color-theme-dark, 70%); + } } } } \ No newline at end of file diff --git a/src/widget/sequencetable/listnumber.sequencetable.js b/src/widget/sequencetable/listnumber.sequencetable.js index a411127feb..5e159f5a80 100644 --- a/src/widget/sequencetable/listnumber.sequencetable.js +++ b/src/widget/sequencetable/listnumber.sequencetable.js @@ -80,7 +80,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { this.layout.attr("items", items); this.layout.resize(); this.container.setHeight(o.items.length * o.rowSize); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _createHeader: function () { @@ -189,7 +193,11 @@ BI.SequenceTableListNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } }, diff --git a/src/widget/sequencetable/treenumber.sequencetable.js b/src/widget/sequencetable/treenumber.sequencetable.js index 8c26902e65..766c65eaba 100644 --- a/src/widget/sequencetable/treenumber.sequencetable.js +++ b/src/widget/sequencetable/treenumber.sequencetable.js @@ -178,7 +178,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { } this.layout.attr("items", items); this.layout.resize(); - this.scrollContainer.element.scrollTop(o.scrollTop); + try { + this.scrollContainer.element.scrollTop(o.scrollTop); + } catch (e) { + + } }, _getHeaderHeight: function () { @@ -352,7 +356,11 @@ BI.SequenceTableTreeNumber = BI.inherit(BI.Widget, { setVerticalScroll: function (scrollTop) { if (this.options.scrollTop !== scrollTop) { this.options.scrollTop = scrollTop; - this.scrollContainer.element.scrollTop(scrollTop); + try { + this.scrollContainer.element.scrollTop(scrollTop); + } catch (e) { + + } } },