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

无JIRA任务 整理一下fineui demo

es6
windy 6 years ago
parent
21860aa886
commit
1f68790a7d
18 changed files with 0 additions and 959 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      demo/js/base/demo.canvas.js
  2. 32
      demo/js/base/demo.svg.js
  3. 33
      demo/js/base/editor/demo.code_editor.js
  4. 21
      demo/js/base/editor/demo.formula_editor.js
  5. 61
      demo/js/base/editor/demo.rich_editor.js
  6. 33
      demo/js/base/editor/demo.sql_editor.js
  7. 42
      demo/js/case/demo.clipboard.js
  8. 35
      demo/js/case/demo.complex_canvas.js
  9. 33
      demo/js/case/editor/demo.sign_initial_editor.js
  10. 149
      demo/js/case/tree/demo.branch_relation.js
  11. 233
      demo/js/case/tree/demo.branch_tree.js
  12. 103
      demo/js/case/tree/demo.handstand_branch_tree.js
  13. 24
      demo/js/config/base.js
  14. 32
      demo/js/config/case.js
  15. 12
      demo/js/config/widget.js
  16. 57
      demo/js/widget/tree/demo.switchtree.js
  17. 4
      src/css/base/editor/editor.css
  18. 7
      src/less/base/editor/editor.sign.initial.less

48
demo/js/base/demo.canvas.js
Unescape View File

@ -1,48 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
var canvas = BI.createWidget({
type: "bi.canvas",
width: 500,
height: 600
});
canvas.rect(0, 0, 80, 100, "#7dbd2f");
canvas.line(80, 0, 100, 100, 200, 100, 300, 0, {
strokeStyle: "red",
lineWidth: 2
});
canvas.circle(150, 50, 20, "green");
// 渐变矩形
canvas.rect(0, 120, 80, 100, canvas.gradient(0, 120, 80, 220, "#FF0000", "#00FF00"));
// 空心图形
canvas.hollow(100, 120, 100, 220, 200, 120, {
strokeStyle: "blue"
});
// 实心图形
canvas.solid(100, 240, 200, 240, 150, 280, 200, 320, 100, 320, {
strokeStyle: "yellow",
fillStyle: "pink"
});
canvas.stroke();
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: canvas,
left: 100,
top: 50
}]
});
}
});
BI.shortcut("demo.canvas", Demo.Func);

32
demo/js/base/demo.svg.js
Unescape View File

@ -1,32 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
var svg = BI.createWidget({
type: "bi.svg",
width: 500,
height: 600
});
var circle = svg.circle(100, 100, 10);
circle.animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
var el = svg.rect(10, 200, 300, 200);
el.transform("t100,100r45t-100,0");
svg.path("M10,10L50,50M50,10L10,50")
.attr({stroke: "red"});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: svg,
left: 100,
top: 50
}]
});
}
});
BI.shortcut("demo.svg", Demo.Func);

33
demo/js/base/editor/demo.code_editor.js
Unescape View File

@ -1,33 +0,0 @@
Demo.CodeEditor = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-editor"
},
render: function () {
var editor = BI.createWidget({
type: "bi.code_editor",
cls: "mvc-border",
width: 600,
height: 400
});
BI.createWidget({
type: "bi.vertical",
element: this,
hgap: 30,
vgap: 20,
items: [editor, {
type: "bi.button",
text: "getValue",
handler: function () {
BI.Msg.toast(JSON.stringify(editor.getValue()));
}
}, {
type: "bi.button",
text: "setValue",
handler: function () {
editor.setValue("测试数据");
}
}]
});
}
});
BI.shortcut("demo.code_editor", Demo.CodeEditor);

21
demo/js/base/editor/demo.formula_editor.js
Unescape View File

@ -1,21 +0,0 @@
Demo.CodeEditor = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-editor"
},
render: function () {
this.formula = BI.createWidget({
type: "bi.formula_editor",
width: 300,
height: 200,
value: "SUM(C5, 16, 26)"
});
BI.createWidget({
type: "bi.left",
element: this,
items: [this.formula],
hgap: 20,
vgap: 20
});
}
});
BI.shortcut("demo.formula_editor", Demo.CodeEditor);

61
demo/js/base/editor/demo.rich_editor.js
Unescape View File

