- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
(抱歉,我是 web 开发的初学者,我不知道这个问题在哪里,因此有这么多标签..)
我一直在玩diagram builder example在合金用户界面中。它看起来很适合绘图,但之后我需要理解它(即将其转换为 xml 格式),以便我可以将信息发送到另一个应用程序。我试图在渲染后捕获相关的 html 部分,它看起来像这样:
(整理版here)
<div id="myDiagramContainer" class="yui3-widget aui-component aui-diagram-builder aui-diagram-builder-focused">
<div id="myDiagramBuilder" class="aui-diagram-builder-content aui-layout"><div id="yui_3_9_0pr3_1_1372686463356_237" class="yui3-widget aui-tabbable"><div id="yui_3_9_0pr3_1_1372686463356_239" class="aui-tabbable-content"><ul class="aui-nav aui-nav-tabs"><li id="yui_3_9_0pr3_1_1372686463356_266" class="yui3-widget aui-tab aui-active aui-tab-selected" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_268" class="aui-tab-content aui-tab-label" role="tab" tabindex="0">Add node</a></li><li id="yui_3_9_0pr3_1_1372686463356_285" class="yui3-widget aui-tab aui-tab-disabled aui-disabled" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_287" class="aui-tab-content aui-tab-label" role="tab" tabindex="-1">Settings</a></li></ul><div class="aui-tab-content" id="yui_3_9_0pr3_1_1372686463356_719"><div class="aui-tab-pane aui-active" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_268" id="yui_3_9_0pr3_1_1372686463356_718"><ul class="aui-diagram-builder-fields-container aui-clearfix" id="yui_3_9_0pr3_1_1372686463356_717"><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Start"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-start-icon" id="yui_3_9_0pr3_1_1372686463356_716"></span><div class="aui-diagram-builder-field-label">Start</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Task"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-task-icon" id="yui_3_9_0pr3_1_1372686463356_972"></span><div class="aui-diagram-builder-field-label">Task</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="State"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-state-icon"></span><div class="aui-diagram-builder-field-label">State</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Join"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-join-icon"></span><div class="aui-diagram-builder-field-label">Join</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Fork"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-fork-icon"></span><div class="aui-diagram-builder-field-label">Fork</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Condition"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-condition-icon"></span><div class="aui-diagram-builder-field-label">Condition</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="End"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-end-icon" id="yui_3_9_0pr3_1_1372686463356_1253"></span><div class="aui-diagram-builder-field-label">End</div></li></ul></div><div class="aui-tab-pane" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_287" id="yui_3_9_0pr3_1_1372686463356_2499"><div id="yui_3_9_0pr3_1_1372686463356_2164" class="aui-table-selection yui3-widget yui3-datatable aui-table aui-table-property-list aui-table-sortable aui-table-scrollable-x aui-table-striped" tabindex="0" style="width: 260px;"><div id="yui_3_9_0pr3_1_1372686463356_2166" class="aui-table-content"><div class="aui-table-x-scroller" style="width: 258px;" id="yui_3_9_0pr3_1_1372686463356_2491"><table cellspacing="0" class="aui-table-table" id="yui_3_9_0pr3_1_1372686463356_2326" style="width: 100%;"><colgroup id="yui_3_9_0pr3_1_1372686463356_2375"><col><col style="width: auto;"></colgroup><thead class="aui-table-columns" id="yui_3_9_0pr3_1_1372686463356_2336"><tr><th id="yui_3_9_0pr3_1_1372686463356_2200" colspan="1" rowspan="1" class="aui-table-header aui-table-first-header aui-table-col-name aui-table-sortable-column" scope="col" data-yui3-col-id="name" title="Sort by Property Name" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2200"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Property Name<span class="aui-table-sort-indicator"></span></div></th><th id="yui_3_9_0pr3_1_1372686463356_2201" colspan="1" rowspan="1" class="aui-table-header aui-table-col-value aui-table-sortable-column" scope="col" data-yui3-col-id="value" title="Sort by Value" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2201"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Value<span class="aui-table-sort-indicator"></span></div></th></tr></thead><tbody class="aui-table-data" id="yui_3_9_0pr3_1_1372686463356_2486"><tr id="yui_3_9_0pr3_1_1372686463356_3688" data-yui3-record="model_11" class="aui-table-even "><td class="aui-table-col-name aui-table-cell ">Name</td><td class="aui-table-col-value aui-table-cell ">2</td></tr></tbody></table></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_2388" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn">Close</button></div></div></div></div></div><div class="aui-diagram-builder-content-container" id="yui_3_9_0pr3_1_1372686463356_1249"><div tabindex="1" class="aui-diagram-builder-canvas" id="yui_3_9_0pr3_1_1372686463356_1248"><div class="aui-diagram-builder-drop-container yui3-dd-drop" id="yui_3_9_0pr3_1_1372686463356_191"><div id="yui_3_9_0pr3_1_1372686463356_740" class="aui-diagram-node-start yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Start" style="height: 40px; width: 40px; left: 151px; top: 213px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_742" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_971"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_970"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_827" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_833" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2144">Start</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_2776"><div id="yui_3_9_0pr3_1_1372686463356_932" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_2775"><i class="aui-icon-remove"></i> </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_989" class="aui-diagram-node-task yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Task" style="height: 70px; width: 70px; left: 355px; top: 202px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_991" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1205"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 70px; height: 70px;" id="yui_3_9_0pr3_1_1372686463356_1204"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1064" width="77" height="77" viewBox="-7 -7 77 77" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 77px; height: 77px;"><svg:rect id="yui_3_9_0pr3_1_1372686463356_1070" pointer-events="visiblePainted" width="55" height="55" x="0" y="0" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,8,8)" style="left: 0px; top: 0px;" class="yui3-shape yui3-svgShape yui3-rect yui3-svgRect aui-diagram-node-shape-boundary"></svg:rect></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_1206">Task</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_1207"><div id="yui_3_9_0pr3_1_1372686463356_1169" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_1208"><i class="aui-icon-remove"></i> </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_1270" class="aui-diagram-node-end yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_End" style="height: 40px; width: 40px; left: 566px; top: 214px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_1272" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1486"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_1485"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1345" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_1351" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2755">End</div><div class="aui-diagram-builder-controls"><div id="yui_3_9_0pr3_1_1372686463356_1450" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn"><i class="aui-icon-remove"></i> </button></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 1019px; height: 600px;" id="yui_3_9_0pr3_1_1372686463356_3872"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_202" style="position: absolute; top: -7px; left: -298px; overflow: auto; visibility: visible; width: 888px; height: 266px;" width="888" height="266" viewBox="-298 -7 888 266"><svg:path id="yui_3_9_0pr3_1_1372686463356_669" pointer-events="visiblePainted" width="569" height="241" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M402, 237C487,237 487, 241 572, 241"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_671" pointer-events="visiblePainted" width="572.9999934834163" height="246.93858848751862" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M572, 241 M555.0217716335618, 234.93866668652237 L559.0000847155875, 240.95306815478037, 554.9784499302822, 246.93858848751862, 572.9999934834163, 241.00361014194, 555.0217716335618, 234.93866668652237z"></svg:path><svg:circle id="yui_3_9_0pr3_1_1372686463356_831" pointer-events="visiblePainted" r="12" cx="344" cy="237" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1068" pointer-events="visiblePainted" r="12" cx="572" cy="241" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1349" pointer-events="visiblePainted" r="12" cx="12" cy="12" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:path id="yui_3_9_0pr3_1_1372686463356_1770" pointer-events="visiblePainted" width="341" height="234" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M186, 233C273.5,233 273.5, 232 361, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_1772" pointer-events="visiblePainted" width="344.99999952849356" height="239.98348866894088" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M361, 232 M343.99474600913277, 226.01490712636024 L348.00000499653675, 232.0113978037331, 344.00526705873256, 238.0149025141725, 361.99999961565106, 231.99912324586668, 343.99474600913277, 226.01490712636024z"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2113" pointer-events="visiblePainted" width="566.1" height="239" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M421, 232C496,232 496, 232 571, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2115" pointer-events="visiblePainted" width="570" height="245" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M571, 232 M554, 226 L558, 232, 554, 238, 572, 232, 554, 226z"></svg:path></svg:svg></div><span class="aui-diagram-builder-connector-name aui-unselectable aui-hide">connector655</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 266.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3438">1</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 488.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3655">2</span></div></div></div>
</div>
看着这个,我真的无法理解它的任何意义。我在 YUI3 中找不到与此相关的任何内容和 AUI文档。
所以问题是我如何从 AUI digram 中获取信息(例如节点、连接和可能的位置)?
最佳答案
您可以在DiagramBuilder
中使用.toJSON
方法
关于javascript - 如何从 AlloyUI 图表中提取含义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17421872/
我正在学习 AlloyUI,但不知道如何在主布局 中设置可调整大小的面板。我试过 this调整表大小的方法,但它没有用,我在控制台中没有看到任何错误。谁能帮助如何在 AlloyUI 中调整 div 元
我正在使用 Alloyui 2.0 调度程序 http://alloyui.com/versions/2.0.x/ (使用 Liferay EE 6.2) 这是我的调度程序: YUI().use(
如何在AlloyUIi中获取Liferay AUI taglib复选框选中的值? 最佳答案 您可以通过 A.one("#id").attr('checked') 等 attr 方法获取复选框的选中值
我正在尝试使用 AlloyUI 模态组件,虽然它工作得很好,但我遇到了问题,即在模态显示后,底层 UI 仍然可以点击。 我正在使用这个例子:http://alloyui.com/examples/mo
(抱歉,我是 web 开发的初学者,我不知道这个问题在哪里,因此有这么多标签..) 我一直在玩diagram builder example在合金用户界面中。它看起来很适合绘图,但之后我需要理解它(即
我正在使用 AlloyUI 3.0。我使用了上面的代码: YUI().use( 'aui-datatable', function(Y) { var columns =
我已经为这个问题苦苦挣扎了几天,基本上我想要完成的是为从数据库加载的每个事件添加一个自定义属性。我搜索了很长一段时间,在其他函数中发现了 addAttr 函数。在添加和保存新事件时,此函数工作得非常好
我需要在用户向下滚动时添加一个类。我通常使用 jQuery 这样做: $(window).scroll(function() { var scroll = $(window).scrollTop(
我一直在玩弄 AlloyUI 表单生成器,但我找不到如何获取我一直在编辑的表单的数据。我查看了文档、代码……我是瞎子吗? :-) 谢谢!克里斯 最佳答案 将生成的表单保存到以后表示是您必须自己做的事情
我使用 AlloyUI 表单生成器构建了一个动态表单。我想捕获我在边界框中拖放的元素。我遇到过这样的事情: 函数 saveFieldsForm(){ var formXML = ''; myFormB
如何向 AlloyUI 添加自定义按钮 Scheduler 的事件弹出?事件弹出窗口包括 Save , Cancel , 和 Delete按钮,但我想添加另一个(例如 Edit )。我已经浏览了 Sc
我直接从他们的网站使用 AlloyUI 模态“真实世界示例”:http://alloyui.com/examples/modal/real-world/ 逐字使用示例并更改以下行: visibl
如何从 AlloyUI 的调度程序中监听保存、编辑、删除和取消事件?我需要将该值保存在我们的数据库中以供将来使用,但我没有看到任何相关文档。 我目前的代码是这样的: YUI().use('aui-sc
我正在为 Liferay 门户开发一个 portlet。我正在尝试使用 AlloyUI Data Table 并且我的代码目前正在运行,但我担心我这样做的方式并不优雅且易于使用维护方式。 下面是我的
我在将一些按钮和图像置于 div 中心时遇到了一些问题。请看下图: 现在您可以看到,按钮和图像等没有居中(可能值得一提的是这些东西在表单标签内)。然后当然我有一些测试文本确实居中.. 我的 HTML
我正在尝试像这样一起使用 AlloyUI 图表和模态: var Y = YUI().use( 'aui-diagram-builder', 'aui-button', 'aui
我一直在尝试使用diagram builder example AlloyUI。 我需要添加一些额外的自定义 Node 类型以及 Node 的一些附加属性。我考虑过修改然后构建库,但这听起来对这样的任
在使用 liferay portal 6.2 时, Liferay 为 ui 开发提供了 alloy ui 和 twitter bootstrap。 我的问题 - 1) 同时使用 alloy ui 和
我有一个通过 javascript 创建的表单,它将被设置为 Alloy UI 提供的模态小部件的内容。 .但是我觉得我没有以正确的方式处理这个问题。这个问题一般适用于 javascript 创建的
使用 setAttribute('checked',true) 更改单选按钮的值会更改单选按钮的值,但不会触发更改事件。 这似乎并不限于 YUI 或 AlloyUI(例如参见 Detecting a
我是一名优秀的程序员,十分优秀!