fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

BI-6615 make some widget specific ,add base widget

es6
刘荣歆 8 years ago
parent
e150687a00
commit
22c718ecdf
25 changed files with 1111 additions and 328 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      demo/js/config/widget.js
  2. 32
      demo/js/widget/basewidget/demo.items.js
  3. 56
      demo/js/widget/basewidget/demo.mask.loading.js
  4. 36
      demo/js/widget/basewidget/demo.nodes.js
  5. 219
      demo/js/widget/basewidget/demo.panes.js
  6. 69
      demo/js/widget/basewidget/demo.progress_bar.js
  7. 49
      demo/js/widget/basewidget/demo.sagments.js
  8. 14
      demo/js/widget/basewidget/demo.tips.js
  9. 7
      demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js
  10. 156
      demo/js/widget/selecttree/demo.select_tree_combo.js
  11. 7
      demo/js/widget/singletree/demo.multilayer_single_tree_combo.js
  12. 157
      demo/js/widget/singletree/demo.single_tree_combo.js
  13. 24
      demo/js/widget/tree/demo.switch_tree.js
  14. 56
      demo/js/widget/tree/demo.switchtree.js
  15. 27
      demo/less/main.less
  16. 24
      docs/demo.css
  17. 74
      src/widget/base/mask/cancel.loading.mask.js
  18. 33
      src/widget/base/mask/loading.background.js
  19. 58
      src/widget/base/mask/loading.mask.js
  20. 68
      src/widget/base/segment/button.line.segment.js
  21. 57
      src/widget/base/segment/segment.line.js
  22. 46
      src/widget/base/tip/tip.helper.js
  23. 50
      src/widget/base/toolbar/toolbar.progress.bar.js
  24. 52
      src/widget/base/toolbar/toolbar.progress.js
  25. 50
      src/widget/base/toolbar/toolbar.progress.processor.js

18
demo/js/config/widget.js
Unescape View File

@ -17,31 +17,31 @@ Demo.WIDGET_CONFIG = [{
}, { }, {
pId: 420, pId: 420,
text: "各种items", text: "各种items",
value: "items" value: "demo.items"
}, { }, {
pId: 420, pId: 420,
text: "各种节点node", text: "各种节点node",
value: "nodes" value: "demo.nodes"
}, { }, {
pId: 420, pId: 420,
text: "各种segment", text: "各种segment",
value: "segments" value: "demo.segments"
}, { }, {
pId: 420, pId: 420,
text: "各种面板", text: "各种面板",
value: "panes" value: "demo.panes"
}, { }, {
pId: 420, pId: 420,
text: "bi.loading_mask", text: "bi.loading_mask",
value: "loadingmask" value: "demo.loading_mask"
}, { }, {
pId: 420, pId: 420,
text: "可以切换的树", text: "可以切换的树",
value: "switch_tree" value: "demo.switch_tree"
}, { }, {
pId: 420, pId: 420,
text: "进度条", text: "进度条",
value: "progressbar" value: "demo.progress_bar"
}, { }, {
pId: 1, pId: 1,
text: "bi.text_editor", text: "bi.text_editor",
@ -54,6 +54,10 @@ Demo.WIDGET_CONFIG = [{
pId: 400, pId: 400,
text: "bi.multi_tree_combo", text: "bi.multi_tree_combo",
value: "demo.multi_tree_combo" value: "demo.multi_tree_combo"
}, {
pId: 400,
text: "bi.switch_tree",
value: "demo.switch_tree"
}, { }, {
id: 401, id: 401,
pId: 4, pId: 4,

32
demo/js/widget/basewidget/demo.items.js
Unescape View File

@ -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);

56
demo/js/widget/basewidget/demo.mask.loading.js
Unescape View File

@ -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);

36
demo/js/widget/basewidget/demo.nodes.js
Unescape View File

@ -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);

219
demo/js/widget/basewidget/demo.panes.js
Unescape View File

@ -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);

69
demo/js/widget/basewidget/demo.progress_bar.js
Unescape View File

@ -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);

49
demo/js/widget/basewidget/demo.sagments.js
Unescape View File

@ -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);

14
demo/js/widget/basewidget/demo.tips.js
Unescape View File

@ -134,11 +134,23 @@ Demo.Tips = BI.inherit(BI.Widget, {
vgap: 20 vgap: 20
}); });
var helper = BI.createWidget({
type: "bi.left",
items: [{
el: {
type: 'bi.helper',
text: '拖拽提示',
value: "拖拽提示",
height: 30,
}
}]
});
return { return {
type: "bi.horizontal_auto", type: "bi.horizontal_auto",
vgap: 20, vgap: 20,
hgap: 20, hgap: 20,
items: [bubble, title, toast] items: [bubble, title, toast, helper]
} }
} }
}); });

