diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 5137e3901b..0b880d7b56 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -26,22 +26,10 @@ Demo.WIDGET_CONFIG = [{ pId: 420, text: "各种segment", value: "demo.segments" - }, { - pId: 420, - text: "各种面板", - value: "demo.panes" - }, { - pId: 420, - text: "bi.loading_mask", - value: "demo.loading_mask" }, { pId: 420, text: "可以切换的树", value: "demo.switch_tree" - }, { - pId: 420, - text: "进度条", - value: "demo.progress_bar" }, { pId: 1, text: "bi.text_editor", diff --git a/demo/js/widget/basewidget/demo.sagments.js b/demo/js/widget/basewidget/demo.sagments.js index 3083209d74..cab0c30de2 100644 --- a/demo/js/widget/basewidget/demo.sagments.js +++ b/demo/js/widget/basewidget/demo.sagments.js @@ -25,20 +25,6 @@ Demo.Segments = BI.inherit(BI.Widget, { 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 diff --git a/demo/js/widget/basewidget/demo.tips.js b/demo/js/widget/basewidget/demo.tips.js index ab6cd9c11b..7340ce8a4e 100644 --- a/demo/js/widget/basewidget/demo.tips.js +++ b/demo/js/widget/basewidget/demo.tips.js @@ -134,23 +134,11 @@ 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, helper] + items: [bubble, title, toast] } } }); diff --git a/docs/demo.js b/docs/demo.js index 6cc2630fec..b8f9039546 100644 --- a/docs/demo.js +++ b/docs/demo.js @@ -3341,6 +3341,38 @@ Demo.COMPONENT_CONFIG = [{ id: 4, text: "详细控件", open: true + }, { + pId: 4, + id: 420, + text: '各种小控件', + }, { + pId: 420, + text: "各种通用按钮", + value: "demo.buttons" + }, { + pId: 420, + text: "各种提示性信息", + value: "demo.tips" + }, { + pId: 420, + text: "各种items", + value: "demo.items" + }, { + pId: 420, + text: "各种节点node", + value: "demo.nodes" + }, { + pId: 420, + text: "各种segment", + value: "demo.segments" + }, { + pId: 420, + text: "可以切换的树", + value: "demo.switch_tree" + }, { + pId: 1, + text: "bi.text_editor", + value: "text_editor" }, { id: 400, pId: 4, @@ -3349,6 +3381,10 @@ Demo.COMPONENT_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, @@ -6293,57 +6329,560 @@ Demo.RelationView = BI.inherit(BI.Widget, { } }); BI.shortcut("demo.interactive_arrangement", Demo.RelationView);/** - * Created by Dailer on 2017/7/12. + * Created by Dailer on 2017/7/25. */ -Demo.FormulaCombo = BI.inherit(BI.Widget, { + + +Demo.Buttons = BI.inherit(BI.Widget, { props: { - baseCls: "" + baseCls: "demo-button" }, - render: function () { + var items = [{ + el: { + type: 'bi.button', + text: '一般按钮', + level: 'common', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示成功状态按钮', + level: 'success', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '表示警告状态的按钮', + level: 'warning', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示忽略状态的按钮', + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '普通灰化按钮', + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '忽略状态灰化按钮', + disabled: true, + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '一般按钮', + block: true, + level: 'common', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示成功状态按钮', + block: true, + level: 'success', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '表示警告状态的按钮', + block: true, + level: 'warning', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示忽略状态的按钮', + block: true, + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '普通灰化按钮', + block: true, + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '忽略状态灰化按钮', + block: true, + disabled: true, + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + block: true, + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '一般按钮', + clear: true, + level: 'common', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示成功状态按钮', + clear: true, + level: 'success', + height: 30 + } + }, + { + el: { + type: 'bi.button', + text: '表示警告状态的按钮', + clear: true, + level: 'warning', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '表示忽略状态的按钮', + clear: true, + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '普通灰化按钮', + clear: true, + disabled: true, + level: 'success', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '忽略状态灰化按钮', + clear: true, + disabled: true, + level: 'ignore', + height: 30 + } + }, { + el: { + type: 'bi.button', + text: '带图标的按钮', + clear: true, + //level: 'ignore', + iconClass: "close-font", + height: 30 + } + }, { + el: { + type: 'bi.text_button', + text: '文字按钮', + height: 30 + } + } + ]; + BI.each(items, function (i, item) { + item.el.handler = function () { + BI.Msg.alert('按钮', this.options.text); + } + }); + return { + type: "bi.left", + vgap: 100, + hgap: 20, + items: items + } + } +}); +BI.shortcut("demo.buttons", Demo.Buttons);/** + * Created by Dailer on 2017/7/25. + */ - var self = this; +Demo.Items = BI.inherit(BI.Widget, { + render: function () { return { - type: "bi.horizontal_auto", + type: "bi.vertical", items: [{ - type: "bi.formula_combo", - fieldItems: [{ - text: "A", - value: "A", - fieldType: 16 - }], - width: 200, - height: 30 + 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: "复选项" }], - vgap: 20 + hgap: 300 } } -}) +}); -BI.shortcut("demo.formula_combo", Demo.FormulaCombo);/** - * Created by Dailer on 2017/7/12. + +BI.shortcut("demo.items", Demo.Items);/** + * Created by Dailer on 2017/7/25. */ -Demo.IconCombo = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, - render: function () { +Demo.LoadingMask = BI.inherit(BI.Widget, { + render: function () { + var vessel = this; var self = this; - - - return { - type: "bi.horizontal_auto", + var left = BI.createWidget({ + type: "bi.center_adapt", items: [{ - type: "bi.icon_combo", - ref:function(_ref){ - self.refs=_ref; - }, - // iconClass: "pull-down-ha-font", - 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);/** + * 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);/** + * 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 + }] + }], + hgap: 50, + vgap: 20 + } + } +}); + +BI.shortcut("demo.segments", Demo.Segments);/** + * Created by Dailer on 2017/7/25. + */ + +Demo.Tips = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-tips" + }, + render: function () { + var btns = []; + var bubble = BI.createWidget({ + type: "bi.left", + items: [{ + el: { + type: 'bi.button', + text: 'bubble测试', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble1", "bubble测试", this); + btns.push("singleBubble1"); + } + } + }, { + el: { + type: 'bi.button', + text: 'bubble测试(居中显示)', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble2", "bubble测试", this, { + offsetStyle: "center" + }); + btns.push("singleBubble2"); + } + } + }, { + el: { + type: 'bi.button', + text: 'bubble测试(右边显示)', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble3", "bubble测试", this, { + offsetStyle: "right" + }); + btns.push("singleBubble3"); + } + } + }, { + el: { + type: 'bi.button', + text: '隐藏所有 bubble', + height: 30, + handler: function () { + BI.each(btns, function (index, value) { + BI.Bubbles.hide(value); + }) + } + } + }], + hgap: 20 + }); + + var title = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.label", + cls: "layout-bg1", + height: 50, + title: "title提示", + text: "移上去有title提示", + textAlign: "center" + }, { + type: "bi.label", + cls: "layout-bg6", + height: 50, + disabled: true, + warningTitle: "title错误提示", + text: "移上去有title错误提示", + textAlign: "center" + }, { + type: "bi.label", + cls: "layout-bg2", + height: 50, + disabled: true, + tipType: "success", + title: "自定义title提示效果", + warningTitle: "自定义title提示效果", + text: "自定义title提示效果", + textAlign: "center" + }], + hgap: 20, + vgap: 20 + }); + + var toast = BI.createWidget({ + type: "bi.vertical", + items: [{ + el: { + type: 'bi.button', + text: '简单Toast测试', + height: 30, + handler: function () { + BI.Msg.toast("这是一条简单的数据"); + } + } + }, { + el: { + type: 'bi.button', + text: '很长的Toast测试', + height: 30, + handler: function () { + BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据") + } + } + }, { + el: { + type: 'bi.button', + text: '非常长的Toast测试', + height: 30, + handler: function () { + BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据") + } + } + }, { + el: { + type: 'bi.button', + text: '错误提示Toast测试', + level: "warning", + height: 30, + handler: function () { + BI.Msg.toast("错误提示Toast测试", "warning"); + } + } + }], + vgap: 20 + }); + + return { + type: "bi.horizontal_auto", + vgap: 20, + hgap: 20, + items: [bubble, title, toast] + } + } +}); +BI.shortcut("demo.tips", Demo.Tips);/** + * Created by Dailer on 2017/7/12. + */ +Demo.FormulaCombo = BI.inherit(BI.Widget, { + props: { + baseCls: "" + }, + + render: function () { + + var self = this; + + + return { + type: "bi.horizontal_auto", + items: [{ + type: "bi.formula_combo", + fieldItems: [{ + text: "A", + value: "A", + fieldType: 16 + }], + width: 200, + height: 30 + }], + vgap: 20 + } + } +}) + +BI.shortcut("demo.formula_combo", Demo.FormulaCombo);/** + * Created by Dailer on 2017/7/12. + */ +Demo.IconCombo = BI.inherit(BI.Widget, { + props: { + baseCls: "" + }, + + render: function () { + + var self = this; + + + return { + type: "bi.horizontal_auto", + items: [{ + type: "bi.icon_combo", + ref:function(_ref){ + self.refs=_ref; + }, + // iconClass: "pull-down-ha-font", + items: [{ value: "第一项", iconClass: "delete-font" }, { @@ -8242,6 +8781,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 } @@ -8258,154 +8804,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: [{ @@ -8423,6 +8822,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 } @@ -8457,6 +8863,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 } @@ -8473,6 +8886,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: [{ @@ -8481,154 +8895,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", @@ -8637,6 +8904,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 } @@ -9475,27 +9749,59 @@ Demo.TimeInterval = BI.inherit(BI.Widget, { }) BI.shortcut("demo.time_interval", Demo.TimeInterval);/** - * Created by Dailer on 2017/7/13. + * Created by Dailer on 2017/7/26. */ + + Demo.SwitchTree = BI.inherit(BI.Widget, { - props: { - baseCls: "" - }, + render: function () { + var self = this; + var tree = BI.createWidget({ + type: "bi.switch_tree", + items: BI.deepClone(Demo.CONSTANTS.TREE) + }); - var items = BI.deepClone(Demo.CONSTANTS.TREE); return { - type: "bi.horizontal_auto", + type: "bi.vtape", items: [{ - type: "bi.switch_tree", - items: items - },{ - type:"bi.button", - text:"getValue" - }] + 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);/** * Created by Dailer on 2017/7/11.