@ -1,61 +0,0 @@
Demo.RichEditor = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-rich-editor"
},
render: function () {
var self = this;
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: {
type: "bi.rich_editor",
height: "100%",
cls: "bi-border",
ref: function () {
self.editor = this;
},
toolbar: {
type: "bi.rich_editor_text_toolbar",
buttons: [
{type: "bi.rich_editor_font_chooser"},
{type: "bi.rich_editor_size_chooser"},
{type: "bi.rich_editor_bold_button"},
{type: "bi.rich_editor_italic_button"},
{type: "bi.rich_editor_underline_button"},
{type: "bi.rich_editor_color_chooser"},
{
type: "bi.rich_editor_background_color_chooser",
listeners: [{
eventName: "EVENT_CHANGE",
action: function (backgroundColor) {
self.editor.element.css({
backgroundColor: backgroundColor,
color: BI.DOM.getContrastColor(backgroundColor)
});
}
}]
},
{type: "bi.rich_editor_align_left_button"},
{type: "bi.rich_editor_align_center_button"},
{type: "bi.rich_editor_align_right_button"},
{type: "bi.rich_editor_param_button"}
]
}
},
left: 10,
top: 10,
bottom: 10,
right: 10
}]
});
},
mounted: function () {
var image = BI.DOM.getImage("测试");
var src = image.src;
var style = image.style;
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
}
});
BI.shortcut("demo.rich_editor", Demo.RichEditor);

33
demo/js/base/editor/demo.sql_editor.js
Unescape View File

@ -1,33 +0,0 @@
/**
* Created by Windy on 2017/12/15.
*/
Demo.SQLEditor = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-editor"
},
render: function () {
var self = this;
this.formula = BI.createWidget({
type : 'bi.sql_editor',
supportParam: true,
width : 300,
height : 200,
value : "select * from DEMO_CONTRACT where 合同类型 = ${长期协议} and 购买数量 = sum([1,2,3,4])"
});
BI.createWidget({
type: "bi.left",
element: this,
items: [this.formula, {
type: "bi.button",
height: 24,
handler: function () {
BI.Msg.alert("", self.formula.getValue());
}
}],
hgap: 20,
vgap: 20
})
}
});
BI.shortcut("demo.sql_editor", Demo.SQLEditor);

42
demo/js/case/demo.clipboard.js
Unescape View File

@ -1,42 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
var editor = BI.createWidget({
type: "bi.text_editor",
width: 200,
height: 30,
value: "这是复制的内容"
});
var clipboard = BI.createWidget({
type: "bi.clipboard",
width: 100,
height: 100,
cls: "layout-bg1",
copy: function () {
return editor.getValue();
},
afterCopy: function () {
BI.Msg.toast(editor.getValue());
}
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: editor,
left: 100,
top: 50
}, {
el: clipboard,
left: 100,
top: 100
}]
});
}
});
BI.shortcut("demo.clipboard", Demo.Func);

35
demo/js/case/demo.complex_canvas.js
Unescape View File

@ -1,35 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
var canvas = BI.createWidget({
type: "bi.complex_canvas",
width: 500,
height: 600
});
canvas.branch(55, 100, 10, 10, 100, 10, 200, 10, {
offset: 20,
strokeStyle: "red",
lineWidth: 2
});
canvas.branch(220, 155, 120, 110, 150, 200, {
offset: 40
});
canvas.stroke();
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: canvas,
left: 100,
top: 50
}]
});
}
});
BI.shortcut("demo.complex_canvas", Demo.Func);

33
demo/js/case/editor/demo.sign_initial_editor.js
Unescape View File

@ -1,33 +0,0 @@
/**
* Created by Dailer on 2017/7/11.
*/
Demo.SignInitialEditor = BI.inherit(BI.Widget, {
props: {
baseCls: ""
},
mounted: function () {
this.editor.setValue({
value: "123",
text: "sdga"
});
},
render: function () {
var self = this;
return {
type: "bi.horizontal_adapt",
items: [{
type: "bi.sign_initial_editor",
ref: function () {
self.editor = this;
},
cls: "layout-bg5",
text: "原始值",
width: 300
}],
vgap: 20
};
}
});
BI.shortcut("demo.sign_initial_editor", Demo.SignInitialEditor);

149
demo/js/case/tree/demo.branch_relation.js
Unescape View File

@ -1,149 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
render: function () {
var relation = BI.createWidget({
type: "bi.branch_relation",
items: [
{
id: -1,
value: "根目录",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 1,
pId: -1,
value: "第一级目录1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 11,
pId: 1,
value: "第二级文件1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 12,
pId: 1,
value: "第二级目录1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 121,
pId: 12,
value: "第三级目录1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 122,
pId: 12,
value: "第三级文件1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 1211,
pId: 121,
value: "第四级目录",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 12111,
pId: 1211,
value: "第五级文件1",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 2,
pId: -1,
value: "第一级目录2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 21,
pId: 2,
value: "第二级目录2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 22,
pId: 2,
value: "第二级文件2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 211,
pId: 21,
value: "第三级目录2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 212,
pId: 21,
value: "第三级文件2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
},
{
id: 2111,
pId: 211,
value: "第四级文件2",
type: "bi.text_button",
cls: "layout-bg2",
width: 180,
height: 100
}
],
direction: BI.Direction.Right,
align: BI.HorizontalAlign.Right,
centerOffset: -50
});
BI.createWidget({
type: "bi.adaptive",
element: this,
items: [relation]
});
}
});
BI.shortcut("demo.branch_relation", Demo.Func);

