From 22c718ecdf332b8f160b4187cb69bf69b0fcacd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E8=8D=A3=E6=AD=86?= Date: Wed, 26 Jul 2017 16:22:16 +0800 Subject: [PATCH] BI-6615 make some widget specific ,add base widget --- demo/js/config/widget.js | 18 +- demo/js/widget/basewidget/demo.items.js | 32 +++ .../js/widget/basewidget/demo.mask.loading.js | 56 +++++ demo/js/widget/basewidget/demo.nodes.js | 36 +++ demo/js/widget/basewidget/demo.panes.js | 219 ++++++++++++++++++ .../js/widget/basewidget/demo.progress_bar.js | 69 ++++++ demo/js/widget/basewidget/demo.sagments.js | 49 ++++ demo/js/widget/basewidget/demo.tips.js | 14 +- .../demo.multilayer_select_tree_combo.js | 7 + .../selecttree/demo.select_tree_combo.js | 156 +------------ .../demo.multilayer_single_tree_combo.js | 7 + .../singletree/demo.single_tree_combo.js | 157 +------------ demo/js/widget/tree/demo.switch_tree.js | 24 -- demo/js/widget/tree/demo.switchtree.js | 56 +++++ demo/less/main.less | 27 +++ docs/demo.css | 24 ++ src/widget/base/mask/cancel.loading.mask.js | 74 ++++++ src/widget/base/mask/loading.background.js | 33 +++ src/widget/base/mask/loading.mask.js | 58 +++++ .../base/segment/button.line.segment.js | 68 ++++++ src/widget/base/segment/segment.line.js | 57 +++++ src/widget/base/tip/tip.helper.js | 46 ++++ .../base/toolbar/toolbar.progress.bar.js | 50 ++++ src/widget/base/toolbar/toolbar.progress.js | 52 +++++ .../toolbar/toolbar.progress.processor.js | 50 ++++ 25 files changed, 1111 insertions(+), 328 deletions(-) create mode 100644 demo/js/widget/basewidget/demo.items.js create mode 100644 demo/js/widget/basewidget/demo.mask.loading.js create mode 100644 demo/js/widget/basewidget/demo.nodes.js create mode 100644 demo/js/widget/basewidget/demo.panes.js create mode 100644 demo/js/widget/basewidget/demo.progress_bar.js create mode 100644 demo/js/widget/basewidget/demo.sagments.js delete mode 100644 demo/js/widget/tree/demo.switch_tree.js create mode 100644 demo/js/widget/tree/demo.switchtree.js create mode 100644 src/widget/base/mask/cancel.loading.mask.js create mode 100644 src/widget/base/mask/loading.background.js create mode 100644 src/widget/base/mask/loading.mask.js create mode 100644 src/widget/base/segment/button.line.segment.js create mode 100644 src/widget/base/segment/segment.line.js create mode 100644 src/widget/base/tip/tip.helper.js create mode 100644 src/widget/base/toolbar/toolbar.progress.bar.js create mode 100644 src/widget/base/toolbar/toolbar.progress.js create mode 100644 src/widget/base/toolbar/toolbar.progress.processor.js diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index c74370b08..5137e3901 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -17,31 +17,31 @@ Demo.WIDGET_CONFIG = [{ }, { pId: 420, text: "各种items", - value: "items" + value: "demo.items" }, { pId: 420, text: "各种节点node", - value: "nodes" + value: "demo.nodes" }, { pId: 420, text: "各种segment", - value: "segments" + value: "demo.segments" }, { pId: 420, text: "各种面板", - value: "panes" + value: "demo.panes" }, { pId: 420, text: "bi.loading_mask", - value: "loadingmask" + value: "demo.loading_mask" }, { pId: 420, text: "可以切换的树", - value: "switch_tree" + value: "demo.switch_tree" }, { pId: 420, text: "进度条", - value: "progressbar" + value: "demo.progress_bar" }, { pId: 1, text: "bi.text_editor", @@ -54,6 +54,10 @@ Demo.WIDGET_CONFIG = [{ pId: 400, text: "bi.multi_tree_combo", value: "demo.multi_tree_combo" + }, { + pId: 400, + text: "bi.switch_tree", + value: "demo.switch_tree" }, { id: 401, pId: 4, diff --git a/demo/js/widget/basewidget/demo.items.js b/demo/js/widget/basewidget/demo.items.js new file mode 100644 index 000000000..24ccea431 --- /dev/null +++ b/demo/js/widget/basewidget/demo.items.js @@ -0,0 +1,32 @@ +/** + * Created by Dailer on 2017/7/25. + */ + +Demo.Items = BI.inherit(BI.Widget, { + + render: function () { + + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "单选item" + }, { + type: "bi.single_select_item", + text: "单选项" + }, { + type: "bi.label", + height: 30, + text: "复选item" + }, { + type: "bi.multi_select_item", + text: "复选项" + }], + hgap: 300 + } + } +}); + + +BI.shortcut("demo.items", Demo.Items); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.mask.loading.js b/demo/js/widget/basewidget/demo.mask.loading.js new file mode 100644 index 000000000..9b04e7765 --- /dev/null +++ b/demo/js/widget/basewidget/demo.mask.loading.js @@ -0,0 +1,56 @@ +/** + * Created by Dailer on 2017/7/25. + */ + +Demo.LoadingMask = BI.inherit(BI.Widget, { + + render: function () { + var vessel = this; + var self = this; + var left = BI.createWidget({ + type: "bi.center_adapt", + items: [{ + type: "bi.button", + text: "LoadingMask", + height: 30, + handler: function () { + var mask = BI.createWidget({ + type: "bi.loading_mask", + masker: vessel, + text: "加载中...3s后结束" + }); + setTimeout(function () { + mask.destroy(); + }, 3000); + } + }] + }); + var right = BI.createWidget({ + type: "bi.center_adapt", + items: [{ + type: "bi.button", + text: "CancelLoadingMask", + height: 30, + handler: function () { + var mask = BI.createWidget({ + type: "bi.loading_cancel_mask", + masker: vessel, + text: "正在加载数据" + }); + mask.on(BI.LoadingCancelMask.EVENT_VALUE_CANCEL, function () { + mask.destroy(); + BI.Msg.toast("取消加载了..."); + }); + } + }] + }); + BI.createWidget({ + type: "bi.center_adapt", + element: vessel, + items: [left, right], + hgap: 20 + }) + } +}); + +BI.shortcut("demo.loading_mask", Demo.LoadingMask); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.nodes.js b/demo/js/widget/basewidget/demo.nodes.js new file mode 100644 index 000000000..9d3a6bdd3 --- /dev/null +++ b/demo/js/widget/basewidget/demo.nodes.js @@ -0,0 +1,36 @@ +/** + * Created by Dailer on 2017/7/25. + */ + +Demo.Nodes = BI.inherit(BI.Widget, { + + render: function (vessel) { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "十字形的节点" + }, { + type: "bi.plus_group_node", + text: "十字形的节点" + }, { + type: "bi.label", + height: 30, + text: "三角形的节点" + }, { + type: "bi.triangle_group_node", + text: "三角形的节点" + }, { + type: "bi.label", + height: 30, + text: "箭头节点" + }, { + type: "bi.arrow_group_node", + text: "箭头节点" + }] + } + } +}); + +BI.shortcut("demo.nodes", Demo.Nodes); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.panes.js b/demo/js/widget/basewidget/demo.panes.js new file mode 100644 index 000000000..b21224027 --- /dev/null +++ b/demo/js/widget/basewidget/demo.panes.js @@ -0,0 +1,219 @@ +/** + * Created by Dailer on 2017/7/25. + * copy from bi.mvc + */ + +// need fix +Demo.Panes = BI.inherit(BI.Widget, { + + _createSearchPane: function () { + var searcher = BI.createWidget({ + type: "bi.searcher_view", + width: 200, + height: 300, + matcher: { //完全匹配的构造器 + type: "bi.button_group", + behaviors: { + redmark: function () { + return true; + } + }, + layouts: [{ + type: "bi.vertical" + }] + }, + searcher: { + type: "bi.button_group", + behaviors: { + redmark: function () { + return true; + } + }, + layouts: [{ + type: "bi.vertical" + }] + } + }); + searcher.populate(BI.createItems(BI.first(Demo.CONSTANTS.ITEMS, 20), { + type: "bi.multi_select_item", + height: 25 + }), [{ + type: "bi.multi_select_item", + height: 25, + text: "这是一个完全匹配的项" + }], "d"); + return searcher; + }, + + _createSearchTreePane: function () { + var searcher = BI.createWidget({ + type: "bi.searcher_view", + width: 200, + height: 300, + matcher: { //完全匹配的构造器 + type: "bi.button_group", + behaviors: { + redmark: function () { + return true; + } + }, + layouts: [{ + type: "bi.vertical" + }] + }, + searcher: { + type: "bi.custom_tree", + el: { + type: "bi.button_tree", + behaviors: { + redmark: function () { + return true; + } + }, + chooseType: 0, + layouts: [{ + type: "bi.vertical", + lgap: 30 + }] + } + } + }); + searcher.populate(BI.deepClone(Demo.CONSTANTS.TREEITEMS), [{ + type: "bi.multi_select_item", + height: 25, + text: "这是一个完全匹配的项" + }], "test"); + return searcher; + }, + + _createListPane: function () { + var list = BI.createWidget({ + type: "bi.list_pane", + cls: "mvc-border", + width: 200, + height: 100 + }); + list.populate([]); + return list; + }, + + _createMultiSelectPane: function () { + var list = BI.createWidget({ + type: "bi.select_list", + cls: "mvc-border", + logic: { + dynamic: false + }, + width: 200, + height: 100, + items: BI.createItems(BI.first(Demo.CONSTANTS.ITEMS, 1), { + type: "bi.multi_select_item", + height: 25 + }), + el: { + el: { + chooseType: BI.Selection.Multi + } + } + }); + return list; + }, + + render: function () { + // var wids = BI.Utils.getAllWidgetIDs(); + // var dids = BI.Utils.getAllTargetDimensionIDs(wids[0]); + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "bi.panel" + }, { + type: "bi.panel", + title: "这是一个panel", + titleButtons: [{ + type: "bi.target_combo", + //need fix + //dId: true + }], + width: 300, + height: 200, + el: { + type: "bi.label", + text: "这是panel下的内容" + } + }, { + type: "bi.label", + height: 30, + text: "这是一个list面板(Pane和buttonGroup的结合体)" + }, this._createListPane(), { + type: "bi.label", + height: 30, + text: "多选面板" + }, this._createMultiSelectPane(), { + type: "bi.label", + height: 30, + text: "带有确定取消按钮的下拉面板" + }, { + type: "bi.combo", + width: 200, + height: 30, + el: { + type: "bi.button", + text: "点击下拉", + height: 30 + }, + popup: { + type: "bi.multi_popup_view", + el: { + type: "bi.button_group", + items: BI.createItems(BI.first(Demo.CONSTANTS.ITEMS, 20), { + type: "bi.multi_select_item" + }), + layouts: [{ + type: "bi.vertical" + }] + } + } + }, { + type: "bi.label", + height: 30, + text: "popup弹出层带有确定取消关闭按钮" + }, { + type: "bi.combo", + width: 200, + height: 30, + el: { + type: "bi.button", + text: "点击下拉", + height: 30 + }, + popup: { + type: "bi.popup_panel", + el: { + type: "bi.button_group", + items: BI.createItems(BI.first(Demo.CONSTANTS.ITEMS, 20), { + type: "bi.multi_select_item" + }), + layouts: [{ + type: "bi.vertical" + }] + }, + buttons: ["取消", "确定"], + title: "弹出层面板" + } + }, { + type: "bi.label", + height: 30, + text: "默认的搜索面板, 单选多选由searcher控制" + }, this._createSearchPane(), { + type: "bi.label", + height: 30, + text: "搜索的结果是一棵树" + }, this._createSearchTreePane()], + hgap: 50, + vgap: 20 + } + } +}); +BI.shortcut("demo.panes", Demo.Panes); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.progress_bar.js b/demo/js/widget/basewidget/demo.progress_bar.js new file mode 100644 index 000000000..48261f481 --- /dev/null +++ b/demo/js/widget/basewidget/demo.progress_bar.js @@ -0,0 +1,69 @@ +/** + * Created by Dailer on 2017/7/26. + */ + +Demo.ProgressBar = BI.inherit(BI.Widget, { + + render: function () { + var self = this; + var progress = BI.createWidget({ + type: "bi.progress_bar", + width: 300 + }); + + //控件背景用的 是 bi-background ,和页面背景重复了,无奈窝只能这样搞一下了,虽然很怪异 + progress.bar.element.css({ + backgroundColor: "#A9A9A9" + }); + + var numbereditor = BI.createWidget({ + type: "bi.fine_tuning_number_editor", + height: 30 + }); + numbereditor.on(BI.FineTuningNumberEditor.EVENT_CONFIRM, function () { + progress.setValue(numbereditor.getValue()); + }) + + BI.createWidget({ + type: "bi.center_adapt", + element: this, + items: [progress] + }); + + return { + type: "bi.absolute", + items: [{ + el: numbereditor, + left: 300, + right: 300, + bottom: 60 + }, { + el: { + type: "bi.button", + height: 25, + text: "setValue(100)", + handler: function () { + progress.setValue(100); + } + }, + left: 0, + right: 0, + bottom: 30 + }, { + el: { + type: "bi.button", + height: 25, + text: "setValue(75)", + handler: function () { + progress.setValue(75); + } + }, + left: 0, + right: 0, + bottom: 0 + }] + } + } +}); + +BI.shortcut("demo.progress_bar", Demo.ProgressBar); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.sagments.js b/demo/js/widget/basewidget/demo.sagments.js new file mode 100644 index 000000000..3083209d7 --- /dev/null +++ b/demo/js/widget/basewidget/demo.sagments.js @@ -0,0 +1,49 @@ +/** + * Created by Dailer on 2017/7/25. + */ + +Demo.Segments = BI.inherit(BI.Widget, { + + render: function () { + return { + type: "bi.vertical", + items: [{ + type: "bi.label", + height: 30, + text: "默认风格" + }, { + type: "bi.segment", + items: [{ + text: "tab1", + value: 1, + selected: true + }, { + text: "tab2", + value: 2 + }, { + text: "tab3 disabled", + disabled: true, + value: 3 + }] + }, { + type: "bi.label", + height: 30, + text: "风格1" + }, { + type: "bi.line_segment", + items: [{ + text: "tab1", + value: 1, + selected: true + }, { + text: "tab2", + value: 2 + }] + }], + hgap: 50, + vgap: 20 + } + } +}); + +BI.shortcut("demo.segments", Demo.Segments); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.tips.js b/demo/js/widget/basewidget/demo.tips.js index 7340ce8a4..ab6cd9c11 100644 --- a/demo/js/widget/basewidget/demo.tips.js +++ b/demo/js/widget/basewidget/demo.tips.js @@ -134,11 +134,23 @@ Demo.Tips = BI.inherit(BI.Widget, { vgap: 20 }); + var helper = BI.createWidget({ + type: "bi.left", + items: [{ + el: { + type: 'bi.helper', + text: '拖拽提示', + value: "拖拽提示", + height: 30, + } + }] + }); + return { type: "bi.horizontal_auto", vgap: 20, hgap: 20, - items: [bubble, title, toast] + items: [bubble, title, toast, helper] } } }); diff --git a/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js b/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js index a50862225..50f6a88a0 100644 --- a/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js +++ b/demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js @@ -26,6 +26,13 @@ Demo.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { BI.Msg.toast(self.tree.getValue()[0]); }, width: 300 + }, { + type: "bi.button", + text: "setVlaue (第二级文件1)", + handler: function () { + self.tree.setValue(["第二级文件1"]); + }, + width: 300 }], vgap: 20 } diff --git a/demo/js/widget/selecttree/demo.select_tree_combo.js b/demo/js/widget/selecttree/demo.select_tree_combo.js index 5eeac55a3..2f45d492a 100644 --- a/demo/js/widget/selecttree/demo.select_tree_combo.js +++ b/demo/js/widget/selecttree/demo.select_tree_combo.js @@ -8,154 +8,7 @@ Demo.SelectTreeCombo = BI.inherit(BI.Widget, { render: function () { var self = this; - var items = [{ - id: 1, - text: "第一项", - value: 1, - isParent: true, - title: "第一项" - }, { - id: 2, - text: "第二项", - value: 2, - isParent: true, - title: "第二项" - }, { - id: 3, - text: "第三项", - value: 3, - isParent: true, - open: true, - title: "第三项" - }, { - id: 4, - text: "第四项", - value: 4, - isParent: true, - title: "第四项" - }, { - id: 5, - text: "第五项", - value: 5, - isParent: true, - title: "第五项" - }, { - id: 6, - text: "第六项", - value: 6, - isParent: true, - open: true, - title: "第六项" - }, { - id: 7, - text: "第七项", - value: 7, - isParent: true, - open: true, - title: "第七项" - }, { - id: 11, - pId: 1, - text: "子项1", - value: 11, - title: "子项1" - }, { - id: 12, - pId: 1, - text: "子项2", - value: 12, - title: "子项2" - }, { - id: 13, - pId: 1, - text: "子项3", - value: 13, - title: "子项3" - }, { - id: 21, - pId: 2, - text: "子项1", - value: 21, - title: "子项1" - }, { - id: 22, - pId: 2, - text: "子项2", - value: 22, - title: "子项2" - }, { - id: 31, - pId: 3, - text: "子项1", - value: 31, - title: "子项1" - }, { - id: 32, - pId: 3, - text: "子项2", - value: 32, - title: "子项2" - }, { - id: 33, - pId: 3, - text: "子项3", - value: 33, - title: "子项3" - }, { - id: 41, - pId: 4, - text: "子项1", - value: 41, - title: "子项1" - }, { - id: 42, - pId: 4, - text: "子项2", - value: 42, - title: "子项2" - }, { - id: 43, - pId: 4, - text: "子项3", - value: 43, - title: "子项3" - }, { - id: 51, - pId: 5, - text: "子项1", - value: 51, - title: "子项1" - }, { - id: 52, - pId: 5, - text: "子项2", - value: 52, - title: "子项2" - }, { - id: 61, - pId: 6, - text: "子项1", - value: 61, - title: "子项1" - }, { - id: 62, - pId: 6, - text: "子项2", - value: 62, - title: "子项2" - }, { - id: 71, - pId: 7, - text: "子项1", - value: 71, - title: "子项1" - }, { - id: 72, - pId: 7, - text: "子项2", - value: 72, - title: "子项2" - }]; + var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", items: [{ @@ -173,6 +26,13 @@ Demo.SelectTreeCombo = BI.inherit(BI.Widget, { BI.Msg.toast(self.tree.getValue()[0]); }, width: 300 + }, { + type: "bi.button", + text: "setVlaue (第二级文件1)", + handler: function () { + self.tree.setValue(["第二级文件1"]); + }, + width: 300 }], vgap: 20 } diff --git a/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js b/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js index 42f06052b..c18aa3598 100644 --- a/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js +++ b/demo/js/widget/singletree/demo.multilayer_single_tree_combo.js @@ -26,6 +26,13 @@ Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { BI.Msg.toast(self.tree.getValue()[0]); }, width: 300 + }, { + type: "bi.button", + text: "setVlaue (第二级文件1)", + handler: function () { + self.tree.setValue(["第二级文件1"]); + }, + width: 300 }], vgap: 20 } diff --git a/demo/js/widget/singletree/demo.single_tree_combo.js b/demo/js/widget/singletree/demo.single_tree_combo.js index 208dec66d..b683b64ee 100644 --- a/demo/js/widget/singletree/demo.single_tree_combo.js +++ b/demo/js/widget/singletree/demo.single_tree_combo.js @@ -8,6 +8,7 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, { render: function () { var self = this; + var items = BI.deepClone(Demo.CONSTANTS.TREE); return { type: "bi.horizontal_auto", items: [{ @@ -16,154 +17,7 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, { self.tree = _ref; }, text: "默认值", - items: [{ - id: 1, - text: "第一项", - value: 1, - isParent: true, - title: "第一项" - }, { - id: 2, - text: "第二项", - value: 1, - isParent: true, - title: "第二项" - }, { - id: 3, - text: "第三项", - value: 1, - isParent: true, - open: true, - title: "第三项" - }, { - id: 4, - text: "第四项", - value: 1, - isParent: true, - title: "第四项" - }, { - id: 5, - text: "第五项", - value: 1, - isParent: true, - title: "第五项" - }, { - id: 6, - text: "第六项", - value: 1, - isParent: true, - open: true, - title: "第六项" - }, { - id: 7, - text: "第七项", - value: 1, - isParent: true, - open: true, - title: "第七项" - }, { - id: 11, - pId: 1, - text: "子项1", - value: 11, - title: "子项1" - }, { - id: 12, - pId: 1, - text: "子项2", - value: 12, - title: "子项2" - }, { - id: 13, - pId: 1, - text: "子项3", - value: 13, - title: "子项3" - }, { - id: 21, - pId: 2, - text: "子项1", - value: 21, - title: "子项1" - }, { - id: 22, - pId: 2, - text: "子项2", - value: 22, - title: "子项2" - }, { - id: 31, - pId: 3, - text: "子项1", - value: 31, - title: "子项1" - }, { - id: 32, - pId: 3, - text: "子项2", - value: 32, - title: "子项2" - }, { - id: 33, - pId: 3, - text: "子项3", - value: 33, - title: "子项3" - }, { - id: 41, - pId: 4, - text: "子项1", - value: 41, - title: "子项1" - }, { - id: 42, - pId: 4, - text: "子项2", - value: 42, - title: "子项2" - }, { - id: 43, - pId: 4, - text: "子项3", - value: 43, - title: "子项3" - }, { - id: 51, - pId: 5, - text: "子项1", - value: 51, - title: "子项1" - }, { - id: 52, - pId: 5, - text: "子项2", - value: 52, - title: "子项2" - }, { - id: 61, - pId: 6, - text: "子项1", - value: 61, - title: "子项1" - }, { - id: 62, - pId: 6, - text: "子项2", - value: 62, - title: "子项2" - }, { - id: 71, - pId: 7, - text: "子项1", - value: 71, - title: "子项1" - }, { - id: 72, - pId: 7, - text: "子项2", - value: 72, - title: "子项2" - }], + items: items, width: 300 }, { type: "bi.button", @@ -172,6 +26,13 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, { BI.Msg.toast(self.tree.getValue()[0]); }, width: 300 + }, { + type: "bi.button", + text: "setVlaue (第二级文件1)", + handler: function () { + self.tree.setValue(["第二级文件1"]); + }, + width: 300 }], vgap: 20 } diff --git a/demo/js/widget/tree/demo.switch_tree.js b/demo/js/widget/tree/demo.switch_tree.js deleted file mode 100644 index 0e7a1788d..000000000 --- a/demo/js/widget/tree/demo.switch_tree.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Created by Dailer on 2017/7/13. - */ -Demo.SwitchTree = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { - - var items = BI.deepClone(Demo.CONSTANTS.TREE); - return { - type: "bi.horizontal_auto", - items: [{ - type: "bi.switch_tree", - items: items - },{ - type:"bi.button", - text:"getValue" - }] - } - } -}) - -BI.shortcut("demo.switch_tree", Demo.SwitchTree); \ No newline at end of file diff --git a/demo/js/widget/tree/demo.switchtree.js b/demo/js/widget/tree/demo.switchtree.js new file mode 100644 index 000000000..11ef12e91 --- /dev/null +++ b/demo/js/widget/tree/demo.switchtree.js @@ -0,0 +1,56 @@ +/** + * Created by Dailer on 2017/7/26. + */ + + +Demo.SwitchTree = BI.inherit(BI.Widget, { + + render: function () { + var self = this; + var tree = BI.createWidget({ + type: "bi.switch_tree", + items: BI.deepClone(Demo.CONSTANTS.TREE) + }); + + return { + type: "bi.vtape", + items: [{ + el: tree + }, { + el: { + type: "bi.button", + height: 25, + text: "点击切换", + handler: function () { + tree.switchSelect(); + } + }, + height: 25 + }, { + el: { + type: "bi.button", + height: 25, + text: "getValue", + handler: function () { + BI.Msg.alert("", JSON.stringify(tree.getValue())); + } + }, + height: 25 + }, { + el: { + type: "bi.button", + height: 25, + text: "setValue (第二级文件1)", + handler: function () { + tree.setValue(["第二级文件1"]); + } + }, + height: 25 + }], + width: 500, + hgap: 300 + } + } +}); + +BI.shortcut("demo.switch_tree", Demo.SwitchTree); \ No newline at end of file diff --git a/demo/less/main.less b/demo/less/main.less index e84c64816..e209e803e 100644 --- a/demo/less/main.less +++ b/demo/less/main.less @@ -67,4 +67,31 @@ body { .demo-clolor { color: #1a1a1a; +} + +.bi-progress-bar-processor { + transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + background: #3f8ce8; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; + overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; +} + +.bi-progress-text-bar-processor { + transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; +} + +.bi-progress-bar-bar { + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; } \ No newline at end of file diff --git a/docs/demo.css b/docs/demo.css index 31c09753a..51204de07 100644 --- a/docs/demo.css +++ b/docs/demo.css @@ -54,6 +54,30 @@ body { .demo-clolor { color: #1a1a1a; } +.bi-progress-bar-processor { + transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + background: #3f8ce8; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; + overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; +} +.bi-progress-text-bar-processor { + transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -o-transition: all 0.5s ease; +} +.bi-progress-bar-bar { + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; +} .demo-north { background-color: #3c8dbc; } diff --git a/src/widget/base/mask/cancel.loading.mask.js b/src/widget/base/mask/cancel.loading.mask.js new file mode 100644 index 000000000..57320ba2d --- /dev/null +++ b/src/widget/base/mask/cancel.loading.mask.js @@ -0,0 +1,74 @@ +/** + * @class BI.LoadingCancelMask + * @extend BI.Widget + * 带有取消按钮的正在加载mask + */ +BI.LoadingCancelMask = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.LoadingCancelMask.superclass._defaultConfig.apply(this, arguments), {}) + }, + + _init: function () { + BI.LoadingCancelMask.superclass._init.apply(this, arguments); + var self = this, o = this.options; + var cancelButton = BI.createWidget({ + type: "bi.button", + level: "ignore", + width: 100, + height: 30, + text: BI.i18nText("BI-Basic_Cancel") + }); + cancelButton.on(BI.Button.EVENT_CHANGE, function () { + self.fireEvent(BI.LoadingCancelMask.EVENT_VALUE_CANCEL); + self.destroy(); + }); + var mask = BI.Maskers.create(this.getName(), o.masker); + BI.createWidget({ + type: "bi.absolute", + element: mask, + items: [{ + el: { + type: "bi.center_adapt", + cls: "bi-z-index-mask bi-loading-mask-content", + items: [{ + el: { + type: "bi.vertical", + items: [{ + type: "bi.center_adapt", + cls: "loading-bar-icon", + items: [{ + type: "bi.icon", + width: 208, + height: 30 + }] + }, { + type: "bi.label", + cls: "loading-bar-label", + text: o.text, + height: 30 + }, { + type: "bi.center_adapt", + items: [cancelButton] + }], + vgap: 10 + } + }] + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + }] + }); + BI.Maskers.show(this.getName()); + BI.nextTick(function () { + BI.Maskers.show(self.getName()); + }); + }, + + destroy: function () { + BI.Maskers.remove(this.getName()); + } +}); +BI.LoadingCancelMask.EVENT_VALUE_CANCEL = "EVENT_VALUE_CANCEL"; +BI.shortcut("bi.loading_cancel_mask", BI.LoadingCancelMask); \ No newline at end of file diff --git a/src/widget/base/mask/loading.background.js b/src/widget/base/mask/loading.background.js new file mode 100644 index 000000000..f9b59561b --- /dev/null +++ b/src/widget/base/mask/loading.background.js @@ -0,0 +1,33 @@ +/** + * @class BI.LoadingBackground + * @extend BI.Widget + * 正在加载mask层 + */ +BI.LoadingBackground = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.LoadingBackground.superclass._defaultConfig.apply(this, arguments), { + baseCls: "", + backgroundCls: "loading-background-e50" + }) + }, + + _init: function () { + BI.LoadingBackground.superclass._init.apply(this, arguments); + var self = this, o = this.options; + var mask = BI.Maskers.create(this.getName(), o.masker, {offset: o.offset, container: o.container}); + BI.createWidget({ + type: "bi.center_adapt", + element: mask, + cls: "bi-loading-mask " + o.backgroundCls + }); + BI.Maskers.show(this.getName()); + BI.nextTick(function () { + BI.Maskers.show(self.getName()); + }); + }, + + destroy: function () { + BI.Maskers.remove(this.getName()); + } +}); +BI.shortcut("bi.loading_background", BI.LoadingBackground); \ No newline at end of file diff --git a/src/widget/base/mask/loading.mask.js b/src/widget/base/mask/loading.mask.js new file mode 100644 index 000000000..8dbfd1028 --- /dev/null +++ b/src/widget/base/mask/loading.mask.js @@ -0,0 +1,58 @@ +/** + * @class BI.LoadingMask + * @extend BI.Widget + * 正在加载mask层 + */ +BI.LoadingMask = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.LoadingMask.superclass._defaultConfig.apply(this, arguments), { + baseCls: "" + }); + }, + + _init: function () { + BI.LoadingMask.superclass._init.apply(this, arguments); + var self = this, o = this.options; + var mask = BI.Maskers.create(this.getName(), o.masker, {offset: o.offset, container: o.container}); + BI.createWidget({ + type: "bi.absolute", + element: mask, + items: [{ + el: { + type: "bi.center_adapt", + cls: "bi-z-index-mask bi-loading-mask-content", + items: [{ + type: "bi.vertical", + items: [{ + type: "bi.center_adapt", + cls: "loading-bar-icon", + items: [{ + type: "bi.icon", + width: 208, + height: 30 + }] + }, { + type: "bi.label", + cls: "loading-bar-label", + text: o.text, + height: 30 + }] + }] + }, + top: 0, + left: 0, + bottom: 0, + right: 0 + }] + }); + BI.Maskers.show(this.getName()); + BI.nextTick(function () { + BI.Maskers.show(self.getName()); + }); + }, + + destroy: function () { + BI.Maskers.remove(this.getName()); + } +}); +BI.shortcut("bi.loading_mask", BI.LoadingMask); \ No newline at end of file diff --git a/src/widget/base/segment/button.line.segment.js b/src/widget/base/segment/button.line.segment.js new file mode 100644 index 000000000..44575d8d5 --- /dev/null +++ b/src/widget/base/segment/button.line.segment.js @@ -0,0 +1,68 @@ +/** + * 一个button选中的时候下面有条线 + * + * Created by GUY on 2015/9/30. + * @class BI.LineSegmentButton + * @extends BI.BasicButton + */ +BI.LineSegmentButton = BI.inherit(BI.BasicButton, { + + _defaultConfig: function () { + var conf = BI.LineSegmentButton.superclass._defaultConfig.apply(this, arguments); + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + ' bi-line-segment-button bi-list-item-effect', + once: true, + readonly: true, + hgap: 10, + height: 25 + }) + }, + + _init: function () { + BI.LineSegmentButton.superclass._init.apply(this, arguments); + var o = this.options, self = this; + this.text = BI.createWidget({ + type: "bi.label", + element: this, + text: o.text, + height: o.height, + value: o.value, + hgap: o.hgap + }); + + this.line = BI.createWidget({ + type: "bi.layout", + cls: "line-segment-button-line", + height: 3 + }); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.line, + left: 0, + right: 0, + bottom: 0 + }] + }) + }, + + setSelected: function (v) { + BI.LineSegmentButton.superclass.setSelected.apply(this, arguments); + if (!!v) { + this.line.element.addClass("bi-high-light-background"); + } else { + this.line.element.removeClass("bi-high-light-background"); + } + }, + + setText: function (text) { + BI.LineSegmentButton.superclass.setText.apply(this, arguments); + this.text.setText(text); + }, + + destroy: function () { + BI.LineSegmentButton.superclass.destroy.apply(this, arguments); + } +}); +BI.shortcut('bi.line_segment_button', BI.LineSegmentButton); \ No newline at end of file diff --git a/src/widget/base/segment/segment.line.js b/src/widget/base/segment/segment.line.js new file mode 100644 index 000000000..5674801cf --- /dev/null +++ b/src/widget/base/segment/segment.line.js @@ -0,0 +1,57 @@ +/** + * 另一套风格的单选按钮组 + * + * Created by GUY on 2015/9/30. + * @class BI.LineSegment + * @extends BI.Widget + */ +BI.LineSegment = BI.inherit(BI.Widget, { + _defaultConfig: function () { + return BI.extend(BI.LineSegment.superclass._defaultConfig.apply(this, arguments), { + baseCls: "bi-line-segment bi-border-bottom", + items: [], + height: 30 + }); + }, + _init: function () { + BI.LineSegment.superclass._init.apply(this, arguments); + var self = this, o = this.options; + if (BI.isNumber(o.height)) { + this.element.css({height: o.height - 1, lineHeight: (o.height - 1) + 'px'}); + } + this.buttonGroup = BI.createWidget({ + element: this, + type: "bi.button_group", + items: BI.createItems(o.items, { + type: "bi.line_segment_button", + height: o.height - 1 + }), + layout: [ + { + type: "bi.center" + } + ] + }); + this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function(){ + self.fireEvent(BI.Controller.EVENT_CHANGE, arguments) + }); + this.buttonGroup.on(BI.ButtonGroup.EVENT_CHANGE, function () { + self.fireEvent(BI.LineSegment.EVENT_CHANGE) + }) + }, + + setValue: function (v) { + this.buttonGroup.setValue(v); + }, + + setEnabledValue: function (v) { + this.buttonGroup.setEnabledValue(v); + }, + + + getValue: function () { + return this.buttonGroup.getValue(); + } +}); +BI.LineSegment.EVENT_CHANGE = "EVENT_CHANGE"; +BI.shortcut('bi.line_segment', BI.LineSegment); \ No newline at end of file diff --git a/src/widget/base/tip/tip.helper.js b/src/widget/base/tip/tip.helper.js new file mode 100644 index 000000000..dd13f06d6 --- /dev/null +++ b/src/widget/base/tip/tip.helper.js @@ -0,0 +1,46 @@ +/** + * 拖拽字段的helper + * Created by roy on 15/10/13. + */ +BI.Helper = BI.inherit(BI.Tip, { + _defaultConfig: function () { + return BI.extend(BI.Helper.superclass._defaultConfig.apply(this, arguments), { + extraCls: "bi-helper", + text: "", + value: "" + }) + }, + + _init: function () { + BI.Helper.superclass._init.apply(this, arguments); + this.populate(); + }, + + modifyContent: function(widget) { + this.empty(); + BI.createWidget({ + type: "bi.left", + element: this, + cls: "dragging-modify", + items: [widget], + lgap: 15 + }); + }, + + populate: function () { + var o = this.options; + this.element.data({helperWidget: this}); + this.empty(); + BI.createWidget({ + element: this, + type: "bi.label", + textAlign: "center", + textHeight: 20, + hgap: 5, + text: o.text, + value: o.value + }); + this.element.removeClass("dragging-modify"); + } +}); +BI.shortcut("bi.helper", BI.Helper); \ No newline at end of file diff --git a/src/widget/base/toolbar/toolbar.progress.bar.js b/src/widget/base/toolbar/toolbar.progress.bar.js new file mode 100644 index 000000000..ef689fd9f --- /dev/null +++ b/src/widget/base/toolbar/toolbar.progress.bar.js @@ -0,0 +1,50 @@ +/** + * guy + * 复选导航条 + * Created by GUY on 2015/12/24. + * @class BI.ProgressBarBar + * @extends BI.BasicButton + */ +BI.ProgressBarBar = BI.inherit(BI.Single, { + _defaultConfig: function () { + return BI.extend(BI.ProgressBarBar.superclass._defaultConfig.apply(this, arguments), { + extraCls: "bi-progress-bar-bar bi-background", + height: 24 + }) + }, + _init: function () { + BI.ProgressBarBar.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.svg = BI.createWidget({ + type: "bi.svg", + width: 6, + height: 6 + }); + this.svg.circle(3, 3, 3).attr({fill: "#ffffff", "stroke": ""}); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.svg, + right: 10, + top: 9 + }] + }); + this.processor = BI.createWidget({ + type: "bi.progress_bar_processor", + width: "0%", + height: o.height + }); + BI.createWidget({ + type: "bi.vertical", + element: this, + items: [this.processor] + }); + }, + + setValue: function (process) { + this.processor.setValue(process); + + } +}); +BI.shortcut("bi.progress_bar_bar", BI.ProgressBarBar); \ No newline at end of file diff --git a/src/widget/base/toolbar/toolbar.progress.js b/src/widget/base/toolbar/toolbar.progress.js new file mode 100644 index 000000000..b635d28c9 --- /dev/null +++ b/src/widget/base/toolbar/toolbar.progress.js @@ -0,0 +1,52 @@ +/** + * guy + * 复选导航条 + * Created by GUY on 2015/12/24. + * @class BI.ProgressBar + * @extends BI.BasicButton + */ +BI.ProgressBar = BI.inherit(BI.Single, { + _defaultConfig: function () { + return BI.extend(BI.ProgressBar.superclass._defaultConfig.apply(this, arguments), { + extraCls: "bi-progress-bar", + height: 24 + }) + }, + _init: function () { + BI.ProgressBar.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.bar = BI.createWidget({ + type: "bi.progress_bar_bar", + height: o.height + }); + this.label = BI.createWidget({ + type: "bi.label", + cls: "progress-bar-label", + width: 50, + height: o.height, + value: "0%" + }); + BI.createWidget({ + type: "bi.htape", + element: this, + items: [{ + el: this.bar + }, { + el: this.label, + width: 50 + }] + }) + }, + + setValue: function (process) { + if (process >= 100) { + process = 100; + this.label.element.addClass("success"); + } else { + this.label.element.removeClass("success"); + } + this.label.setValue(process + "%"); + this.bar.setValue(process); + } +}); +BI.shortcut("bi.progress_bar", BI.ProgressBar); \ No newline at end of file diff --git a/src/widget/base/toolbar/toolbar.progress.processor.js b/src/widget/base/toolbar/toolbar.progress.processor.js new file mode 100644 index 000000000..023b61013 --- /dev/null +++ b/src/widget/base/toolbar/toolbar.progress.processor.js @@ -0,0 +1,50 @@ +/** + * guy + * 复选导航条 + * Created by GUY on 2015/12/24. + * @class BI.ProgressBarProcessor + * @extends BI.BasicButton + */ +BI.ProgressBarProcessor = BI.inherit(BI.Single, { + _defaultConfig: function () { + return BI.extend(BI.ProgressBarProcessor.superclass._defaultConfig.apply(this, arguments), { + extraCls: "bi-progress-bar-processor", + height: 24 + }) + }, + _init: function () { + BI.ProgressBarProcessor.superclass._init.apply(this, arguments); + var self = this, o = this.options; + this.svg = BI.createWidget({ + type: "bi.svg", + width: 12, + height: 12 + }); + this.svg.circle(6, 6, 6).attr({fill: "#d4dadd", "stroke": ""}); + + this.dot = this.svg.circle(6, 6, 3).attr({fill: "#ffffff", "stroke": ""}).hide(); + BI.createWidget({ + type: "bi.absolute", + element: this, + items: [{ + el: this.svg, + right: 7, + top: 6 + }] + }); + }, + + setValue: function (process) { + if (process >= 100) { + process = 100; + this.dot.show(); + this.element.addClass("success"); + } else { + this.dot.hide(); + this.element.removeClass("success"); + } + this.element.width(process + "%"); + } +}); +BI.ProgressBarProcessor.EVENT_CHANGE = "ProgressBarProcessor.EVENT_CHANGE"; +BI.shortcut("bi.progress_bar_processor", BI.ProgressBarProcessor); \ No newline at end of file