forked from fanruan/fineui
刘荣歆
8 years ago
25 changed files with 1111 additions and 328 deletions
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
@ -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); |
Loading…
Reference in new issue