如何更改 dat.gui 下拉菜单的位置?
Posted
技术标签:
【中文标题】如何更改 dat.gui 下拉菜单的位置?【英文标题】:How do I change the location of the dat.gui dropdown? 【发布时间】:2014-09-03 21:04:28 【问题描述】:我正在使用 dat.gui,我想将它放置在与右上角不同的位置,最好是在顶部重叠三个.js 画布,这是通过命令完成的,还是有一些 css 可以做到把戏?
【问题讨论】:
【参考方案1】:您需要一些 javascript 和 CSS 来执行此操作。
GUI 构造函数可以传递一个参数对象。您可以告诉控件不要自动放置。您还可以附加元素 ID 以简化样式
var gui = new dat.GUI( autoPlace: false );
gui.domElement.id = 'gui';
然后放置它的 CSS 可以是这样的:
#gui position: absolute; top: 2px; left: 2px
【讨论】:
TY,当我 autoPlace: false 时它不起作用,但是当我更改 eid 并将 css 添加到该 id 时它工作得很好。你知道是否有办法阻止它偶然滚动屏幕?无论用户在页面的哪个位置,都阻止它被看到。 只需将以下代码添加到您的样式中: 这是一个 baaaaaaaaaaaaaaaaaaaaaaaad API。【参考方案2】:接受的答案回答了我的问题,但并不完全是我解决问题的目的,当我在页面上上下滚动时,请对我进行 gui 滚动。我没有为 gui domElement 设置 ID,而是将该元素附加到可以更好地控制的现有元素中。
css:
.moveGUI
position: absolute;
top: 13.1em;
right: -1em;
JS:
// Create GUI
gui = new dat.GUI( autoPlace: false );
// create fill and open folders
var customContainer = $('.moveGUI').append($(gui.domElement));
html:
<div class = 'moveGUI'>
</div>
【讨论】:
【参考方案3】:覆盖 CSS:
.dg.a margin-right:60px !important;
【讨论】:
【参考方案4】:个人比较喜欢用:
function datgui()
let gui = new dat.GUI(
width : 300
);
【讨论】:
以上是关于如何更改 dat.gui 下拉菜单的位置?的主要内容,如果未能解决你的问题,请参考以下文章