From e150687a007d310d7b2282b7913369bb41d77c4d 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 10:32:43 +0800 Subject: [PATCH] add some widget --- demo/js/config/widget.js | 44 +++++ demo/js/widget/basewidget/demo.buttons.js | 205 ++++++++++++++++++++++ demo/js/widget/basewidget/demo.tips.js | 145 +++++++++++++++ 3 files changed, 394 insertions(+) create mode 100644 demo/js/widget/basewidget/demo.buttons.js create mode 100644 demo/js/widget/basewidget/demo.tips.js diff --git a/demo/js/config/widget.js b/demo/js/config/widget.js index 3dd24b9ae..c74370b08 100644 --- a/demo/js/config/widget.js +++ b/demo/js/config/widget.js @@ -2,6 +2,50 @@ Demo.WIDGET_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: "items" + }, { + pId: 420, + text: "各种节点node", + value: "nodes" + }, { + pId: 420, + text: "各种segment", + value: "segments" + }, { + pId: 420, + text: "各种面板", + value: "panes" + }, { + pId: 420, + text: "bi.loading_mask", + value: "loadingmask" + }, { + pId: 420, + text: "可以切换的树", + value: "switch_tree" + }, { + pId: 420, + text: "进度条", + value: "progressbar" + }, { + pId: 1, + text: "bi.text_editor", + value: "text_editor" }, { id: 400, pId: 4, diff --git a/demo/js/widget/basewidget/demo.buttons.js b/demo/js/widget/basewidget/demo.buttons.js new file mode 100644 index 000000000..dbddc3b0e --- /dev/null +++ b/demo/js/widget/basewidget/demo.buttons.js @@ -0,0 +1,205 @@ +/** + * Created by Dailer on 2017/7/25. + */ + + +Demo.Buttons = BI.inherit(BI.Widget, { + props: { + 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); \ No newline at end of file diff --git a/demo/js/widget/basewidget/demo.tips.js b/demo/js/widget/basewidget/demo.tips.js new file mode 100644 index 000000000..7340ce8a4 --- /dev/null +++ b/demo/js/widget/basewidget/demo.tips.js @@ -0,0 +1,145 @@ +/** + * 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); \ No newline at end of file