Dojo表容器根据屏幕大小进行调整

Dojo Table Container cols based on screen size

本文关键字：调整 屏幕 Dojo      更新时间：2023-09-26

我使用Dojo UI作为表单应用程序的布局。我使用Dojo表容器来保存表单元素。根据屏幕大小，我想将表容器的列(data-dojo-props="cols: ")设置为1、2或3，但是我无法为表容器列设置动态值。下面是包含元素的容器的示例。

运行时如何设置data-dojo-props= cols:的值

我知道它可以通过检测屏幕大小和使用dijit.byId().set("attribute", value) java脚本完成，但这涉及到设计和布局，我更喜欢如果它是由css处理。所以我需要一个css解决方案。

<div data-dojo-type="dojox.layout.TableContainer"
     data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:210"
     id="EmployeeContainer">
 <input type="text" id= "fname" />
 <input type="text" id= "lname" />
 <input type="text" id= "age" />
 <input type="text" id= "phone" />

</div>

你需要做的是动态创建布局容器

<div id="tablecontainer"></div>
<script>
require( ["dojo/dom", "dojox/layoutTableContainer"], function ( dom, tablecontainer ) {
   var noOfCol = 3;
   var tblCont = new tablecontainer({
       cols:noOfCol ,
       customClass:'employee_labels', 
       labelWidth:210
   }, dom.byId("tablecontainer"));
});
</script>
相关文章：