dojo中的tableContainer

今天来熟悉一下tableContainer的使用，通常他会和表单空间配合使用，如textbox之类的东东。

dojo中的tableContainer效果跟html中的table差不多，但是使用的时候还是有几点需要注意的。

例子来自dojo的官网文档，只要几个关键点注意了，还是相当好用的。

想要用dojo，还是需要多学多记，从一点一滴的小的模块开始。

官网的文档真是个好东西，以前苦苦寻找dojo的书籍资料，后来才发现，官网的文档就是相当好的资料，真得好好研究研究。附个连接地址吧：http://dojotoolkit.org/documentation/

1.textbox的label问题

html中，我们习惯自己手写比如下面的代码：

<label for="username">用户名:</label>
<input type="text" id="username" name="username"/>

<div data-dojo-type="dijit/form/TextBox" title="用户名:" id="username" name="username"></div>

2.textbox的label的css问题

我比较习惯label居右，like this：

怎么定义css样式呢？

html中可以这样（align属性）：

<table>
    <tr>
        <td align="right"></td>
    </tr>
</table>

<div data-dojo-type="dojox/layout/TableContainer" data-dojo-props="cols:4,customClass:'labelsAndValues'" id="tc1">
	  <div data-dojo-type="dijit/form/TextBox" title="First Name:" colspan="2" value="Tom"></div>
	  <div data-dojo-type="dijit/form/TextBox" title="Last Name:" colspan="2" value="Clarke"></div>
	  <textarea data-dojo-type="dijit/form/Textarea" id="texteditor" style="width:100%;" colspan="4" title="Personal Details">Hi,I'm a hacker,I have no  personal details to speak of,but I can write a widget in under a minute!
	  </textarea>
	 <div data-dojo-type="dijit/form/CheckBox" title="Employed"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Is Married"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Has Children"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Loves Dojo" checked="true"></div>
</div>

<style type="text/css">
		.labelsAndValues-labelCell</strong></span> {
		  background-color: lightgrey;
		  text-align: right;
		}
		
		.labelsAndValues-valueCell</strong></span> {
		  padding-left: 0px;
		  background-color: lightblue;
		}
	</style>

来张截图：

效果还不错。

附上dojox/layout/TableContainer控件的customClass属性的api说明：

customClass
Defined by dojox/layout/TableContainer

A CSS class that will be applied to child elements. For example,if the class is "myClass",the table will have "myClass-table" applied to it,each label TD will have "myClass-labelCell" applied,and each widget TD will have "myClass-valueCell" applied.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!