博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
dijit样式定制(三)Button、RadioButton、CheckBox
阅读量:7304 次
发布时间:2019-06-30

本文共 1079 字,大约阅读时间需要 3 分钟。

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来背景图片

转载地址:http://ambnm.baihongyu.com/

你可能感兴趣的文章
[摘录]第五章 与奋斗者分享利益
查看>>
debian下编译安装poco
查看>>
java内部类的定义原则
查看>>
搜索和搜索形式(SEARCHING and its forms)
查看>>
poj 1789 Truck History(最小生成树 prim)
查看>>
maven deploy jar包到远程仓库400
查看>>
python leetcode 1
查看>>
java 之 模板模式(大话设计模式)
查看>>
P1088 火星人
查看>>
C# 单精度转换双精度丢失的问题
查看>>
ubantu 安装杀毒软件 clamav
查看>>
Number Sequence
查看>>
第12周学习进度总结
查看>>
vim末行模式下相关操作+配置文件
查看>>
產生隨機數
查看>>
用IKVMC将jar转成dll供c#调用
查看>>
Google Code Jam 2009 Qualification Round Problem B. Watersheds
查看>>
C#创建Oracle中的几何对象:点、线、面
查看>>
关于页面无法实现高度100%的原因及实现方法。
查看>>
国外期刊
查看>>