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

目录
相关文章
|
11月前
|
数据采集 人工智能 安全
数据治理的实践与挑战:大型案例解析
在当今数字化时代,数据已成为企业运营和决策的核心资源。然而,随着数据量的爆炸性增长和数据来源的多样化,数据治理成为了企业面临的重要挑战之一。本文将通过几个大型案例,探讨数据治理的实践、成效以及面临的挑战。
1495 4
数据治理的实践与挑战:大型案例解析
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
深度学习之生物启发的学习系统
基于深度学习的生物启发学习系统(Biologically Inspired Learning Systems)旨在借鉴生物大脑的结构和学习机制,设计出更高效、更灵活的人工智能系统。
175 0
|
存储 安全 Java
Java修仙之路,十万字吐血整理全网最完整Java学习笔记(基础篇)
从Java环境的搭建到实际代码的编写,从基本用法的讲解到底层原理的剖析,深度解析Java基础知识。本文是《Java学习路线》专栏的起始文章,旨在提供一套完整的Java学习路线,覆盖Java基础知识、数据库、SSM/SpringBoot等框架、Redis/MQ等中间件、设计模式、架构设计、性能调优、源码解读、核心面试题等全面的知识点,并在未来不断更新和完善,帮助Java从业者在更短的时间内成长为高级开发。
Java修仙之路,十万字吐血整理全网最完整Java学习笔记(基础篇)
|
XML 数据格式
成功解决:不允许有匹配 “[xX][mM][lL]“ 的处理指令目标。
这篇文章讨论了一个XML解析时出现的错误,错误提示为“不允许有匹配 '[xX][mM][lL]' 的处理指令目标”。文章指出错误原因是配置文件开始位置存在空行,导致XML文档的解析出现问题。解决方法是删除这些空行,之后程序能够成功启动。
成功解决:不允许有匹配 “[xX][mM][lL]“ 的处理指令目标。
|
关系型数据库 Serverless 定位技术
PostgreSQL如何使用GIS函数计算两个点连线的中间点?
PostgreSQL如何使用GIS函数计算两个点连线的中间点?
447 62
|
12月前
|
存储 关系型数据库 Serverless
PostgreSQL计算两个点之间的距离
PostgreSQL计算两个点之间的距离
989 60
|
JSON JavaScript 前端开发
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
JavaScript 中,理解数据拷贝的深浅至关重要。浅拷贝(如扩展运算符`...`、`Object.assign()`)仅复制对象第一层,共享内部引用,导致修改时产生意外联动。深拷贝(如自定义递归函数、`_.cloneDeep`或`JSON.parse(JSON.stringify())`)创建独立副本,确保数据隔离。选择哪种取决于性能、数据独立性和资源需求。深拷贝虽慢,但确保安全;浅拷贝快,但需小心引用共享。在面试中,理解这些概念及其应用场景是关键。
525 4
【JavaScript】JavaScript中的深拷贝与浅拷贝详解:基础概念与区别
如何修改Xshell中的字体颜色大小等样式 修改Vm虚拟机终端的字体颜色
这篇文章介绍了如何在Xshell中修改字体颜色、大小等样式,以及如何在虚拟机终端设置字体颜色,以实现统一和舒适的视觉效果。
如何修改Xshell中的字体颜色大小等样式 修改Vm虚拟机终端的字体颜色
|
XML 前端开发 JavaScript
异步请求$.ajax()方法详解
异步请求$.ajax()方法详解
|
算法 Java 数据库
Java CompletableFuture.runAsync的概念于实战
【4月更文挑战第1天】在Java中,CompletableFuture.runAsync是CompletableFuture类中的一个静态方法,用于异步执行不返回结果的任务。这使得它成为处理并发编程任务时的一个非常有用的工具,特别是在开发需要非阻塞操作的应用程序时。
1111 3