dijit样式定制(三)Button、RadioButton、CheckBox
2014-04-09 20:36
369 查看
dijit.form.DropDownButton
dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下图中可看一下button的主要结构,以DropDownButton为例:
![](http://images.cnitblog.com/i/412020/201404/091952186224614.jpg)
下面就是介绍几个比较重要的class
.dijitDropDownButton、.dijitButton、.dijitComboButton、.dijitToggleButton这几个类都影响各类型button的最外层整体效果,主要设置button的margin以及保证button中text的垂直居中。
.dijitButtonNode,凡是“具有按钮效果的地方”就有这个class,比如dijit.form.Select、dijit.form.NumberSpinner;该class一方面是用来设置动画效果,一方面在dijit.css中设置全局效果,在dijit.form.*Button中对button的整体样式效果做出了设置,如:border、padding、background-color、color(字体颜色)
.dijitIcon*(Edit、Save等)负责显示图标,background-imge是相同的主要就是改变background-position
.dijitButtonText设置margin与text-align来影响button中的文本
.dijitArrowButtonInner上一篇讲过,设置右侧的向下箭头
claro/form/Button.less中line64-93这是不同状态ArrowButton中的inner,104-149行中设置不同状态下.dijitButtonNode的background-color、box-shadow来显示效果,151-165主要设置comboButton中的显示效果
dijit.form.RadioButton、dijit.form.CheckBox
这个dijit都是通过div+label来布局,以RadioButton为例看一下其结构
![](http://images.cnitblog.com/i/412020/201404/092030245597813.jpg)
这两个dijit都是通过改变不同状态下左侧div的背景图片来显示效果,.dijitRadio、.dijitCheckBox这两个class设置了左侧div的background-image、width、height、margin、padding;然后就是在不同状态的class中设置background-position来背景图片
dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下图中可看一下button的主要结构,以DropDownButton为例:
![](http://images.cnitblog.com/i/412020/201404/091952186224614.jpg)
下面就是介绍几个比较重要的class
.dijitDropDownButton、.dijitButton、.dijitComboButton、.dijitToggleButton这几个类都影响各类型button的最外层整体效果,主要设置button的margin以及保证button中text的垂直居中。
.dijitButtonNode,凡是“具有按钮效果的地方”就有这个class,比如dijit.form.Select、dijit.form.NumberSpinner;该class一方面是用来设置动画效果,一方面在dijit.css中设置全局效果,在dijit.form.*Button中对button的整体样式效果做出了设置,如:border、padding、background-color、color(字体颜色)
.dijitIcon*(Edit、Save等)负责显示图标,background-imge是相同的主要就是改变background-position
.dijitButtonText设置margin与text-align来影响button中的文本
.dijitArrowButtonInner上一篇讲过,设置右侧的向下箭头
claro/form/Button.less中line64-93这是不同状态ArrowButton中的inner,104-149行中设置不同状态下.dijitButtonNode的background-color、box-shadow来显示效果,151-165主要设置comboButton中的显示效果
dijit.form.RadioButton、dijit.form.CheckBox
这个dijit都是通过div+label来布局,以RadioButton为例看一下其结构
![](http://images.cnitblog.com/i/412020/201404/092030245597813.jpg)
这两个dijit都是通过改变不同状态下左侧div的背景图片来显示效果,.dijitRadio、.dijitCheckBox这两个class设置了左侧div的background-image、width、height、margin、padding;然后就是在不同状态的class中设置background-position来背景图片
相关文章推荐
- 浅谈css选择器
- sphinx插入css
- WPF常用控件样式( 内含一简单插件式开发示例)
- css-hack-不同浏览器
- CSS圆角效果
- CSS-图片之间不留空隙
- 理解表现和结构相分离
- Windows7系统更改默认的输入法图标换一种新的样式
- 不要省略CSS中零值的单位!
- CSS中的any伪类
- 简单化规则原理 浅谈CSS后代选择器
- js设置css样式对照表
- js设置css样式对照表
- 深入浅出CSS3:background-clip,background-origin和border-image教程
- css手册
- css helper class
- table中td用CSS截取字符,超出用省略号...
- CSS之Position详解
- CSS核心:包含块(Containing Block)
- CSS的nth-child使用方法