![](/img/trans.png)
[英]How to dynamically construct and set options for dijit.form.select widget?
[英]How to center a Dijit Select widget?
我使用的是Dojo 1.10,我需要在页面上水平居中显示Select小部件。 我不知道该怎么做。 我猜想有很多CSS属性可以试试运气。 选择窗口小部件始终显示在左侧。 似乎什么也没有将它移到中心。 我该怎么做?
更广泛地说,它在Dojo文档中的何处描述了如何执行此操作? 当我说我在网络搜索后完成网络搜索时,请相信我; 也许我不知道要搜索什么。 提前致谢。
此代码改编自dijit / form / Select样本之一。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {async: true, parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/form/Select"]);
</script>
</head>
<body class="claro">
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
</body>
</html>
可以做到,但是据我所知,在元素类或ID上使用CSS不能做到。 内联样式将起作用。 这是由于Dijit的渲染方式所致。 对于水平居中,您需要指定元素宽度(固定或百分比)。 请注意,此宽度只能内联定义。 否则它将无法正常工作,并且会破坏渲染效果。
给元素一个宽度并在auto上将其显示为带有水平边距的块即可解决问题。 像这样:
<select data-dojo-type="dijit/form/Select" style="width: 200px; display: block; margin: 0 auto;">
<!-- options -->
</select>
由于这是内联的,因此不太容易维护。 所以我会建议/推荐使用wrapper元素,并将dijit的宽度设置为100%,如下所示:
<div id="wrapper">
<select data-dojo-type="dijit/form/Select" style="width: 100%;">
<!-- options -->
</select>
</div>
因此,现在您可以使用CSS来控制包装器的宽度和边距:
#wrapper {
width: 200px;
margin: 0px auto;
}
这是有关Plunker的工作示例: http ://plnkr.co/edit/NyD28E?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.