dijit样式定制(三)Button、RadioButton、CheckBox
dijit.form.DropDownButton
dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下图中可看一下button的主要结构,以DropDownButton为例:
下面就是介绍几个比较重要的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为例看一下其结构
这两个dijit都是通过改变不同状态下左侧div的背景图片来显示效果,.dijitRadio、.dijitCheckBox这两个class设置了左侧div的background-image、width、height、margin、padding;然后就是在不同状态的class中设置background-position来背景图片
dijit样式定制(三)Button、RadioButton、CheckBox的更多相关文章
- dijit样式定制之TextBox(一)
参考资料:http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html http://archive.dojotoolkit.org/nig ...
- dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner
dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...
- 重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch
原文:重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, Rad ...
- Android Toolbar样式定制详解
前言 Marterial Design出来也有一段时间了,为了紧跟Google的设计规范,决定在项目中使用Toolbar.使用了一段时间之后,发现很多时候原始的Toolbar并不能满足项目的要求.为了 ...
- [CSS] input样式定制
input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...
- 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch
[源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...
- Android中ListView中有button,checkbox,GridView时事件问题
最近做项目,用到了listview的item的一些问题,现在抽空把它们总结一下: 转载请表明出处:http://blog.csdn.net/wdaming1986/article/details/67 ...
- ListView的item中有button和checkbox,listview的点击事件无效
ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusa ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
随机推荐
- Ubuntu 16 安装odoo10 实录
安装Ubuntu 16,省略 安装时,默认用户名为 odoo ubuntu 16开始 使用 systemd 管理服务,但是systemd 兼容 sysv init 脚本 下载 odoo源码 从 htt ...
- Java中super的几种用法并与this的区别
1. 子类的构造函数如果要引用super的话,必须把super放在函数的首位. class Base { Base() { System.out.println("Base"); ...
- wpf 空白汉字占位符
<TextBlock xml:space="preserve" Text="主 编" /> 表示一个汉字占位符
- hibernate配置文件中的schema="dbo"在MySQL数据库不可用
把项目的数据库由SQL Server更改为MySQL之后,发现hibernate报错. 问题在于schema="dbo",使用SQL Sever数据库时正常,使用MySQL数据库需 ...
- 今天工作中遇到的问题!echart.js
echart.js 引用的时候, 配置文件和引用的echart.js 应该放在main.js的后面,带有window.onload的js后面.这样的话,不会阻止echar.js的渲染.
- iOSview整体上移下移(点击键盘)
首先创建一个textFiled 并实现起代理方法 - (void)textFieldDidBeginEditing:(UITextField *)textField { //设置动画的名字 [UIVi ...
- c++ chap1 to chap 3
#ifndef MAIN_H_INCLUDED#define MAIN_H_INCLUDED struct Course{ int id; std::string name;}; const int ...
- angular之自定义过滤器的使用
自定义过滤器需要使用filter函数,格式如下: filter("filterName',function(){ return function(target,args){ .... } } ...
- DLX (poj 3074)
题目:Sudoku 匪夷所思的方法,匪夷所思的速度!!! https://github.com/ttlast/ACM/blob/master/Dancing%20Link%20DLX/poj%2030 ...
- shell数组操作
1.数组定义,shell使用一对括号表示数组,数组元素间用"空格"分隔 # 空数组arr1 arr1=() # 数组arr2,成员分别是1, 2, 3, 4, 5, 6 arr2= ...