233
demo/js/case/tree/demo.branch_tree.js
Unescape View File

@ -1,233 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
_createBranchTree: function () {
var tree = BI.createWidget({
type: "bi.branch_tree",
items: [{
el: {
text: "且",
value: "且1",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1",
value: "这里是一段文字1"
}, {
el: {
text: "或",
value: "或2",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1435",
value: "这里是一段文字1435"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xx",
value: "这里是一段文字1xx"
}, {
el: {
text: "且",
value: "且3",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件",
value: "可以理解为一个条件"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件v",
value: "可以理解为一个条件v"
}]
}]
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xa",
value: "这里是一段文字1xa"
}]
}]
});
return tree;
},
_createBranchMapTree: function () {
var tree = BI.createWidget({
type: "bi.branch_tree",
el: {
type: "bi.virtual_group"
},
items: [{
text: "且",
value: "且1",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1",
value: "这里是一段文字1"
}, {
text: "或",
value: "或2",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1435",
value: "这里是一段文字1435"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xx",
value: "这里是一段文字1xx"
}, {
text: "且",
value: "且3",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件",
value: "可以理解为一个条件"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件v",
value: "可以理解为一个条件v"
}]
}]
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xa",
value: "这里是一段文字1xa"
}]
}]
});
return tree;
},
render: function () {
var tree = this._createBranchTree();
var mapTree = this._createBranchMapTree();
function getItems () {
return [{
text: "且",
value: "且",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字",
value: "这里是一段文字"
}, {
text: "或",
value: "或2",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字",
value: "这里是一段文字"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字",
value: "这里是一段文字"
}, {
text: "且",
value: "且3",
cls: "layout-bg7",
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件",
value: "可以理解为一个条件"
}]
}]
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xa",
value: "这里是一段文字1xa"
}]
}];
}
BI.createWidget({
type: "bi.center",
element: this,
items: [{
type: "bi.vtape",
items: [{
el: tree
}, {
height: 30,
el: {
type: "bi.button",
height: 30,
text: "getValue",
handler: function () {
BI.Msg.alert("", tree.getValue());
}
}
}]
}, {
type: "bi.vtape",
items: [{
el: mapTree
}, {
height: 30,
el: {
type: "bi.button",
height: 30,
text: "populate",
handler: function () {
mapTree.populate(getItems());
}
}
}, {
height: 30,
el: {
type: "bi.button",
height: 30,
text: "getValue",
handler: function () {
BI.Msg.alert("", mapTree.getValue());
}
}
}]
}]
});
}
});
BI.shortcut("demo.branch_tree", Demo.Func);

103
demo/js/case/tree/demo.handstand_branch_tree.js
Unescape View File

@ -1,103 +0,0 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
},
_createHandStandBranchTree: function () {
var tree = BI.createWidget({
type: "bi.handstand_branch_tree",
expander: {},
el: {
layouts: [{
type: "bi.horizontal_adapt",
verticalAlign: BI.VerticalAlign.Top
}]
},
items: [{
el: {
text: "且",
value: "且1",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1",
value: "这里是一段文字1"
}, {
el: {
text: "或",
value: "或2",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1435",
value: "这里是一段文字1435"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xx",
value: "这里是一段文字1xx"
}, {
el: {
text: "且",
value: "且3",
cls: "layout-bg7"
},
children: [{
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件",
value: "可以理解为一个条件"
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "可以理解为一个条件v",
value: "可以理解为一个条件v"
}]
}]
}, {
type: "bi.label",
height: 30,
textAlign: "left",
text: "这里是一段文字1xa",
value: "这里是一段文字1xa"
}]
}]
});
return tree;
},
render: function () {
var tree = this._createHandStandBranchTree();
BI.createWidget({
type: "bi.center",
element: this,
items: [{
type: "bi.vtape",
items: [{
el: tree
}, {
height: 30,
el: {
type: "bi.button",
height: 30,
text: "getValue",
handler: function () {
BI.Msg.alert("", tree.getValue());
}
}
}]
}]
});
}
});
BI.shortcut("demo.handstand_branch_tree", Demo.Func);

24
demo/js/config/base.js
Unescape View File

