zoukankan      html  css  js  c++  java
  • 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来背景图片

      

  • 相关阅读:
    【模拟练习】[一]
    【搜索练习】【二】
    【搜索练习】【一】
    模板整理 (施工中 2017.8.30更新)
    常用STL整理 (施工中 2017.8.11更新)
    剑指Offer 反转链表
    剑指Offer 链表中倒数第k个结点
    剑指Offer 斐波那契数列
    剑指Offer 用两个栈实现队列
    剑指Offer 从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/dojo-lzz/p/3655032.html
Copyright © 2011-2022 走看看