forked from fanruan/fineui
Browse Source
Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit 'ed05129bcfb27ed4a3169b1cda7144100c11e4b7': 整理代码 整理代码 整理代码 config放get的时候执行es6
guy
3 years ago
10 changed files with 802 additions and 148 deletions
@ -0,0 +1,74 @@
|
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> |
||||
<script src="../dist/2.0/fineui.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
|
||||
BI.Plugin.configRender("demo.parent", function (rendered) { |
||||
console.log(rendered); |
||||
return rendered; |
||||
}); |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
setup: function () { |
||||
var wrapper, list; |
||||
return function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.vertical", |
||||
invisible: true, |
||||
ref: function (_ref) { |
||||
wrapper = _ref; |
||||
}, |
||||
items: [{ |
||||
type: "bi.button_group", |
||||
height: 100, |
||||
ref: function (_ref) { |
||||
list = _ref; |
||||
}, |
||||
items: [], |
||||
layouts: [{ |
||||
type: "bi.inline", |
||||
tgap: 10, |
||||
lgap: 10 |
||||
}] |
||||
}] |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击", |
||||
handler: function () { |
||||
list.populate(BI.range(10).map(function (i) { |
||||
return { |
||||
type: "bi.label", |
||||
text: i, |
||||
cls: "bi-border" |
||||
}; |
||||
})); |
||||
wrapper.setVisible(true); |
||||
} |
||||
}] |
||||
}; |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.parent", Widget); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "demo.parent" |
||||
}, |
||||
top: 100, |
||||
left: 100 |
||||
}], |
||||
element: "#wrapper" |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,125 @@
|
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> |
||||
<script src="../dist/2.0/fineui.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
!(function () { |
||||
|
||||
var element2InstanceMap = new WeakMap(); |
||||
|
||||
BI.getInstanceByElement = function (element) { |
||||
return element2InstanceMap.get(element); |
||||
}; |
||||
|
||||
BI.Plugin.config(function (options) { |
||||
|
||||
}, function (shortcut, instance) { |
||||
instance.element.attr("shortcut", shortcut); |
||||
if (instance.options.$testId) { |
||||
setIDAttribute(instance.element[0], instance.options.$testId); |
||||
} |
||||
element2InstanceMap.set(instance.element[0], instance); |
||||
}); |
||||
|
||||
function setIDAttribute (element, id) { |
||||
if (element.id !== "") { |
||||
throw new Error("不能修改有默认id的元素"); |
||||
} |
||||
element.setAttribute("id", id); |
||||
} |
||||
|
||||
function registerWidgetIdGenerator () { |
||||
|
||||
const idSet = new Set(); |
||||
|
||||
return function (shortcut, id) { |
||||
if (idSet.has(id)) { |
||||
throw new Error("id重复了"); |
||||
} |
||||
idSet.add(id); |
||||
BI.Plugin.registerObject(shortcut, function (widget) { |
||||
setIDAttribute(widget.element[0], id); |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
BI.registerWidgetId = registerWidgetIdGenerator(); |
||||
}()); |
||||
</script> |
||||
<script> |
||||
|
||||
function setTestId (parentShortcut, childShortcut, testId) { |
||||
BI.Plugin.configRender(parentShortcut, function (rendered) { |
||||
var queue = BI.isArray(rendered) ? rendered : [rendered];// 广度遍历 |
||||
while (queue.length > 0) { |
||||
var element = queue.shift(); |
||||
BI.each(element, function (key, value) { |
||||
if (BI.isArray(value)) { |
||||
queue = queue.concat(value); |
||||
} else if (BI.isPlainObject(value)) { |
||||
queue.push(value); |
||||
} else if ("type" === key && value === childShortcut) { |
||||
element.$testId = testId; |
||||
} |
||||
}); |
||||
} |
||||
return rendered; |
||||
}); |
||||
} |
||||
|
||||
setTestId("demo.parent", "bi.button_group", "测试testId"); |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
setup: function () { |
||||
var list; |
||||
return function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.button_group", |
||||
height: 100, |
||||
ref: function (_ref) { |
||||
list = _ref; |
||||
}, |
||||
items: BI.range(10).map(function (i) { |
||||
return { |
||||
type: "bi.label", |
||||
text: i, |
||||
cls: "bi-border" |
||||
}; |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.inline", |
||||
tgap: 10, |
||||
lgap: 10 |
||||
}] |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击", |
||||
handler: function () { |
||||
} |
||||
}] |
||||
}; |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.parent", Widget); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "demo.parent" |
||||
}, |
||||
top: 100, |
||||
left: 100 |
||||
}], |
||||
element: "#wrapper" |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,89 @@
|
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> |
||||
<script src="../dist/2.0/fineui.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
props: { |
||||
vdom: true |
||||
}, |
||||
watch: { |
||||
text: function () { |
||||
this.reset(); |
||||
} |
||||
}, |
||||
setup: function () { |
||||
var list, count = 0; |
||||
return function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.virtual_group", |
||||
height: 100, |
||||
ref: function (_ref) { |
||||
list = _ref; |
||||
}, |
||||
items: BI.range(10).map(function (item, i) { |
||||
var r = { |
||||
type: "bi.label", |
||||
text: item, |
||||
// 指定key后,会根据key值进行前后两次数据对比,否则会根据数组索引进行数据对比 |
||||
key: item, |
||||
cls: "bi-border" |
||||
}; |
||||
if (i === 9) { |
||||
r.width = "fill"; |
||||
r.key = "唯一的标识"; |
||||
} |
||||
return r; |
||||
}), |
||||
layouts: [{ |
||||
type: "bi.inline", |
||||
tgap: 10, |
||||
lgap: 10 |
||||
}] |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击删除第一个元素", |
||||
handler: function () { |
||||
count++; |
||||
list.populate(BI.range(10 - count).map(function (i) { |
||||
var r = { |
||||
type: "bi.label", |
||||
text: i + count, |
||||
key: i + count, |
||||
cls: "bi-border" |
||||
}; |
||||
if (i + count === 9) { |
||||
r.width = "fill"; |
||||
r.key = "唯一的标识"; |
||||
} |
||||
return r; |
||||
})); |
||||
} |
||||
}] |
||||
}; |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.parent", Widget); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "demo.parent" |
||||
}, |
||||
top: 100, |
||||
left: 100 |
||||
}], |
||||
element: "#wrapper" |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
@ -0,0 +1,220 @@
|
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title></title> |
||||
<link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.css"/> |
||||
<script src="../dist/2.0/fineui.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="wrapper"></div> |
||||
<script> |
||||
|
||||
var Item = BI.inherit(BI.BasicButton, { |
||||
|
||||
props: { |
||||
baseCls: "bi-list-item-active" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
textAlign: "left", |
||||
text: this.options.text |
||||
}, |
||||
lgap: this.options.layer * 24 + 24 |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.options.id; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.example.single_custom_tree.item", Item); |
||||
|
||||
var Node = BI.inherit(BI.NodeButton, { |
||||
|
||||
props: { |
||||
baseCls: "bi-list-item" |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.vertical_adapt", |
||||
items: [ |
||||
{ |
||||
el: { |
||||
type: "bi.label", |
||||
ref: function (_ref) { |
||||
self.icon = _ref; |
||||
}, |
||||
text: this.options.open ? "-" : "+", |
||||
height: 24, |
||||
width: 24 |
||||
}, |
||||
lgap: this.options.layer * 24 |
||||
}, { |
||||
type: "bi.label", |
||||
textAlign: "left", |
||||
text: this.options.text |
||||
} |
||||
] |
||||
}; |
||||
}, |
||||
|
||||
setOpened: function (b) { |
||||
Node.superclass.setOpened.apply(this, arguments); |
||||
this.icon.setText(b ? "-" : "+"); |
||||
}, |
||||
|
||||
getValue: function () { |
||||
return this.options.id; |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.example.single_custom_tree.node", Node); |
||||
|
||||
var mockData = [ |
||||
{ |
||||
id: "无锡", |
||||
text: "无锡", |
||||
isParent: true |
||||
}, { |
||||
id: "锡山区", |
||||
text: "锡山区", |
||||
pId: "无锡", |
||||
isParent: true |
||||
}, { |
||||
id: "安镇街道", |
||||
text: "安镇街道", |
||||
pId: "锡山区" |
||||
}, { |
||||
id: "滨湖区", |
||||
text: "滨湖区", |
||||
pId: "无锡" |
||||
}, { |
||||
id: "南京", |
||||
text: "南京", |
||||
isParent: true |
||||
}, { |
||||
id: "建邺区", |
||||
text: "建邺区", |
||||
pId: "南京" |
||||
} |
||||
]; |
||||
|
||||
|
||||
var Tree = BI.inherit(BI.Widget, { |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
return { |
||||
type: "bi.custom_tree", |
||||
ref: function (_ref) { |
||||
self.tree = _ref; |
||||
}, |
||||
expander: { |
||||
type: "bi.expander", |
||||
isDefaultInit: false, |
||||
el: {}, |
||||
popup: { |
||||
type: "bi.custom_tree" |
||||
} |
||||
}, |
||||
el: { |
||||
type: "bi.button_tree", |
||||
chooseType: 0, |
||||
layouts: [ |
||||
{ |
||||
type: "bi.vertical" |
||||
} |
||||
] |
||||
}, |
||||
items: [] |
||||
}; |
||||
}, |
||||
|
||||
_formatItems: function (items) { |
||||
|
||||
var nodes = BI.map(items, function (index, item) { |
||||
return BI.extend({ |
||||
type: item.isParent ? "bi.example.single_custom_tree.node" : "bi.example.single_custom_tree.item" |
||||
}, item); |
||||
}); |
||||
|
||||
return this.traversalLayers(BI.Tree.transformToTreeFormat(nodes), 0); |
||||
}, |
||||
|
||||
|
||||
traversalLayers: function (items, layer) { |
||||
var self = this; |
||||
BI.each(items, function (index, item) { |
||||
item.layer = layer; |
||||
if (item.children) { |
||||
self.traversalLayers(item.children, layer + 1); |
||||
} |
||||
}); |
||||
return items; |
||||
}, |
||||
|
||||
populate: function (items) { |
||||
this.tree.populate(this._formatItems(items)); |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.example.single_custom_tree", Tree); |
||||
|
||||
var Widget = BI.inherit(BI.Widget, { |
||||
setup: function () { |
||||
var wrapper, tree; |
||||
return function () { |
||||
return { |
||||
type: "bi.vertical", |
||||
items: [{ |
||||
type: "bi.vertical", |
||||
invisible: true, |
||||
ref: function (_ref) { |
||||
wrapper = _ref; |
||||
}, |
||||
items: [{ |
||||
type: "bi.example.single_custom_tree", |
||||
height: 100, |
||||
ref: function (_ref) { |
||||
tree = _ref; |
||||
} |
||||
}] |
||||
}, { |
||||
type: "bi.button", |
||||
text: "点击", |
||||
handler: function () { |
||||
tree.populate(mockData); |
||||
wrapper.setVisible(true); |
||||
} |
||||
}] |
||||
}; |
||||
}; |
||||
} |
||||
}); |
||||
BI.shortcut("demo.parent", Widget); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: { |
||||
type: "demo.parent" |
||||
}, |
||||
top: 100, |
||||
left: 100 |
||||
}], |
||||
element: "#wrapper" |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
Loading…
Reference in new issue