@ -54,10 +54,6 @@ Demo.BASE_CONFIG = [{
pId: 202,
text: "bi.editor",
value: "demo.editor"
}, {
pId: 202,
text: "bi.code_editor",
value: "demo.code_editor"
}, {
pId: 202,
text: "bi.multifile_editor",
@ -66,18 +62,6 @@ Demo.BASE_CONFIG = [{
pId: 202,
text: "bi.textarea_editor",
value: "demo.textarea_editor"
}, {
pId: 202,
text: "bi.sql_editor",
value: "demo.sql_editor"
}, {
pId: 202,
text: "bi.formula_editor",
value: "demo.formula_editor"
}, {
pId: 202,
text: "bi.rich_editor",
value: "demo.rich_editor"
}, {
pId: 2,
id: 203,
@ -98,12 +82,4 @@ Demo.BASE_CONFIG = [{
pId: 2,
text: "bi.pager",
value: "demo.pager"
}, {
pId: 2,
text: "bi.svg",
value: "demo.svg"
}, {
pId: 2,
text: "bi.canvas",
value: "demo.canvas"
}];

32
demo/js/config/case.js
Unescape View File

@ -30,10 +30,6 @@ Demo.CASE_CONFIG = [{
pId: 301,
text: "bi.sign_editor",
value: "demo.sign_editor"
}, {
pId: 301,
text: "bi.sign_initial_editor",
value: "demo.sign_initial_editor"
}, {
pId: 301,
text: "bi.state_editor",
@ -58,14 +54,6 @@ Demo.CASE_CONFIG = [{
pId: 302,
text: "bi.lazy_loader",
value: "demo.lazy_loader"
}, {
pId: 302,
text: "bi.sort_list(排序)",
value: "demo.sort_list"
}, {
pId: 302,
text: "bi.list_loader(排序)",
value: "demo.list_loader"
}, {
pId: 3,
id: 303,
@ -150,14 +138,6 @@ Demo.CASE_CONFIG = [{
pId: 3,
id: 307,
text: "tree"
}, {
pId: 307,
text: "bi.branch_tree",
value: "demo.branch_tree"
}, {
pId: 307,
text: "bi.handstand_branch_tree",
value: "demo.handstand_branch_tree"
}, {
pId: 307,
text: "bi.display_tree",
@ -170,10 +150,6 @@ Demo.CASE_CONFIG = [{
pId: 307,
text: "bi.level_tree",
value: "demo.level_tree"
}, {
pId: 307,
text: "bi.branch_relation",
value: "demo.branch_relation"
}, {
pId: 3,
id: 309,
@ -190,14 +166,6 @@ Demo.CASE_CONFIG = [{
pId: 3,
text: "bi.calendar",
value: "demo.calendar"
}, {
pId: 3,
text: "bi.clipboard",
value: "demo.clipboard"
}, {
pId: 3,
text: "bi.complex_canvas",
value: "demo.complex_canvas"
}, {
pId: 3,
text: "bi.color_chooser",

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

@ -62,10 +62,6 @@ Demo.WIDGET_CONFIG = [{
pId: 403,
text: "bi.multilayer_select_level_tree",
value: "demo.multilayer_select_level_tree"
}, {
pId: 403,
text: "bi.switch_tree",
value: "demo.switch_tree"
}, {
pId: 4,
id: 405,
@ -190,14 +186,6 @@ Demo.WIDGET_CONFIG = [{
pId: 413,
text: "bi.number_interval",
value: "demo.number_interval"
}, {
pId: 4,
id: 419,
text: "文件管理"
}, {
pId: 419,
text: "bi.file_manager",
value: "demo.file_manager"
}, {
id: 420,
text: "滚动sliders",

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

@ -1,57 +0,0 @@
/**
* Created by Dailer on 2017/7/26.
*/
Demo.SwitchTree = BI.inherit(BI.Widget, {
render: function () {
var self = this;
var tree = BI.createWidget({
type: "bi.switch_tree",
items: BI.deepClone(Demo.CONSTANTS.TREE),
value: "第五级文件1"
});
return {
type: "bi.vtape",
items: [{
el: tree
}, {
el: {
type: "bi.button",
height: 25,
text: "点击切换",
handler: function () {
tree.switchSelect();
}
},
height: 25
}, {
el: {
type: "bi.button",
height: 25,
text: "getValue",
handler: function () {
BI.Msg.alert("", JSON.stringify(tree.getValue()));
}
},
height: 25
}, {
el: {
type: "bi.button",
height: 25,
text: "setValue (第二级文件1)",
handler: function () {
tree.setValue(["第二级文件1"]);
}
},
height: 25
}],
width: 500,
hgap: 300
};
}
});
BI.shortcut("demo.switch_tree", Demo.SwitchTree);

4
src/css/base/editor/editor.css
Unescape View File

@ -27,7 +27,3 @@
.bi-small-search-editor .search-font {
font-size: 18px;
}
.bi-sign-initial-editor .sign-initial-editor-text {
font-size: 14px;
}

7
src/less/base/editor/editor.sign.initial.less
Unescape View File

@ -1,7 +0,0 @@
@import "../../index";
.bi-sign-initial-editor{
.sign-initial-editor-text{
font-size: @font-size-14;
}
}
Write Preview
Loading…
Cancel
Save