dojo中的tableContainer
来源:互联网 发布:java return后finally 编辑:程序博客网 时间:2024/06/10 06:46
今天来熟悉一下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"/>
dojo中可以这样用:
<div data-dojo-type="dijit/form/TextBox" title="用户名:" id="username" name="username"></div>
title属性可以起到html中的label的作用。
2.textbox的label的css问题
我比较习惯label居右,like this:
怎么定义css样式呢?
html中可以这样(align属性):
<table> <tr> <td align="right"></td> </tr></table>
dojo中可以这样(tableContainer的customClass属性):
<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>
然后定义css(注意.labelsAndValues-labelCell和.labelsAndValues-valueCell), like this:
<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>
好了,现在label的css样式就可以随意定义了, labelsAndValues是随意写的,详见本文下方的api说明。
来张截图:
效果还不错。
附上dojox/layout/TableContainer控件的customClass属性的api说明:
customClassDefined by dojox/layout/TableContainerA 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.
这里说的很详细,customClass可以随意写,比如上面的labelsAndValues,然后label的css就是“.labelsAndValues-labelCell”,控件的css就是“.labelsAndValues-valueCell”。
0 0
- dojo中的tableContainer
- DOJO-dojox.layout.TableContainer(实现表单布局)
- dojo中的dojo/on
- dojo中的dojo/text!
- dojo dojo中的事件处理
- dojo中的dojo/dom-construct
- dojo中的dojo/dom-class
- dojo中的dojo/dom-style
- dojo中的dojo/dom-attr
- Dojo 中的拖拽
- DOJO 实践中的总结
- Dojo中的LazyTreeGrid控件
- dojo中的事件处理
- dojo中的下拉框
- dojo中的事件处理
- dojo中的this.own()
- dojo中的query
- dojo中的dojoConfig配置
- android中的MotionEvent 及其它事件处理
- 结构体对齐方式
- iOS本地推送UILocalNotification详解
- vector的所有函数和使用的注意事项
- 卡特兰数
- dojo中的tableContainer
- 去除重复行duplicated
- Ubuntu 14.04 下安装SCIM
- mysql最常用的引擎MyISAM和InnoDB
- android设置中的Preferencescreen用法介绍与分析
- 代码简洁之道:C++ 11 之auto+ for_each + lamda表达式
- VS2010编译错误:This file requires _WIN32_WINNT to be #defined at least to 0x0403...的解决方法
- 关于KMP算法
- java8 日期 时间 时区