7
demo/js/widget/selecttree/demo.multilayer_select_tree_combo.js
Unescape View File

@ -26,6 +26,13 @@ Demo.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
BI.Msg.toast(self.tree.getValue()[0]); BI.Msg.toast(self.tree.getValue()[0]);
}, },
width: 300 width: 300
}, {
type: "bi.button",
text: "setVlaue (第二级文件1)",
handler: function () {
self.tree.setValue(["第二级文件1"]);
},
width: 300
}], }],
vgap: 20 vgap: 20
} }

156
demo/js/widget/selecttree/demo.select_tree_combo.js
Unescape View File

@ -8,154 +8,7 @@ Demo.SelectTreeCombo = BI.inherit(BI.Widget, {
render: function () { render: function () {
var self = this; var self = this;
var items = [{ var items = BI.deepClone(Demo.CONSTANTS.TREE);
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"
}];
return { return {
type: "bi.horizontal_auto", type: "bi.horizontal_auto",
items: [{ items: [{
@ -173,6 +26,13 @@ Demo.SelectTreeCombo = BI.inherit(BI.Widget, {
BI.Msg.toast(self.tree.getValue()[0]); BI.Msg.toast(self.tree.getValue()[0]);
}, },
width: 300 width: 300
}, {
type: "bi.button",
text: "setVlaue (第二级文件1)",
handler: function () {
self.tree.setValue(["第二级文件1"]);
},
width: 300
}], }],
vgap: 20 vgap: 20
} }

7
demo/js/widget/singletree/demo.multilayer_single_tree_combo.js
Unescape View File

@ -26,6 +26,13 @@ Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
BI.Msg.toast(self.tree.getValue()[0]); BI.Msg.toast(self.tree.getValue()[0]);
}, },
width: 300 width: 300
}, {
type: "bi.button",
text: "setVlaue (第二级文件1)",
handler: function () {
self.tree.setValue(["第二级文件1"]);
},
width: 300
}], }],
vgap: 20 vgap: 20
} }

157
demo/js/widget/singletree/demo.single_tree_combo.js
Unescape View File

@ -8,6 +8,7 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, {
render: function () { render: function () {
var self = this; var self = this;
var items = BI.deepClone(Demo.CONSTANTS.TREE);
return { return {
type: "bi.horizontal_auto", type: "bi.horizontal_auto",
items: [{ items: [{
@ -16,154 +17,7 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, {
self.tree = _ref; self.tree = _ref;
}, },
text: "默认值", text: "默认值",
items: [{ items: 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"
}],
width: 300 width: 300
}, { }, {
type: "bi.button", type: "bi.button",
@ -172,6 +26,13 @@ Demo.SingleTreeCombo = BI.inherit(BI.Widget, {
BI.Msg.toast(self.tree.getValue()[0]); BI.Msg.toast(self.tree.getValue()[0]);
}, },
width: 300 width: 300
}, {
type: "bi.button",
text: "setVlaue (第二级文件1)",
handler: function () {
self.tree.setValue(["第二级文件1"]);
},
width: 300
}], }],
vgap: 20 vgap: 20
} }

24
demo/js/widget/tree/demo.switch_tree.js
Unescape View File

@ -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);

56
demo/js/widget/tree/demo.switchtree.js
Unescape View File

@ -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);

27
demo/less/main.less
Unescape View File

@ -68,3 +68,30 @@ body {
.demo-clolor { .demo-clolor {
color: #1a1a1a; 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;
}

24
docs/demo.css
Unescape View File

@ -54,6 +54,30 @@ body {
.demo-clolor { .demo-clolor {
color: #1a1a1a; 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 { .demo-north {
background-color: #3c8dbc; background-color: #3c8dbc;
} }

74
src/widget/base/mask/cancel.loading.mask.js
Unescape View File

@ -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);

33
src/widget/base/mask/loading.background.js
Unescape View File

@ -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);

58
src/widget/base/mask/loading.mask.js
Unescape View File

@ -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);

68
src/widget/base/segment/button.line.segment.js
Unescape View File

@ -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);

57
src/widget/base/segment/segment.line.js
Unescape View File

@ -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);

46
src/widget/base/tip/tip.helper.js
Unescape View File

@ -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);

50
src/widget/base/toolbar/toolbar.progress.bar.js
Unescape View File

@ -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);

52
src/widget/base/toolbar/toolbar.progress.js
Unescape View File

@ -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);

50
src/widget/base/toolbar/toolbar.progress.processor.js
Unescape View File

@ -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);
Write Preview
Loading…
Cancel
Save