Examples
List of modules
-
Ace Editor
Affix
Alert
Audio
Button
Carousel
Char Counter
Color Picker
Data Table
Datepicker
Diagram Builder
Dropdown
Form Builder
Form Validator
I/O
Image Cropper
Image Viewer
Modal
Node
Pagination
Popover
Progress Bar
Rating
Scheduler
Scrollspy
Sortable Layout
Sortable List
Tabview
Timepicker
Toggler
Toolbar
Tooltip
TreeView
Video
Viewport
Diagram Builder
Drag and drop diagram elements, create new tasks, draw connectors from node to node.
<div id="diagram-builder-bb">
<div id="diagram-builder-sn"></div>
</div>
YUI().use(
'aui-diagram-builder',
function(Y) {
var availableFields = [
{
iconClass: 'diagram-node-task-icon',
label: 'Task',
type: 'task'
}
];
var diagramBuilder = new Y.DiagramBuilder (
{
availableFields: availableFields,
boundingBox: '#diagram-builder-bb',
fields: [
{
name: 'StartNode',
type: 'start',
xy: [10, 10]
},
{
name: 'EndNode',
type: 'end',
xy: [300, 400]
}
],
render: true,
srcNode: '#diagram-builder-sn'
}
);
diagramBuilder.connectAll(
[
{
connector: {
name: 'TaskConnector'
},
source: 'StartNode',
target: 'EndNode'
}
]
);
}
);