forked from fanruan/fineui
Browse Source
* commit '0cf31f381266a55d833b64ef03d81fe87fe9a295': no message 解决区间滑块数值精度问题 no message no message 添加单值滑块和区间滑块 no message no message no message no message no message 完善 FineUI Demo 向详细控件中增加若干控件es6
guy
7 years ago
72 changed files with 71065 additions and 33303 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,48 +1,269 @@ |
|||||||
Demo.WIDGET_CONFIG = [{ |
Demo.WIDGET_CONFIG = [{ |
||||||
id: 4, |
id: 4, |
||||||
text: "详细控件" |
text: "详细控件", |
||||||
}, { |
open: true |
||||||
id: 401, |
}, { |
||||||
pId: 4, |
id: 400, |
||||||
text: "table" |
pId: 4, |
||||||
}, { |
text: "tree" |
||||||
pId: 401, |
}, { |
||||||
text: "bi.preview_table", |
pId: 400, |
||||||
value: "demo.preview_table" |
text: "bi.multi_tree_combo", |
||||||
}, { |
value: "demo.multi_tree_combo" |
||||||
pId: 401, |
}, { |
||||||
text: "bi.responsive_table", |
id: 401, |
||||||
value: "demo.responsive_table" |
pId: 4, |
||||||
}, { |
text: "table" |
||||||
pId: 401, |
}, { |
||||||
text: "bi.sequence_table", |
pId: 401, |
||||||
value: "demo.sequence_table" |
text: "bi.preview_table", |
||||||
}, { |
value: "demo.preview_table" |
||||||
pId: 401, |
}, { |
||||||
text: "bi.page_table", |
pId: 401, |
||||||
value: "demo.page_table" |
text: "bi.responsive_table", |
||||||
}, { |
value: "demo.responsive_table" |
||||||
id: 402, |
}, { |
||||||
pId: 4, |
pId: 401, |
||||||
text: "tree" |
text: "bi.excel_table", |
||||||
}, { |
value: "demo.excel_table" |
||||||
pId: 402, |
}, { |
||||||
text: "bi.multilayer_select_tree_combo", |
pId: 4, |
||||||
value: "demo.multilayer_select_tree_combo" |
id: 402, |
||||||
}, { |
text: "年份控件", |
||||||
pId: 4, |
open: false |
||||||
text: "bi.multi_select_combo", |
}, { |
||||||
value: "demo.multi_select_combo" |
pId: 402, |
||||||
}, { |
text: "bi.year_combo", |
||||||
pId: 4, |
value: "demo.year" |
||||||
text: "bi.path_chooser", |
}, { |
||||||
value: "demo.path_chooser" |
pId: 4, |
||||||
}, { |
id: 403, |
||||||
pId: 4, |
text: "月份控件", |
||||||
text: "bi.relation_view", |
open: false |
||||||
value: "demo.relation_view" |
}, { |
||||||
}, { |
pId: 403, |
||||||
pId: 4, |
text: "bi.month_combo", |
||||||
text: "bi.interactive_arrangement", |
value: "demo.month" |
||||||
value: "demo.interactive_arrangement" |
}, { |
||||||
}]; |
pId: 4, |
||||||
|
id: 404, |
||||||
|
text: "季度控件", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 404, |
||||||
|
text: "bi.quarter_combo", |
||||||
|
value: "demo.quarter" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 405, |
||||||
|
text: "下拉列表", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 405, |
||||||
|
text: "bi.down_list_combo", |
||||||
|
value: "demo.down_list" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 406, |
||||||
|
text: "文本框控件", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.text_editor", |
||||||
|
value: "demo.text_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.search_editor", |
||||||
|
value: "demo.search_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.sign_editor", |
||||||
|
value: "demo.sign_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.sign_initial_editor", |
||||||
|
value: "demo.sign_initial_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.sign_style_editor", |
||||||
|
value: "demo.sign_style_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.state_editor", |
||||||
|
value: "demo.state_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.clear_editor", |
||||||
|
value: "demo.clear_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.record_editor", |
||||||
|
value: "demo.record_editor" |
||||||
|
}, { |
||||||
|
pId: 406, |
||||||
|
text: "bi.shelter_editor", |
||||||
|
value: "demo.shelter_editor" |
||||||
|
}, |
||||||
|
{ |
||||||
|
pId: 4, |
||||||
|
id: 407, |
||||||
|
text: "下拉框控件", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.text_value_combo", |
||||||
|
value: "demo.text_value_combo" |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.text_value_check_combo", |
||||||
|
value: "demo.text_value_check_combo" |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.text_value_down_list_combo", |
||||||
|
value: "demo.text_value_down_list_combo" |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.static_combo", |
||||||
|
value: "demo.static_combo" |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.icon_combo", |
||||||
|
value: "demo.icon_combo" |
||||||
|
}, { |
||||||
|
pId: 407, |
||||||
|
text: "bi.formula_combo", |
||||||
|
value: "demo.formula_combo" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 408, |
||||||
|
text: "选择字段列表", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 408, |
||||||
|
text: "bi.placeholder" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 409, |
||||||
|
text: "公式编辑器", |
||||||
|
open: false |
||||||
|
}, { |
||||||
|
pId: 409, |
||||||
|
text: "bi.placeholder" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 410, |
||||||
|
text: "数值区间控件" |
||||||
|
}, { |
||||||
|
pId: 410, |
||||||
|
text: "bi.numerical_interval", |
||||||
|
value: "demo.numberical_interval" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 411, |
||||||
|
text: "下拉复选框有确定按钮" |
||||||
|
}, { |
||||||
|
pId: 411, |
||||||
|
text: "bi.multi_select_combo", |
||||||
|
value: "demo.multi_select_combo" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 412, |
||||||
|
text: "简单日期控件" |
||||||
|
}, { |
||||||
|
pId: 412, |
||||||
|
text: "bi.date_combo", |
||||||
|
value: "demo.date" |
||||||
|
}, { |
||||||
|
pId: 412, |
||||||
|
text: "bi.date_pane_widget", |
||||||
|
value: "demo.date_pane_widget" |
||||||
|
}, { |
||||||
|
pId: 412, |
||||||
|
text: "bi.year_month_combo", |
||||||
|
value: "demo.year_month_combo" |
||||||
|
},{ |
||||||
|
pId: 412, |
||||||
|
text: "bi.year_quarter_combo", |
||||||
|
value: "demo.year_quarter_combo" |
||||||
|
},{ |
||||||
|
pId: 4, |
||||||
|
id: 413, |
||||||
|
text: "简单下拉树" |
||||||
|
}, { |
||||||
|
pId: 413, |
||||||
|
text: "bi.single_tree_combo", |
||||||
|
value: "demo.single_tree_combo" |
||||||
|
}, { |
||||||
|
pId: 413, |
||||||
|
text: "bi.multilayer_single_tree_combo", |
||||||
|
value: "demo.multilayer_single_tree_combo" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 414, |
||||||
|
text: "可选下拉树" |
||||||
|
}, { |
||||||
|
pId: 414, |
||||||
|
text: "bi.select_tree_combo", |
||||||
|
value: "demo.select_tree_combo" |
||||||
|
}, { |
||||||
|
pId: 414, |
||||||
|
text: "bi.multilayer_select_tree_combo", |
||||||
|
value: "demo.multilayer_select_tree_combo" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 415, |
||||||
|
text: "路径选择" |
||||||
|
}, { |
||||||
|
pId: 415, |
||||||
|
text: "bi.path_chooser", |
||||||
|
value: "demo.path_chooser" |
||||||
|
}, { |
||||||
|
pId: 415, |
||||||
|
text: "bi.direction_path_chooser", |
||||||
|
value: "demo.direction_path_chooser" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 416, |
||||||
|
text: "关联视图" |
||||||
|
}, { |
||||||
|
pId: 416, |
||||||
|
text: "bi.relation_view", |
||||||
|
value: "demo.relation_view" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 417, |
||||||
|
text: "布局" |
||||||
|
}, { |
||||||
|
pId: 417, |
||||||
|
text: "bi.adaptive_arrangement", |
||||||
|
value: "demo.adaptive_arrangement" |
||||||
|
}, { |
||||||
|
pId: 417, |
||||||
|
text: "bi.interactive_arrangement", |
||||||
|
value: "demo.interactive_arrangement" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 418, |
||||||
|
text: "提示对话框" |
||||||
|
}, { |
||||||
|
pId: 418, |
||||||
|
text: "bi.dialog", |
||||||
|
value: "demo.dialog" |
||||||
|
}, { |
||||||
|
pId: 4, |
||||||
|
id: 419, |
||||||
|
text: "单值滑块" |
||||||
|
}, { |
||||||
|
pId: 419, |
||||||
|
text: "bi.single_slider", |
||||||
|
value: "demo.single_slider" |
||||||
|
},{ |
||||||
|
pId: 4, |
||||||
|
id: 420, |
||||||
|
text: "区间滑块" |
||||||
|
}, { |
||||||
|
pId: 420, |
||||||
|
text: "bi.interval_slider", |
||||||
|
value: "demo.interval_slider" |
||||||
|
}, |
||||||
|
]; |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
Demo.AdaptiveArrangement = BI.inherit(BI.Widget, { |
||||||
|
|
||||||
|
_createItem: function () { |
||||||
|
var self = this; |
||||||
|
var id = BI.UUID(); |
||||||
|
var item = BI.createWidget({ |
||||||
|
type: "bi.text_button", |
||||||
|
id: id, |
||||||
|
cls: "layout-bg" + BI.random(1, 8), |
||||||
|
handler: function () { |
||||||
|
self.arrangement.deleteRegion(id); |
||||||
|
} |
||||||
|
}); |
||||||
|
item.setValue(item.attr("id")); |
||||||
|
return item; |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
this.arrangement = BI.createWidget({ |
||||||
|
type: "bi.adaptive_arrangement", |
||||||
|
layoutType: BI.Arrangement.LAYOUT_TYPE.ADAPTIVE, |
||||||
|
cls: "mvc-border", |
||||||
|
width: 800, |
||||||
|
height: 400, |
||||||
|
items: [] |
||||||
|
}); |
||||||
|
var drag = BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
cls: "mvc-border", |
||||||
|
width: 100, |
||||||
|
height: 25, |
||||||
|
text: "drag me" |
||||||
|
}); |
||||||
|
|
||||||
|
// drag.element.draggable &&
|
||||||
|
drag.element.draggable({ |
||||||
|
revert: true, |
||||||
|
cursorAt: { |
||||||
|
left: 0, |
||||||
|
top: 0 |
||||||
|
}, |
||||||
|
drag: function (e, ui) { |
||||||
|
self.arrangement.setPosition({ |
||||||
|
left: ui.position.left, |
||||||
|
top: ui.position.top |
||||||
|
}, { |
||||||
|
width: 300, |
||||||
|
height: 200 |
||||||
|
}) |
||||||
|
}, |
||||||
|
stop: function (e, ui) { |
||||||
|
self.arrangement.addRegion({ |
||||||
|
el: self._createItem() |
||||||
|
}); |
||||||
|
}, |
||||||
|
helper: function (e) { |
||||||
|
var helper = self.arrangement.getHelper(); |
||||||
|
return helper.element; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: drag, |
||||||
|
left: 30, |
||||||
|
top: 450 |
||||||
|
}, { |
||||||
|
el: this.arrangement, |
||||||
|
left: 30, |
||||||
|
top: 30 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "回撤", |
||||||
|
height: 25, |
||||||
|
handler: function () { |
||||||
|
//self.arrangement.revoke();
|
||||||
|
} |
||||||
|
}, |
||||||
|
left: 130, |
||||||
|
top: 450 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "getAllRegions", |
||||||
|
height: 25, |
||||||
|
handler: function () { |
||||||
|
var items = []; |
||||||
|
BI.each(self.arrangement.getAllRegions(), function (i, region) { |
||||||
|
items.push({ |
||||||
|
id: region.id, |
||||||
|
left: region.left, |
||||||
|
top: region.top, |
||||||
|
width: region.width, |
||||||
|
height: region.height |
||||||
|
}); |
||||||
|
}); |
||||||
|
BI.Msg.toast(JSON.stringify(items)); |
||||||
|
} |
||||||
|
}, |
||||||
|
left: 230, |
||||||
|
top: 450 |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.button", |
||||||
|
text: "relayout", |
||||||
|
height: 25, |
||||||
|
handler: function () { |
||||||
|
self.arrangement.relayout(); |
||||||
|
} |
||||||
|
}, |
||||||
|
left: 330, |
||||||
|
top: 450 |
||||||
|
}] |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.shortcut("demo.adaptive_arrangement", Demo.AdaptiveArrangement); |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
/** |
||||||
|
* 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); |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
/** |
||||||
|
* 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" |
||||||
|
}, { |
||||||
|
value: "第二项", |
||||||
|
iconClass: "rename-font" |
||||||
|
}, { |
||||||
|
value: "第三项", |
||||||
|
iconClass: "move-font" |
||||||
|
}] |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.icon_combo", Demo.IconCombo); |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.StaticCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
beforeMounted: function () { |
||||||
|
this.refs.setValue(2); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
|
||||||
|
var self = this; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.static_combo", |
||||||
|
text: "Value 不变", |
||||||
|
width: 300, |
||||||
|
ref: function (_ref) { |
||||||
|
self.refs = _ref; |
||||||
|
}, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
} |
||||||
|
] |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.static_combo", Demo.StaticCombo); |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.TextValueCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.text_value_combo", |
||||||
|
text: "天气热死了", |
||||||
|
width: 300, |
||||||
|
items: [{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
}] |
||||||
|
},{ |
||||||
|
type: "bi.text_value_check_combo", |
||||||
|
text: "天气热死了", |
||||||
|
width: 300, |
||||||
|
items: [{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
}] |
||||||
|
},{ |
||||||
|
type: "bi.text_value_combo", |
||||||
|
text: "天气热死了", |
||||||
|
width: 300, |
||||||
|
items: [{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
}] |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.text_value_combo", Demo.TextValueCombo); |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.TextValueDownListCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
beforeMounted:function(){ |
||||||
|
this.refs.setValue(2); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
|
||||||
|
var self = this; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "分组+二级", |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.text_value_down_list_combo", |
||||||
|
text: "天气热死了", |
||||||
|
width: 300, |
||||||
|
ref: function (_ref) { |
||||||
|
self.refs = _ref; |
||||||
|
}, |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
el: { |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
children: [{ |
||||||
|
text: "MVC-1-1", |
||||||
|
value: 11 |
||||||
|
}] |
||||||
|
}], |
||||||
|
[{ |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
}] |
||||||
|
] |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.text_value_down_list_combo", Demo.TextValueDownListCombo); |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.TextValueCheckCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.text_value_check_combo", |
||||||
|
text: "天气热死了", |
||||||
|
width: 300, |
||||||
|
items: [{ |
||||||
|
text: "MVC-1", |
||||||
|
value: 1 |
||||||
|
}, { |
||||||
|
text: "MVC-2", |
||||||
|
value: 2 |
||||||
|
}, { |
||||||
|
text: "MVC-3", |
||||||
|
value: 3 |
||||||
|
}] |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.text_value_check_combo", Demo.TextValueCheckCombo); |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.Date = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-date" |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
Demo.Date.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
vgap: 10, |
||||||
|
items: [{ |
||||||
|
type: "bi.date_combo", |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
height: 50, |
||||||
|
width: 300 |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.date", Demo.Date); |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
Demo.DatePane = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-datepane" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.vertical", |
||||||
|
vgap: 10, |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "bi.date_pane_widget" |
||||||
|
}, { |
||||||
|
type: "bi.date_pane_widget", |
||||||
|
selectedTime: { |
||||||
|
year: 2017, |
||||||
|
month: 12, |
||||||
|
day: 11 |
||||||
|
}, |
||||||
|
height:300 |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bi.button", |
||||||
|
text: "getValue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast("date" + JSON.stringify(datepane.getValue())); |
||||||
|
} |
||||||
|
} |
||||||
|
], |
||||||
|
width: "50%" |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.date_pane_widget", Demo.DatePane); |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
Demo.DialogView = BI.inherit(BI.Widget, { |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var items = [{ |
||||||
|
el: { |
||||||
|
type: 'bi.button', |
||||||
|
text: '弹出对话框', |
||||||
|
level: 'common', |
||||||
|
height: 30 |
||||||
|
} |
||||||
|
}]; |
||||||
|
BI.each(items, function (i, item) { |
||||||
|
item.el.handler = function () { |
||||||
|
BI.Msg.alert('提示', "这是一段可以换行的文字，为了使它换行我要多写几个字，但是我又凑不够这么多的字，万般焦急下，只能随便写写"); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.left", |
||||||
|
vgap: 200, |
||||||
|
hgap: 20, |
||||||
|
items: items |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
BI.shortcut("demo.dialog", Demo.DialogView); |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
Demo.Downlist = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-downlist" |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
var downlist = this.downlist; |
||||||
|
var label = this.label; |
||||||
|
downlist.on(BI.DownListCombo.EVENT_CHANGE, function (value, fatherValue) { |
||||||
|
label.setValue(JSON.stringify(downlist.getValue())); |
||||||
|
}); |
||||||
|
|
||||||
|
this.downlist.on(BI.DownListCombo.EVENT_SON_VALUE_CHANGE, function (value, fatherValue) { |
||||||
|
label.setValue(JSON.stringify(downlist.getValue())); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
render: function () { |
||||||
|
self = this; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.down_list_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.downlist = _ref; |
||||||
|
}, |
||||||
|
cls:"layout-bg3", |
||||||
|
height: 30, |
||||||
|
width: 100, |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
el: { |
||||||
|
text: "column 1111", |
||||||
|
iconCls1: "check-mark-e-font", |
||||||
|
value: 11 |
||||||
|
}, |
||||||
|
children: [{ |
||||||
|
text: "column 1.1", |
||||||
|
value: 21, |
||||||
|
cls: "dot-e-font", |
||||||
|
selected: true |
||||||
|
}, { |
||||||
|
text: "column 1.222222222222222222222222222222222222", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 22, |
||||||
|
}] |
||||||
|
}], |
||||||
|
[{ |
||||||
|
el: { |
||||||
|
type: "bi.icon_text_icon_item", |
||||||
|
text: "column 2", |
||||||
|
iconCls1: "chart-type-e-font", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 12 |
||||||
|
}, |
||||||
|
disabled: true, |
||||||
|
children: [{ |
||||||
|
type: "bi.icon_text_item", |
||||||
|
cls: "dot-e-font", |
||||||
|
height: 25, |
||||||
|
text: "column 2.1", |
||||||
|
value: 11 |
||||||
|
}, { |
||||||
|
text: "column 2.2", |
||||||
|
value: 12, |
||||||
|
cls: "dot-e-font" |
||||||
|
}] |
||||||
|
}], |
||||||
|
[{ |
||||||
|
text: "column 8", |
||||||
|
value: 18, |
||||||
|
cls: "dot-e-font", |
||||||
|
selected: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 9", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 19 |
||||||
|
} |
||||||
|
], |
||||||
|
[{ |
||||||
|
text: "column 10", |
||||||
|
value: 20, |
||||||
|
cls: "dot-e-font", |
||||||
|
selected: true |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 11", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 21 |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 12", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 22 |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 13", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 23 |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 14", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 24 |
||||||
|
}, |
||||||
|
{ |
||||||
|
|
||||||
|
text: "column 15", |
||||||
|
cls: "dot-e-font", |
||||||
|
value: 23 |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
] |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
text: "显示选择值", |
||||||
|
width:500, |
||||||
|
cls:"layout-bg4", |
||||||
|
ref: function (_ref) { |
||||||
|
self.label = _ref; |
||||||
|
} |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.down_list", Demo.Downlist); |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.AdaptEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//这东西好奇怪,不支持设置宽度,那么渲染出来宽度几乎没有,无奈之下只能假装给他个默认值了
|
||||||
|
beforeMounted: function () { |
||||||
|
this.refs.setValue("Winter is coming !") |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var editor = BI.createWidget({ |
||||||
|
type: "bi.adapt_editor", |
||||||
|
cls: "layout-bg5", |
||||||
|
ref: function (_ref) { |
||||||
|
self.refs = _ref; |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
var text=["You know nothing! Jon Snow","A Lannister always pays his debts.","Power is a curious thing."] |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
el: editor |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "为了展示长度真的是可变的,每点一下就换一行字", |
||||||
|
handler: function () { |
||||||
|
var temp=text.shift(); |
||||||
|
editor.setValue(temp); |
||||||
|
text.push(temp); |
||||||
|
} |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.adapt_editor", Demo.AdaptEditor); |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.ClearEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.clear_editor", |
||||||
|
cls: "bi-border", |
||||||
|
width: 300, |
||||||
|
watermark: "这个是带清除按钮的" |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.clear_editor", Demo.ClearEditor); |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.RecordEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.record_editor", |
||||||
|
cls: "bi-border", |
||||||
|
width: 300, |
||||||
|
watermark: "这个是可以记录输入的" |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.record_editor", Demo.RecordEditor); |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.SearchEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.search_editor", |
||||||
|
width: 300, |
||||||
|
watermark:"添加合法性判断", |
||||||
|
errorText: "长度必须大于4", |
||||||
|
validationChecker:function(){ |
||||||
|
return this.getValue().length > 4 ? true : false |
||||||
|
} |
||||||
|
},{ |
||||||
|
type: "bi.small_search_editor", |
||||||
|
width: 300, |
||||||
|
watermark:"这个是 small,小一号" |
||||||
|
}], |
||||||
|
vgap:20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.search_editor", Demo.SearchEditor); |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.ClearEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
var editor; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.shelter_editor", |
||||||
|
cls: "bi-border", |
||||||
|
ref:function(_ref){ |
||||||
|
editor=_ref; |
||||||
|
}, |
||||||
|
width: 300, |
||||||
|
watermark: "这个是带标记的" |
||||||
|
},{ |
||||||
|
type:"bi.button", |
||||||
|
text:"setValue", |
||||||
|
width:300, |
||||||
|
handler:function(){ |
||||||
|
editor.setValue("凛冬将至"); |
||||||
|
} |
||||||
|
},{ |
||||||
|
type:"bi.button", |
||||||
|
text:"doHighLight", |
||||||
|
width:300, |
||||||
|
handler:function(){ |
||||||
|
editor.doHighLight(); |
||||||
|
console.log(editor.getState()); |
||||||
|
} |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.shelter_editor", Demo.ClearEditor); |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/14. |
||||||
|
*/ |
||||||
|
Demo.SignEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.sign_editor", |
||||||
|
// cls:"layout-bg5",
|
||||||
|
value: "123", |
||||||
|
text: "456", |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.sign_editor", Demo.SignEditor); |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.SignInitialEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.sign_initial_editor", |
||||||
|
cls:"layout-bg5", |
||||||
|
value:"123", |
||||||
|
text:"456", |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap:20 |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.sign_initial_editor", Demo.SignInitialEditor); |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.SignStyleEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.sign_style_editor", |
||||||
|
cls:"layout-bg5", |
||||||
|
value:"12313", |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap:20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.sign_style_editor", Demo.SignStyleEditor); |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.StateEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.state_editor", |
||||||
|
cls:"bi-border", |
||||||
|
value:"123", |
||||||
|
text:"456", |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap:20 |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.state_editor", Demo.StateEditor); |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.TextEditor = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.text_editor", |
||||||
|
watermark:"这是水印,watermark", |
||||||
|
width: 300 |
||||||
|
},{ |
||||||
|
type: "bi.text_editor", |
||||||
|
watermark:"这个不予许空", |
||||||
|
allowBlank: false, |
||||||
|
errorText: "非空!", |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap:20 |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.text_editor", Demo.TextEditor); |
||||||
@ -0,0 +1,70 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/14. |
||||||
|
*/ |
||||||
|
Demo.IntervalSlider = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var min = BI.createWidget({ |
||||||
|
type: "bi.text_editor", |
||||||
|
watermark: "min", |
||||||
|
width: 100 |
||||||
|
}); |
||||||
|
var max = BI.createWidget({ |
||||||
|
type: "bi.text_editor", |
||||||
|
watermark: "max", |
||||||
|
width: 100 |
||||||
|
}) |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.interval_slider", |
||||||
|
ref: function (_ref) { |
||||||
|
self.slider = _ref; |
||||||
|
}, |
||||||
|
width: 300, |
||||||
|
height: 90 |
||||||
|
}, { |
||||||
|
type: "bi.center_adapt", |
||||||
|
width: 300, |
||||||
|
items: [{ |
||||||
|
type: "bi.text", |
||||||
|
text: "min" |
||||||
|
}, min, { |
||||||
|
type: "bi.text", |
||||||
|
text: "max" |
||||||
|
}, max] |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "populate", |
||||||
|
handler: function () { |
||||||
|
self.slider.setMinAndMax({ |
||||||
|
min: min.getValue() || 0, |
||||||
|
max: max.getValue() || 100 |
||||||
|
}); |
||||||
|
self.slider.populate(); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "setValue", |
||||||
|
handler: function () { |
||||||
|
|
||||||
|
//既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
|
||||||
|
self.slider.setValue({ |
||||||
|
min: 20, |
||||||
|
max: 80 |
||||||
|
}); |
||||||
|
self.slider.populate(); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.interval_slider", Demo.IntervalSlider); |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.Month = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.month_combo", |
||||||
|
width: 300 |
||||||
|
}] |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.month", Demo.Month); |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.MultiTreeCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var items = BI.deepClone(Demo.CONSTANTS.TREE); |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.multi_tree_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.tree = _ref; |
||||||
|
}, |
||||||
|
itemsCreator: function (options, callback) { |
||||||
|
console.log(options); |
||||||
|
|
||||||
|
|
||||||
|
callback({ |
||||||
|
items: items |
||||||
|
}); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(JSON.stringify(self.tree.getValue())); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.multi_tree_combo", Demo.MultiTreeCombo); |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/12. |
||||||
|
*/ |
||||||
|
Demo.NumericalInterval = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
var numerical = this.numerical; |
||||||
|
var label = this.label; |
||||||
|
numerical.on(BI.NumericalInterval.EVENT_CHANGE, function () { |
||||||
|
var temp = numerical.getValue(); |
||||||
|
var res = "大于" + (temp.closemin ? "等于 " : " ") + temp.min + " 小于" + (temp.closemax ? "等于 " : " ") + temp.max; |
||||||
|
label.setValue(res); |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.numerical_interval", |
||||||
|
ref: function (_ref) { |
||||||
|
self.numerical = _ref; |
||||||
|
}, |
||||||
|
width: 500 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
ref: function (_ref) { |
||||||
|
self.label = _ref; |
||||||
|
}, |
||||||
|
text: "显示结果" |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.numberical_interval", Demo.NumericalInterval); |
||||||
@ -0,0 +1,77 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Demo.DirectionPathChooser = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-direction-path-chooser" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.center_adapt", |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
type: "bi.direction_path_chooser", |
||||||
|
items: [[{ |
||||||
|
"region": "8c4460bc3605685e", |
||||||
|
"regionText": "采购订单XXX", |
||||||
|
"text": "ID", |
||||||
|
"value": "1" |
||||||
|
}, { |
||||||
|
"region": "0fbd0dc648f41e97", |
||||||
|
"regionText": "采购订单", |
||||||
|
"text": "学号", |
||||||
|
"value": "3" |
||||||
|
}, { |
||||||
|
"region": "c6d72d6c7e19a667", |
||||||
|
"regionText": "供应商基本信息", |
||||||
|
"text": "ID", |
||||||
|
"value": "5" |
||||||
|
}], [{ |
||||||
|
"region": "ed013e18cc7c8637", |
||||||
|
"regionText": "采购订单XXX", |
||||||
|
"text": "ID", |
||||||
|
"value": "1" |
||||||
|
}, { |
||||||
|
"region": "153d75878431f8ee", |
||||||
|
"regionText": "A3", |
||||||
|
"text": "学号", |
||||||
|
"value": "2" |
||||||
|
}, { |
||||||
|
"region": "3861fb024c7d7825", |
||||||
|
"regionText": "采购订单", |
||||||
|
"text": "学号", |
||||||
|
"value": "3" |
||||||
|
}, { |
||||||
|
"region": "88e3e5071bd10bc5", |
||||||
|
"regionText": "供应商", |
||||||
|
"text": "ID", |
||||||
|
"value": "4" |
||||||
|
}, { |
||||||
|
"region": "8476c77ab5c147e0", |
||||||
|
"regionText": "供应商基本信息", |
||||||
|
"text": "ID", |
||||||
|
"value": "5" |
||||||
|
}], [{ |
||||||
|
"region": "f00f67fbb9fba6fe", |
||||||
|
"regionText": "采购订单XXX", |
||||||
|
"text": "ID", |
||||||
|
"value": "1" |
||||||
|
}, { |
||||||
|
"region": "1e8badf5d5793408", |
||||||
|
"regionText": "A3", |
||||||
|
"text": "学号", |
||||||
|
"value": "2" |
||||||
|
}, { |
||||||
|
"region": "de1ebd3d0986a294", |
||||||
|
"regionText": "供应商基本信息", |
||||||
|
"text": "ID", |
||||||
|
"value": "5" |
||||||
|
}]] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.direction_path_chooser",Demo.DirectionPathChooser); |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.Quarter = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.quarter_combo", |
||||||
|
width: 300 |
||||||
|
}] |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.quarter", Demo.Quarter); |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var items = BI.deepClone(Demo.CONSTANTS.TREE); |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.multilayer_select_tree_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.tree = _ref; |
||||||
|
}, |
||||||
|
text: "默认值", |
||||||
|
items: items, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(self.tree.getValue()[0]); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.multilayer_select_tree_combo", Demo.MultiLayerSelectTreeCombo); |
||||||
@ -0,0 +1,182 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.SelectTreeCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
|
||||||
|
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" |
||||||
|
}]; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.select_tree_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.tree = _ref; |
||||||
|
}, |
||||||
|
text: "默认值", |
||||||
|
items: items, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(self.tree.getValue()[0]); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.select_tree_combo", Demo.SelectTreeCombo); |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/14. |
||||||
|
*/ |
||||||
|
Demo.SingleSlider = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
|
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.single_slider", |
||||||
|
ref: function (_ref) { |
||||||
|
self.slider = _ref; |
||||||
|
}, |
||||||
|
width: 300, |
||||||
|
height: 50 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "populate", |
||||||
|
handler: function () { |
||||||
|
self.slider.setMinAndMax({ |
||||||
|
min: 1, |
||||||
|
max: 100 |
||||||
|
}); |
||||||
|
self.slider.populate(); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "setValue", |
||||||
|
handler: function () { |
||||||
|
|
||||||
|
//既然 setVlaue后要重新 populate 才能生效,为何不直接在 setValue方法的结尾调用 populate 方法呢?
|
||||||
|
self.slider.setValue(50); |
||||||
|
self.slider.populate(); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.single_slider", Demo.SingleSlider); |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var items = BI.deepClone(Demo.CONSTANTS.TREE); |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.multilayer_single_tree_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.tree = _ref; |
||||||
|
}, |
||||||
|
text: "默认值", |
||||||
|
items: items, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(self.tree.getValue()[0]); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.multilayer_single_tree_combo", Demo.MultiLayerSingleTreeCombo); |
||||||
@ -0,0 +1,181 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.SingleTreeCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.single_tree_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
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" |
||||||
|
}], |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(self.tree.getValue()[0]); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.single_tree_combo", Demo.SingleTreeCombo); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/12. |
||||||
|
*/ |
||||||
|
Demo.ExcelTable = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.excel_table", |
||||||
|
columnSize: [200,200,200,200,200], |
||||||
|
items: [ |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "第一行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "第一行第二列" |
||||||
|
}], |
||||||
|
[{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg3", |
||||||
|
text: "第二行第一列" |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg4", |
||||||
|
text: "第二行第二列" |
||||||
|
}] |
||||||
|
] |
||||||
|
}], |
||||||
|
width:500 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.excel_table", Demo.ExcelTable); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.TimeInterval = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this; |
||||||
|
var items = BI.deepClone(Demo.CONSTANTS.TREE); |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.time_interval", |
||||||
|
ref: function (_ref) { |
||||||
|
self.interval = _ref; |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getVlaue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(JSON.stringify(self.interval.getValue())); |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.time_interval", Demo.TimeInterval); |
||||||
@ -1,66 +0,0 @@ |
|||||||
/** |
|
||||||
* Created by User on 2017/3/22. |
|
||||||
*/ |
|
||||||
Demo.MultiSelectCombo = BI.inherit(BI.Widget, { |
|
||||||
props: {}, |
|
||||||
|
|
||||||
render: function (vessel) { |
|
||||||
var TREEWITHCHILDREN = [{ |
|
||||||
id: -1, value: "根目录", text: "根目录", children: [ |
|
||||||
{ |
|
||||||
id: 1, value: "第一级目录1", text: "第一级目录1", children: [ |
|
||||||
{id: 11, value: "第二级文件1", text: "第二级文件1"}, |
|
||||||
{ |
|
||||||
id: 12, value: "第二级目录2", text: "第二级目录2", children: [ |
|
||||||
{ |
|
||||||
id: 121, value: "第三级目录1", text: "第三级目录1", children: [ |
|
||||||
{ |
|
||||||
id: 1211, value: "第四级目录1", text: "第四级目录1", children: [ |
|
||||||
{id: 12111, value: "第五级文件1", text: "第五级文件1"} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
{id: 122, value: "第三级文件1", text: "第三级文件1"} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: 2, value: "第一级目录2", text: "第一级目录2", children: [ |
|
||||||
{ |
|
||||||
id: 21, value: "第二级目录3", text: "第二级目录3", children: [ |
|
||||||
{ |
|
||||||
id: 211, value: "第三级目录2", text: "第三级目录2", children: [ |
|
||||||
{id: 2111, value: "第四级文件1", text: "第四级文件1"} |
|
||||||
] |
|
||||||
}, |
|
||||||
{id: 212, value: "第三级文件2", text: "第三级文件2"} |
|
||||||
] |
|
||||||
}, |
|
||||||
{id: 22, value: "第二级文件2", text: "第二级文件2"} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}]; |
|
||||||
var items = BI.deepClone(TREEWITHCHILDREN); |
|
||||||
var combo = BI.createWidget({ |
|
||||||
type: "bi.multilayer_select_tree_combo", |
|
||||||
}); |
|
||||||
|
|
||||||
combo.populate(items); |
|
||||||
return { |
|
||||||
type: "bi.vertical", |
|
||||||
items: [combo, { |
|
||||||
type: "bi.button", |
|
||||||
width: 100, |
|
||||||
text: "getValue", |
|
||||||
handler: function () { |
|
||||||
BI.Msg.alert("", JSON.stringify(combo.getValue())); |
|
||||||
} |
|
||||||
}], |
|
||||||
vgap: 100 |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
BI.shortcut("demo.multilayer_select_tree_combo", Demo.MultiSelectCombo); |
|
||||||
@ -0,0 +1,24 @@ |
|||||||
|
/** |
||||||
|
* 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,19 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/11. |
||||||
|
*/ |
||||||
|
Demo.Year = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-exceltable" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.horizontal_adapt", |
||||||
|
items: [{ |
||||||
|
type: "bi.year_combo", |
||||||
|
width: 300 |
||||||
|
}] |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.year", Demo.Year); |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.YearMonthCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
|
||||||
|
var self = this; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.year_month_combo", |
||||||
|
ref: function (_ref) { |
||||||
|
self.widget = _ref; |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getValue", |
||||||
|
handler: function () { |
||||||
|
BI.Msg.toast(JSON.stringify(self.widget.getValue())) |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.year_month_combo", Demo.YearMonthCombo); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/** |
||||||
|
* Created by Dailer on 2017/7/13. |
||||||
|
*/ |
||||||
|
Demo.YearQuarterCombo = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
var self=this; |
||||||
|
return { |
||||||
|
type: "bi.horizontal_auto", |
||||||
|
items: [{ |
||||||
|
type: "bi.year_quarter_combo", |
||||||
|
width: 300, |
||||||
|
ref:function(_ref){ |
||||||
|
self.widget=_ref; |
||||||
|
}, |
||||||
|
yearBehaviors: {}, |
||||||
|
quarterBehaviors: {}, |
||||||
|
}, { |
||||||
|
type: "bi.button", |
||||||
|
text: "getValue", |
||||||
|
handler:function(){ |
||||||
|
BI.Msg.toast(JSON.stringify(self.widget.getValue())) |
||||||
|
}, |
||||||
|
width: 300 |
||||||
|
}], |
||||||
|
vgap: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
BI.shortcut("demo.year_quarter_combo", Demo.YearQuarterCombo); |
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 385 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 189 B |
@ -1,33 +1,31 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<title></title> |
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" |
<head> |
||||||
href="core.css"/> |
<meta charset="utf-8"> |
||||||
<link rel="stylesheet" type="text/css" |
<title></title> |
||||||
href="base.css"/> |
<link rel="stylesheet" type="text/css" href="core.css" /> |
||||||
<link rel="stylesheet" type="text/css" |
<link rel="stylesheet" type="text/css" href="base.css" /> |
||||||
href="widget.css"/> |
<link rel="stylesheet" type="text/css" href="widget.css" /> |
||||||
<link rel="stylesheet" type="text/css" |
<link rel="stylesheet" type="text/css" href="resource.css" /> |
||||||
href="resource.css"/> |
<link rel="stylesheet" type="text/css" href="demo.css" /> |
||||||
<link rel="stylesheet" type="text/css" |
|
||||||
href="demo.css"/> |
|
||||||
|
|
||||||
<script src="polyfill.js"></script> |
<script src="polyfill.js"></script> |
||||||
<script src="core.js"></script> |
<script src="core.js"></script> |
||||||
<script src="base.js"></script> |
<script src="base.js"></script> |
||||||
<script src="case.js"></script> |
<script src="case.js"></script> |
||||||
<script src="widget.js"></script> |
<script src="widget.js"></script> |
||||||
<!--图表--> |
<!--图表--> |
||||||
<script src="vancharts-all.js"></script> |
<script src="vancharts-all.js"></script> |
||||||
<script src="biconst.js"></script><!--图表用到的常量(直接拿的bi的常量)--> |
<script src="biconst.js"></script> |
||||||
<script src="chart.js"></script> |
<!--图表用到的常量(直接拿的bi的常量)--> |
||||||
|
<script src="chart.js"></script> |
||||||
|
|
||||||
<script src="demo.js"></script> |
<script src="demo.js"></script> |
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<div id="wrapper"></div> |
<div id="wrapper"></div> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@ |
|||||||
|
@import "../../bibase"; |
||||||
|
|
||||||
|
.bi-single-slider { |
||||||
|
& .slider-editor-button { |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
@import "../../../bibase"; |
||||||
|
.bi-single-slider-slider{ |
||||||
|
cursor: url('@{leftRightCursor}'), auto; |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
@import "../../../bibase"; |
||||||
|
|
||||||
|
.bi-slider-track { |
||||||
|
.background-track { |
||||||
|
.background-color(@color-bi-background-gray, 0); |
||||||
|
.border-radius(12px); |
||||||
|
} |
||||||
|
.gray-track { |
||||||
|
background: @color-bi-background-disabled; |
||||||
|
.border-radius(4px); |
||||||
|
} |
||||||
|
.blue-track { |
||||||
|
.border-radius(4px); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,495 @@ |
|||||||
|
/** |
||||||
|
* Created by zcf on 2016/9/26. |
||||||
|
* Make some change by dailer on 2017/7/17 |
||||||
|
*/ |
||||||
|
BI.IntervalSlider = BI.inherit(BI.Widget, { |
||||||
|
_constant: { |
||||||
|
EDITOR_WIDTH: 58, |
||||||
|
EDITOR_R_GAP: 60, |
||||||
|
EDITOR_HEIGHT: 30, |
||||||
|
HEIGHT: 28, |
||||||
|
SLIDER_WIDTH_HALF: 15, |
||||||
|
SLIDER_WIDTH: 30, |
||||||
|
SLIDER_HEIGHT: 30, |
||||||
|
TRACK_HEIGHT: 24 |
||||||
|
}, |
||||||
|
|
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.IntervalSlider.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-single-slider bi-slider-track" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
BI.IntervalSlider.superclass._init.apply(this, arguments); |
||||||
|
|
||||||
|
var self = this; |
||||||
|
var c = this._constant; |
||||||
|
this.enable = false; |
||||||
|
this.valueOne = ""; |
||||||
|
this.valueTwo = ""; |
||||||
|
this.calculation = new BI.AccurateCalculationModel(); |
||||||
|
|
||||||
|
this.backgroundTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "background-track", |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}); |
||||||
|
this.grayTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "gray-track", |
||||||
|
height: 8 |
||||||
|
}); |
||||||
|
this.blueTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "blue-track bi-high-light-background", |
||||||
|
height: 8 |
||||||
|
}); |
||||||
|
this.track = this._createTrackWrapper(); |
||||||
|
|
||||||
|
this.labelOne = BI.createWidget({ |
||||||
|
type: "bi.sign_editor", |
||||||
|
cls: "slider-editor-button", |
||||||
|
errorText: "", |
||||||
|
allowBlank: false, |
||||||
|
height: c.HEIGHT, |
||||||
|
width: c.EDITOR_WIDTH, |
||||||
|
validationChecker: function (v) { |
||||||
|
return self._checkValidation(v); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.labelOne.on(BI.Editor.EVENT_CONFIRM, function () { |
||||||
|
var v = BI.parseFloat(this.getValue()); |
||||||
|
self.valueOne = v; |
||||||
|
var percent = self._getPercentByValue(v); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); //分成1000份
|
||||||
|
self._setLabelOnePosition(significantPercent); |
||||||
|
self._setSliderOnePosition(significantPercent); |
||||||
|
self._setBlueTrack(); |
||||||
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||||
|
}); |
||||||
|
this.labelOne.on(BI.SignEditor.EVENT_FOCUS, function () { |
||||||
|
self.labelOne.element.addClass("bi-border"); |
||||||
|
}); |
||||||
|
this.labelOne.on(BI.SignEditor.EVENT_BLUR, function () { |
||||||
|
self.labelOne.element.removeClass("bi-border"); |
||||||
|
}); |
||||||
|
|
||||||
|
this.labelTwo = BI.createWidget({ |
||||||
|
type: "bi.sign_editor", |
||||||
|
cls: "slider-editor-button", |
||||||
|
errorText: "", |
||||||
|
allowBlank: false, |
||||||
|
height: c.HEIGHT, |
||||||
|
width: c.EDITOR_WIDTH, |
||||||
|
validationChecker: function (v) { |
||||||
|
return self._checkValidation(v); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.labelTwo.on(BI.Editor.EVENT_CONFIRM, function () { |
||||||
|
var v = BI.parseFloat(this.getValue()); |
||||||
|
self.valueTwo = v; |
||||||
|
var percent = self._getPercentByValue(v); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setLabelTwoPosition(significantPercent); |
||||||
|
self._setSliderTwoPosition(significantPercent); |
||||||
|
self._setBlueTrack(); |
||||||
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||||
|
}); |
||||||
|
this.labelTwo.on(BI.SignEditor.EVENT_FOCUS, function () { |
||||||
|
self.labelTwo.element.addClass("bi-border"); |
||||||
|
}); |
||||||
|
this.labelTwo.on(BI.SignEditor.EVENT_BLUR, function () { |
||||||
|
self.labelTwo.element.removeClass("bi-border"); |
||||||
|
}); |
||||||
|
|
||||||
|
this.sliderOne = BI.createWidget({ |
||||||
|
type: "bi.single_slider_slider" |
||||||
|
}); |
||||||
|
this.sliderOne.element.draggable({ |
||||||
|
axis: "x", |
||||||
|
containment: this.grayTrack.element, |
||||||
|
scroll: false, |
||||||
|
drag: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setLabelOnePosition(significantPercent); |
||||||
|
var v = self._getValueByPercent(significantPercent); |
||||||
|
self.labelOne.setValue(v); |
||||||
|
self.valueOne = v; |
||||||
|
self._setBlueTrack(); |
||||||
|
}, |
||||||
|
stop: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setSliderOnePosition(significantPercent); |
||||||
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
this.sliderTwo = BI.createWidget({ |
||||||
|
type: "bi.single_slider_slider" |
||||||
|
}); |
||||||
|
this.sliderTwo.element.draggable({ |
||||||
|
axis: "x", |
||||||
|
containment: this.grayTrack.element, |
||||||
|
scroll: false, |
||||||
|
drag: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setLabelTwoPosition(significantPercent); |
||||||
|
var v = self._getValueByPercent(significantPercent); |
||||||
|
self.labelTwo.setValue(v); |
||||||
|
self.valueTwo = v; |
||||||
|
self._setBlueTrack(); |
||||||
|
}, |
||||||
|
stop: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setSliderTwoPosition(significantPercent); |
||||||
|
self.fireEvent(BI.IntervalSlider.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}); |
||||||
|
this._setVisible(false); |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.track, |
||||||
|
width: "100%", |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}] |
||||||
|
}], |
||||||
|
hgap: 7, |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}, |
||||||
|
top: 33, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}, |
||||||
|
this._createLabelWrapper(), |
||||||
|
this._createSliderWrapper() |
||||||
|
] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_createLabelWrapper: function () { |
||||||
|
var c = this._constant; |
||||||
|
return { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.labelOne, |
||||||
|
top: 0, |
||||||
|
left: "0%" |
||||||
|
}] |
||||||
|
}, { |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.labelTwo, |
||||||
|
top: 0, |
||||||
|
left: "100%" |
||||||
|
}] |
||||||
|
}], |
||||||
|
rgap: c.EDITOR_R_GAP, |
||||||
|
height: 90 |
||||||
|
}, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_createSliderWrapper: function () { |
||||||
|
var c = this._constant; |
||||||
|
return { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.sliderOne, |
||||||
|
top: 0, |
||||||
|
left: "0%" |
||||||
|
}] |
||||||
|
}, { |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.sliderTwo, |
||||||
|
top: 0, |
||||||
|
left: "100%" |
||||||
|
}] |
||||||
|
}], |
||||||
|
hgap: c.SLIDER_WIDTH_HALF, |
||||||
|
height: c.SLIDER_HEIGHT |
||||||
|
}, |
||||||
|
top: 30, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_createTrackWrapper: function () { |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.backgroundTrack, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.grayTrack, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: this.blueTrack, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "0%" |
||||||
|
}] |
||||||
|
}], |
||||||
|
hgap: 8, |
||||||
|
height: 8 |
||||||
|
}, |
||||||
|
top: 8, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_checkValidation: function (v) { |
||||||
|
return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max) |
||||||
|
}, |
||||||
|
|
||||||
|
_checkOverlap: function () { |
||||||
|
var labelOneLeft = this.labelOne.element[0].offsetLeft; |
||||||
|
var labelTwoLeft = this.labelTwo.element[0].offsetLeft; |
||||||
|
if (labelOneLeft <= labelTwoLeft) { |
||||||
|
if ((labelTwoLeft - labelOneLeft) < 90) { |
||||||
|
this.labelTwo.element.css({ |
||||||
|
"top": 60 |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.labelTwo.element.css({ |
||||||
|
"top": 0 |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
if ((labelOneLeft - labelTwoLeft) < 90) { |
||||||
|
this.labelTwo.element.css({ |
||||||
|
"top": 60 |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.labelTwo.element.css({ |
||||||
|
"top": 0 |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_setLabelOnePosition: function (percent) { |
||||||
|
this.labelOne.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
this._checkOverlap(); |
||||||
|
}, |
||||||
|
|
||||||
|
_setLabelTwoPosition: function (percent) { |
||||||
|
this.labelTwo.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
this._checkOverlap(); |
||||||
|
}, |
||||||
|
|
||||||
|
_setSliderOnePosition: function (percent) { |
||||||
|
this.sliderOne.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setSliderTwoPosition: function (percent) { |
||||||
|
this.sliderTwo.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setBlueTrackLeft: function (percent) { |
||||||
|
this.blueTrack.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setBlueTrackWidth: function (percent) { |
||||||
|
this.blueTrack.element.css({ |
||||||
|
"width": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setBlueTrack: function () { |
||||||
|
var percentOne = this._getPercentByValue(this.labelOne.getValue()); |
||||||
|
var percentTwo = this._getPercentByValue(this.labelTwo.getValue()); |
||||||
|
if (percentOne <= percentTwo) { |
||||||
|
this._setBlueTrackLeft(percentOne); |
||||||
|
this._setBlueTrackWidth(percentTwo - percentOne); |
||||||
|
} else { |
||||||
|
this._setBlueTrackLeft(percentTwo); |
||||||
|
this._setBlueTrackWidth(percentOne - percentTwo); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_setAllPosition: function (one, two) { |
||||||
|
this._setSliderOnePosition(one); |
||||||
|
this._setLabelOnePosition(one); |
||||||
|
this._setSliderTwoPosition(two); |
||||||
|
this._setLabelTwoPosition(two); |
||||||
|
this._setBlueTrack(); |
||||||
|
}, |
||||||
|
|
||||||
|
_setVisible: function (visible) { |
||||||
|
this.sliderOne.setVisible(visible); |
||||||
|
this.sliderTwo.setVisible(visible); |
||||||
|
this.labelOne.setVisible(visible); |
||||||
|
this.labelTwo.setVisible(visible); |
||||||
|
}, |
||||||
|
|
||||||
|
_setErrorText: function () { |
||||||
|
var errorText = BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number"); |
||||||
|
this.labelOne.setErrorText(errorText); |
||||||
|
this.labelTwo.setErrorText(errorText); |
||||||
|
}, |
||||||
|
|
||||||
|
_getGrayTrackLength: function () { |
||||||
|
return this.grayTrack.element[0].scrollWidth |
||||||
|
}, |
||||||
|
|
||||||
|
//其中取max-min后保留4为有效数字后的值的小数位数为最终value的精度
|
||||||
|
_getValueByPercent: function (percent) { //return (((max-min)*percent)/100+min)
|
||||||
|
var sub = this.calculation.accurateSubtraction(this.max, this.min); |
||||||
|
var mul = this.calculation.accurateMultiplication(sub, percent); |
||||||
|
var div = this.calculation.accurateDivisionTenExponent(mul, 2); |
||||||
|
if (this.precision >= 0) { |
||||||
|
return BI.parseFloat(this.calculation.accurateAddition(div, this.min).toFixed(this.precision)); |
||||||
|
} else { |
||||||
|
return BI.parseFloat(this.calculation.accurateAddition(div, this.min) - this.calculation.accurateAddition(div, this.min) % (Math.pow(10, (-1) * this.precision))); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_getPercentByValue: function (v) { |
||||||
|
return (v - this.min) * 100 / (this.max - this.min); |
||||||
|
}, |
||||||
|
|
||||||
|
_setDraggableEnable: function (enable) { |
||||||
|
if (enable) { |
||||||
|
this.sliderOne.element.draggable("enable"); |
||||||
|
this.sliderTwo.element.draggable("enable") |
||||||
|
} else { |
||||||
|
this.sliderOne.element.draggable("disable"); |
||||||
|
this.sliderTwo.element.draggable("disable") |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
if (this.valueOne <= this.valueTwo) { |
||||||
|
return { |
||||||
|
min: this.valueOne, |
||||||
|
max: this.valueTwo |
||||||
|
} |
||||||
|
} else { |
||||||
|
return { |
||||||
|
min: this.valueTwo, |
||||||
|
max: this.valueOne |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setMinAndMax: function (v) { |
||||||
|
var minNumber = BI.parseFloat(v.min); |
||||||
|
var maxNumber = BI.parseFloat(v.max); |
||||||
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber >= minNumber)) { |
||||||
|
this.min = minNumber; |
||||||
|
this.max = maxNumber; |
||||||
|
this.valueOne = minNumber; |
||||||
|
this.valueTwo = maxNumber; |
||||||
|
//计算每一份值的精度(最大值和最小值的差值保留4为有效数字后的精度)
|
||||||
|
//如果差值的整数位数大于4,toPrecision得到的是科学计数法1234 => 1.2e+3
|
||||||
|
var sub = this.calculation.accurateSubtraction(this.max, this.min); |
||||||
|
var pre = sub.toPrecision(4);
|
||||||
|
if(pre.indexOf("e") > -1 ){ |
||||||
|
this.precision = 3 - pre.charAt(pre.length - 1); |
||||||
|
}else{ |
||||||
|
var arr = pre.split("."); |
||||||
|
if(arr.length>1){ |
||||||
|
this.precision = arr[1].length; |
||||||
|
}else{ |
||||||
|
this.precision=0; |
||||||
|
}
|
||||||
|
} |
||||||
|
this._setDraggableEnable(true); |
||||||
|
} |
||||||
|
if (maxNumber === minNumber) { |
||||||
|
this._setDraggableEnable(false); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
var valueOne = BI.parseFloat(v.min); |
||||||
|
var valueTwo = BI.parseFloat(v.max); |
||||||
|
if (!isNaN(valueOne) && !isNaN(valueTwo)) { |
||||||
|
if (this._checkValidation(valueOne)) { |
||||||
|
this.valueOne = valueOne; |
||||||
|
} |
||||||
|
if (this._checkValidation(valueTwo)) { |
||||||
|
this.valueTwo = valueTwo; |
||||||
|
} |
||||||
|
if (valueOne < this.min) { |
||||||
|
this.valueOne = this.min; |
||||||
|
} |
||||||
|
if (valueTwo > this.max) { |
||||||
|
this.valueTwo = this.max; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
reset: function () { |
||||||
|
this._setVisible(false); |
||||||
|
this.enable = false; |
||||||
|
this.valueOne = ""; |
||||||
|
this.valueTwo = ""; |
||||||
|
this.min = NaN; |
||||||
|
this.max = NaN; |
||||||
|
this._setBlueTrackWidth(0); |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function () { |
||||||
|
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||||
|
this.enable = true; |
||||||
|
this._setVisible(true); |
||||||
|
this._setErrorText(); |
||||||
|
if ((BI.isNumeric(this.valueOne) || BI.isNotEmptyString(this.valueOne)) && (BI.isNumeric(this.valueTwo) || BI.isNotEmptyString(this.valueTwo))) { |
||||||
|
this.labelOne.setValue(this.valueOne); |
||||||
|
this.labelTwo.setValue(this.valueTwo); |
||||||
|
this._setAllPosition(this._getPercentByValue(this.valueOne), this._getPercentByValue(this.valueTwo)); |
||||||
|
} else { |
||||||
|
this.labelOne.setValue(this.min); |
||||||
|
this.labelTwo.setValue(this.max); |
||||||
|
this._setAllPosition(0, 100) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.IntervalSlider.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
BI.shortcut("bi.interval_slider", BI.IntervalSlider); |
||||||
@ -0,0 +1,222 @@ |
|||||||
|
/** |
||||||
|
* Created by zcf on 2017/3/1. |
||||||
|
* 万恶的IEEE-754 |
||||||
|
* 使用字符串精确计算含小数加法、减法、乘法和10的指数倍除法，支持负数 |
||||||
|
*/ |
||||||
|
BI.AccurateCalculationModel = BI.inherit(BI.Widget, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.AccurateCalculationModel.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "" |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_init: function () { |
||||||
|
BI.AccurateCalculationModel.superclass._init.apply(this, arguments); |
||||||
|
}, |
||||||
|
|
||||||
|
_getMagnitude: function (n) { |
||||||
|
var magnitude = "1"; |
||||||
|
for (var i = 0; i < n; i++) { |
||||||
|
magnitude += "0"; |
||||||
|
} |
||||||
|
return BI.parseInt(magnitude); |
||||||
|
}, |
||||||
|
|
||||||
|
_formatDecimal: function (stringNumber1, stringNumber2) { |
||||||
|
if (stringNumber1.numDecimalLength === stringNumber2.numDecimalLength) { |
||||||
|
return; |
||||||
|
} |
||||||
|
var magnitudeDiff = stringNumber1.numDecimalLength - stringNumber2.numDecimalLength; |
||||||
|
if (magnitudeDiff > 0) { |
||||||
|
var needAddZero = stringNumber2 |
||||||
|
} else { |
||||||
|
var needAddZero = stringNumber1; |
||||||
|
magnitudeDiff = (0 - magnitudeDiff); |
||||||
|
} |
||||||
|
for (var i = 0; i < magnitudeDiff; i++) { |
||||||
|
if (needAddZero.numDecimal === "0" && i === 0) { |
||||||
|
continue |
||||||
|
} |
||||||
|
needAddZero.numDecimal += "0" |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_stringNumberFactory: function (num) { |
||||||
|
var strNum = num.toString(); |
||||||
|
var numStrArray = strNum.split("."); |
||||||
|
var numInteger = numStrArray[0]; |
||||||
|
if (numStrArray.length === 1) { |
||||||
|
var numDecimal = "0"; |
||||||
|
var numDecimalLength = 0; |
||||||
|
} else { |
||||||
|
var numDecimal = numStrArray[1]; |
||||||
|
var numDecimalLength = numStrArray[1].length; |
||||||
|
} |
||||||
|
return { |
||||||
|
"numInteger": numInteger, |
||||||
|
"numDecimal": numDecimal, |
||||||
|
"numDecimalLength": numDecimalLength |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_accurateSubtraction: function (num1, num2) {//num1-num2 && num1>num2
|
||||||
|
var stringNumber1 = this._stringNumberFactory(num1); |
||||||
|
var stringNumber2 = this._stringNumberFactory(num2); |
||||||
|
//整数部分计算
|
||||||
|
var integerResult = BI.parseInt(stringNumber1.numInteger) - BI.parseInt(stringNumber2.numInteger); |
||||||
|
//小数部分
|
||||||
|
this._formatDecimal(stringNumber1, stringNumber2); |
||||||
|
var decimalMaxLength = getDecimalMaxLength(stringNumber1, stringNumber2); |
||||||
|
|
||||||
|
if (BI.parseInt(stringNumber1.numDecimal) >= BI.parseInt(stringNumber2.numDecimal)) { |
||||||
|
var decimalResultTemp = (BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||||
|
var decimalResult = addZero(decimalResultTemp, decimalMaxLength); |
||||||
|
} else {//否则借位
|
||||||
|
integerResult--; |
||||||
|
var borrow = this._getMagnitude(decimalMaxLength); |
||||||
|
var decimalResultTemp = (borrow + BI.parseInt(stringNumber1.numDecimal) - BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||||
|
var decimalResult = addZero(decimalResultTemp, decimalMaxLength); |
||||||
|
} |
||||||
|
var result = integerResult + "." + decimalResult; |
||||||
|
return BI.parseFloat(result); |
||||||
|
|
||||||
|
function getDecimalMaxLength(num1, num2) { |
||||||
|
if (num1.numDecimal.length >= num2.numDecimal.length) { |
||||||
|
return num1.numDecimal.length |
||||||
|
} |
||||||
|
return num2.numDecimal.length |
||||||
|
} |
||||||
|
|
||||||
|
function addZero(resultTemp, length) { |
||||||
|
var diff = length - resultTemp.length; |
||||||
|
for (var i = 0; i < diff; i++) { |
||||||
|
resultTemp = "0" + resultTemp; |
||||||
|
} |
||||||
|
return resultTemp |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_accurateAddition: function (num1, num2) {//加法结合律
|
||||||
|
var stringNumber1 = this._stringNumberFactory(num1); |
||||||
|
var stringNumber2 = this._stringNumberFactory(num2); |
||||||
|
//整数部分计算
|
||||||
|
var integerResult = BI.parseInt(stringNumber1.numInteger) + BI.parseInt(stringNumber2.numInteger); |
||||||
|
//小数部分
|
||||||
|
this._formatDecimal(stringNumber1, stringNumber2); |
||||||
|
|
||||||
|
var decimalResult = (BI.parseInt(stringNumber1.numDecimal) + BI.parseInt(stringNumber2.numDecimal)).toString(); |
||||||
|
|
||||||
|
if (decimalResult !== "0") { |
||||||
|
if (decimalResult.length <= stringNumber1.numDecimal.length) { |
||||||
|
decimalResult = addZero(decimalResult, stringNumber1.numDecimal.length) |
||||||
|
} else { |
||||||
|
integerResult++;//进一
|
||||||
|
decimalResult = decimalResult.slice(1); |
||||||
|
} |
||||||
|
} |
||||||
|
var result = integerResult + "." + decimalResult; |
||||||
|
return BI.parseFloat(result); |
||||||
|
|
||||||
|
function addZero(resultTemp, length) { |
||||||
|
var diff = length - resultTemp.length; |
||||||
|
for (var i = 0; i < diff; i++) { |
||||||
|
resultTemp = "0" + resultTemp; |
||||||
|
} |
||||||
|
return resultTemp |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_accurateMultiplication: function (num1, num2) {//乘法分配律
|
||||||
|
var stringNumber1 = this._stringNumberFactory(num1); |
||||||
|
var stringNumber2 = this._stringNumberFactory(num2); |
||||||
|
//整数部分计算
|
||||||
|
var integerResult = BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numInteger); |
||||||
|
//num1的小数和num2的整数
|
||||||
|
var dec1Int2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numInteger), stringNumber1.numDecimalLength); |
||||||
|
//num1的整数和num2的小数
|
||||||
|
var int1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numInteger) * BI.parseInt(stringNumber2.numDecimal), stringNumber2.numDecimalLength); |
||||||
|
//小数*小数
|
||||||
|
var dec1dec2 = this._accurateDivisionTenExponent(BI.parseInt(stringNumber1.numDecimal) * BI.parseInt(stringNumber2.numDecimal), (stringNumber1.numDecimalLength + stringNumber2.numDecimalLength)); |
||||||
|
|
||||||
|
return this._accurateAddition(this._accurateAddition(this._accurateAddition(integerResult, dec1Int2), int1dec2), dec1dec2); |
||||||
|
}, |
||||||
|
|
||||||
|
_accurateDivisionTenExponent: function (num, n) {// num/10^n && n>0
|
||||||
|
var stringNumber = this._stringNumberFactory(num); |
||||||
|
if (stringNumber.numInteger.length > n) { |
||||||
|
var integerResult = stringNumber.numInteger.slice(0, (stringNumber.numInteger.length - n)); |
||||||
|
var partDecimalResult = stringNumber.numInteger.slice(-n); |
||||||
|
} else { |
||||||
|
var integerResult = "0"; |
||||||
|
var partDecimalResult = addZero(stringNumber.numInteger, n); |
||||||
|
} |
||||||
|
var result = integerResult + "." + partDecimalResult + stringNumber.numDecimal; |
||||||
|
return BI.parseFloat(result); |
||||||
|
|
||||||
|
function addZero(resultTemp, length) { |
||||||
|
var diff = length - resultTemp.length; |
||||||
|
for (var i = 0; i < diff; i++) { |
||||||
|
resultTemp = "0" + resultTemp; |
||||||
|
} |
||||||
|
return resultTemp |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
accurateSubtraction: function (num1, num2) { |
||||||
|
if (num1 >= 0 && num2 >= 0) { |
||||||
|
if (num1 >= num2) { |
||||||
|
return this._accurateSubtraction(num1, num2) |
||||||
|
} |
||||||
|
return -this._accurateSubtraction(num2, num1) |
||||||
|
} |
||||||
|
if (num1 >= 0 && num2 < 0) { |
||||||
|
return this._accurateAddition(num1, -num2) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 >= 0) { |
||||||
|
return -this._accurateAddition(-num1, num2) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 < 0) { |
||||||
|
if (num1 >= num2) { |
||||||
|
return this._accurateSubtraction(-num2, -num1) |
||||||
|
} |
||||||
|
return this._accurateSubtraction(-num1, -num2) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
accurateAddition: function (num1, num2) { |
||||||
|
if (num1 >= 0 && num2 >= 0) { |
||||||
|
return this._accurateAddition(num1, num2) |
||||||
|
} |
||||||
|
if (num1 >= 0 && num2 < 0) { |
||||||
|
return this.accurateSubtraction(num1, -num2) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 >= 0) { |
||||||
|
return this.accurateSubtraction(num2, -num1) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 < 0) { |
||||||
|
return -this._accurateAddition(-num1, -num2) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
accurateMultiplication: function (num1, num2) { |
||||||
|
if (num1 >= 0 && num2 >= 0) { |
||||||
|
return this._accurateMultiplication(num1, num2) |
||||||
|
} |
||||||
|
if (num1 >= 0 && num2 < 0) { |
||||||
|
return -this._accurateMultiplication(num1, -num2) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 >= 0) { |
||||||
|
return -this._accurateMultiplication(-num1, num2) |
||||||
|
} |
||||||
|
if (num1 < 0 && num2 < 0) { |
||||||
|
return this._accurateMultiplication(-num1, -num2) |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
accurateDivisionTenExponent: function (num1, n) { |
||||||
|
if (num1 >= 0) { |
||||||
|
return this._accurateDivisionTenExponent(num1, n); |
||||||
|
} |
||||||
|
return -this._accurateDivisionTenExponent(-num1, n); |
||||||
|
} |
||||||
|
}); |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,299 @@ |
|||||||
|
/** |
||||||
|
* Created by zcf on 2016/9/22. |
||||||
|
*/ |
||||||
|
BI.SingleSlider = BI.inherit(BI.Widget, { |
||||||
|
_constant: { |
||||||
|
EDITOR_WIDTH: 60, |
||||||
|
EDITOR_HEIGHT: 30, |
||||||
|
HEIGHT: 28, |
||||||
|
SLIDER_WIDTH_HALF: 15, |
||||||
|
SLIDER_WIDTH: 30, |
||||||
|
SLIDER_HEIGHT: 30, |
||||||
|
TRACK_HEIGHT: 24 |
||||||
|
}, |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-single-slider bi-slider-track" |
||||||
|
}); |
||||||
|
}, |
||||||
|
_init: function () { |
||||||
|
BI.SingleSlider.superclass._init.apply(this, arguments); |
||||||
|
|
||||||
|
var self = this; |
||||||
|
var c = this._constant; |
||||||
|
this.enable = false; |
||||||
|
this.value = ""; |
||||||
|
|
||||||
|
this.backgroundTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "background-track bi-background", |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}); |
||||||
|
this.grayTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "gray-track", |
||||||
|
height: 8 |
||||||
|
}); |
||||||
|
this.blueTrack = BI.createWidget({ |
||||||
|
type: "bi.layout", |
||||||
|
cls: "blue-track bi-high-light-background", |
||||||
|
height: 8 |
||||||
|
}); |
||||||
|
this.track = this._createTrackWrapper(); |
||||||
|
|
||||||
|
this.slider = BI.createWidget({ |
||||||
|
type: "bi.single_slider_slider" |
||||||
|
}); |
||||||
|
this.slider.element.draggable({ |
||||||
|
axis: "x", |
||||||
|
containment: this.grayTrack.element, |
||||||
|
scroll: false, |
||||||
|
drag: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); //直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
|
||||||
|
self._setBlueTrack(significantPercent); |
||||||
|
self._setLabelPosition(significantPercent); |
||||||
|
var v = self._getValueByPercent(significantPercent); |
||||||
|
self.label.setValue(v); |
||||||
|
self.value = v; |
||||||
|
}, |
||||||
|
stop: function (e, ui) { |
||||||
|
var percent = (ui.position.left) * 100 / (self._getGrayTrackLength()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setSliderPosition(significantPercent); |
||||||
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}); |
||||||
|
var sliderVertical = BI.createWidget({ |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [this.slider] |
||||||
|
}], |
||||||
|
hgap: c.SLIDER_WIDTH_HALF, |
||||||
|
height: c.SLIDER_HEIGHT |
||||||
|
}); |
||||||
|
sliderVertical.element.click(function (e) { |
||||||
|
if (self.enable) { |
||||||
|
var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF; |
||||||
|
var trackLength = self.track.element[0].scrollWidth; |
||||||
|
var percent = 0; |
||||||
|
if (offset < 0) { |
||||||
|
percent = 0 |
||||||
|
} |
||||||
|
if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) { |
||||||
|
percent = offset * 100 / self._getGrayTrackLength(); |
||||||
|
} |
||||||
|
if (offset > (trackLength - c.SLIDER_WIDTH)) { |
||||||
|
percent = 100 |
||||||
|
} |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setAllPosition(significantPercent); |
||||||
|
var v = self._getValueByPercent(significantPercent); |
||||||
|
self.label.setValue(v); |
||||||
|
self.value = v; |
||||||
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.label = BI.createWidget({ |
||||||
|
type: "bi.sign_editor", |
||||||
|
cls: "slider-editor-button", |
||||||
|
errorText: "", |
||||||
|
height: c.HEIGHT, |
||||||
|
width: c.EDITOR_WIDTH, |
||||||
|
allowBlank: false, |
||||||
|
validationChecker: function (v) { |
||||||
|
return self._checkValidation(v); |
||||||
|
}, |
||||||
|
quitChecker: function (v) { |
||||||
|
return self._checkValidation(v); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.label.on(BI.SignEditor.EVENT_CONFIRM, function () { |
||||||
|
var percent = self._getPercentByValue(this.getValue()); |
||||||
|
var significantPercent = BI.parseFloat(percent.toFixed(1)); |
||||||
|
self._setAllPosition(significantPercent); |
||||||
|
self.fireEvent(BI.SingleSlider.EVENT_CHANGE); |
||||||
|
}); |
||||||
|
this.label.on(BI.SignEditor.EVENT_FOCUS, function () { |
||||||
|
self.label.element.addClass("bi-border"); |
||||||
|
}); |
||||||
|
this.label.on(BI.SignEditor.EVENT_BLUR, function () { |
||||||
|
self.label.element.removeClass("bi-border"); |
||||||
|
}); |
||||||
|
this._setVisible(false); |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.track, |
||||||
|
width: "100%", |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}] |
||||||
|
}], |
||||||
|
hgap: 7, |
||||||
|
height: c.TRACK_HEIGHT |
||||||
|
}, |
||||||
|
top: 33, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: sliderVertical, |
||||||
|
top: 30, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [this.label] |
||||||
|
}], |
||||||
|
rgap: c.EDITOR_WIDTH / 2, |
||||||
|
height: c.EDITOR_HEIGHT |
||||||
|
}, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_createTrackWrapper: function () { |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.backgroundTrack, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: this.grayTrack, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}, { |
||||||
|
el: this.blueTrack, |
||||||
|
top: 0, |
||||||
|
left: 0, |
||||||
|
width: "0%" |
||||||
|
}] |
||||||
|
}], |
||||||
|
hgap: 8, |
||||||
|
height: 8 |
||||||
|
}, |
||||||
|
top: 8, |
||||||
|
left: 0, |
||||||
|
width: "100%" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
_checkValidation: function (v) { |
||||||
|
return !(BI.isNull(v) || v < this.min || v > this.max) |
||||||
|
}, |
||||||
|
|
||||||
|
_setBlueTrack: function (percent) { |
||||||
|
this.blueTrack.element.css({ |
||||||
|
"width": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setLabelPosition: function (percent) { |
||||||
|
this.label.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setSliderPosition: function (percent) { |
||||||
|
this.slider.element.css({ |
||||||
|
"left": percent + "%" |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_setAllPosition: function (percent) { |
||||||
|
this._setSliderPosition(percent); |
||||||
|
this._setLabelPosition(percent); |
||||||
|
this._setBlueTrack(percent); |
||||||
|
}, |
||||||
|
|
||||||
|
_setVisible: function (visible) { |
||||||
|
this.slider.setVisible(visible); |
||||||
|
this.label.setVisible(visible); |
||||||
|
}, |
||||||
|
|
||||||
|
_getGrayTrackLength: function () { |
||||||
|
return this.grayTrack.element[0].scrollWidth |
||||||
|
}, |
||||||
|
|
||||||
|
_getValueByPercent: function (percent) { |
||||||
|
var thousandth = BI.parseInt(percent * 10); |
||||||
|
return (((this.max - this.min) * thousandth) / 1000 + this.min); |
||||||
|
}, |
||||||
|
|
||||||
|
_getPercentByValue: function (v) { |
||||||
|
return (v - this.min) * 100 / (this.max - this.min); |
||||||
|
}, |
||||||
|
|
||||||
|
getValue: function () { |
||||||
|
return this.value; |
||||||
|
}, |
||||||
|
|
||||||
|
setValue: function (v) { |
||||||
|
var value = BI.parseFloat(v); |
||||||
|
if ((!isNaN(value))) { |
||||||
|
if (this._checkValidation(value)) { |
||||||
|
this.value = value; |
||||||
|
} |
||||||
|
if (value > this.max) { |
||||||
|
this.value = this.max; |
||||||
|
} |
||||||
|
if (value < this.min) { |
||||||
|
this.value = this.min; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
setMinAndMax: function (v) { |
||||||
|
var minNumber = BI.parseFloat(v.min); |
||||||
|
var maxNumber = BI.parseFloat(v.max); |
||||||
|
if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber)) { |
||||||
|
this.min = minNumber; |
||||||
|
this.max = maxNumber; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
reset: function () { |
||||||
|
this._setVisible(false); |
||||||
|
this.enable = false; |
||||||
|
this.value = ""; |
||||||
|
this.min = 0; |
||||||
|
this.max = 0; |
||||||
|
this._setBlueTrack(0); |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function () { |
||||||
|
if (!isNaN(this.min) && !isNaN(this.max)) { |
||||||
|
this._setVisible(true); |
||||||
|
this.enable = true; |
||||||
|
this.label.setErrorText(BI.i18nText("BI-Please_Enter") + this.min + "-" + this.max + BI.i18nText("BI-Basic_De") + BI.i18nText("BI-Basic_Number")); |
||||||
|
if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) { |
||||||
|
this.label.setValue(this.value); |
||||||
|
this._setAllPosition(this._getPercentByValue(this.value)); |
||||||
|
} else { |
||||||
|
this.label.setValue(this.max); |
||||||
|
this._setAllPosition(100); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
|
BI.shortcut("bi.single_slider", BI.SingleSlider); |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
/** |
||||||
|
* Created by zcf on 2016/9/22. |
||||||
|
*/ |
||||||
|
BI.Slider = BI.inherit(BI.Widget, { |
||||||
|
_defaultConfig: function () { |
||||||
|
return BI.extend(BI.Slider.superclass._defaultConfig.apply(this, arguments), { |
||||||
|
baseCls: "bi-single-slider-slider" |
||||||
|
}); |
||||||
|
}, |
||||||
|
_init: function () { |
||||||
|
BI.extend(BI.Slider.superclass._init.apply(this, arguments)); |
||||||
|
this.slider = BI.createWidget({ |
||||||
|
type: "bi.icon_button", |
||||||
|
cls: "widget-slider-icon", |
||||||
|
iconWidth: 30, |
||||||
|
iconHeight: 30, |
||||||
|
height: 30, |
||||||
|
width: 30 |
||||||
|
}); |
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.absolute", |
||||||
|
element: this, |
||||||
|
items: [{ |
||||||
|
el: this.slider, |
||||||
|
top: 0, |
||||||
|
left: -15 |
||||||
|
}], |
||||||
|
width: 0, |
||||||
|
height: 30 |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("bi.single_slider_slider", BI.Slider); |
||||||
Loading…
Reference in new issue