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的更多相关文章

  1. dijit样式定制之TextBox（一）

    参考资料:http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html http://archive.dojotoolkit.org/nig ...

  2. dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner

    dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...

  3. 重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch

    原文:重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, Rad ...

  4. Android Toolbar样式定制详解

    前言 Marterial Design出来也有一段时间了,为了紧跟Google的设计规范,决定在项目中使用Toolbar.使用了一段时间之后,发现很多时候原始的Toolbar并不能满足项目的要求.为了 ...

  5. [CSS] input样式定制

    input样式 定制一个泥团input,想怎么捏就怎么捏 appearance: none 所有主流浏览器都不支持 appearance 属性. Firefox 支持替代的 -moz-appearan ...

  6. 背水一战 Windows 10 (33) - 控件（选择类）: ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  7. Android中ListView中有button，checkbox，GridView时事件问题

    最近做项目,用到了listview的item的一些问题,现在抽空把它们总结一下: 转载请表明出处:http://blog.csdn.net/wdaming1986/article/details/67 ...

  8. ListView的item中有button和checkbox，listview的点击事件无效

    ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusa ...

  9. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

随机推荐

  1. (python) 标准模块sys和os的使用

    一.sys模块 包含了系统的相关的功能.我们来学习sys.argv,它包含命令行参数. 例子:定义了一个add函数,用来实现两个整数的相加. #! coding=utf-8 # usersys.py ...

  2. [C#.net]PostMessage与SendMessage的区别

    用 PostMessage.SendNotifyMessage.SendMessageCallback 等异步函数发送系统消息时,参数里不可以使用指针,因为发送者并不等待消息的处理就返回,接受者还没处 ...

  3. 健忘vs总结

    上周入职新公司,报道之前自己也曾想过要从头开始,用一个新的精神面貌来迎接新的起点,培养一些新的习惯. 周四是15日,新公司的发薪日(当然还没有我的份~),小组群内一个刚毕业的新人兴冲冲的说终于领到第一 ...

  4. Tomcat服务器8080端口占用报错

    报错信息如下: Oct , :: PM org.apache.coyote.AbstractProtocol init SEVERE: Failed to initialize end point a ...

  5. 记录Python学习中的几个小问题

    记录Python学习中的几个小问题,和C#\JAVA的习惯都不太一样. 1.Django模板中比较两个值是否相等 错误的做法 <option value="{{group.id}}&q ...

  6. <转>ＭＦＣ注册系统/全局热键。

    <转>MFC注册系统/全局热键. 1. BEGIN_MESSAGE_MAP(CRS232TESTDlg, CDialog) //{{AFX_MSG_MAP(CRS232TESTDlg) O ...

  7. <转>C++11标准后的C++阅读书目

    C++11标准后的C++阅读书目 C++ 新标准 C++11 的发布导致了大批新书的出现,还有一些经典书籍也进行了更新.Andrew Binstock 在 Dr.dobbs 上给大家推介一些学习 C+ ...

  8. 关于纯移动web优点的一点思考

    自己造个小概念,纯移动web就是手机浏览器上访问的网站^_^ 缺点就不说了,说几个随着硬件和网络发展会放大的优势. 1 相对app来说,完全无缝对接,只要符合html标准,一次开发全平台部署 2 推广 ...

  9. 可变长度的Fibonacci数列

    原题目: Write a recursive program that extends the range of the Fibonacci sequence.  The Fibonacci sequ ...

  10. iOS进阶_地图上定位的标志——大头针

    一.添加大头针 地图使用的框架是MapKit 大头针走的是MKAnnotation协议 /* 注意:因为是满足协议MKAnnotation,所以没有MKAnnotation的系统大头针类,必须自定义大 ...