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

简介:

dijit.form.Select:

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

  

  介绍几个主要的class:

  1、.dijitSelect设置整体的border与background-color

  2、.dijitButtonContents这个class主要控制Select中文本部分的border

  3、.dijitArrowButton与dijitArrowButtonContainer位于同一级别,用来设置的右侧button的padding、background-color

  4、.dijitArrowButtonContainer设置button的border

  5、.dijitArrowButtonInner该class负责的是button中的图片,主要设置background-image、background-position、width、margin(值为零)

  6、Select.less中37-77用于设置不同状态下总体Selet的background-color、.dijitArrowButtn的background-color和.dijitArrowButtonInner的banckground-position

  Select中下拉菜单部分在menu中介绍

dijit.form.NumberSpinner:

  NumberSpinner通过div来布局,与TextBox一样主要分为三部分,dijitInputContainer及右侧输入文本,dijitValidationContainer是出错时的红色叹号提示框与TextBox中相同,dijitSpinnerButtonContainer是右侧button部分

  

  这里主要介绍dijitSpinnerButtonContainer,其他两部分已在TextBox中介绍,下面看一下它里面的结构

  

  以下是几个重要class

  .dijitSpinnerButtonContainer设置padding、position(relative)、border(与文本之间分割线)

  .dijitSpinnerButtonInner该class决定了dijitSpinnerButtonContainer的宽度、并影响其高度,该class的左右padding为0(至于为什么这样设计我也不懂,还有待高手解决)

  .dijitArrowButton设置background-color、position(absolute)、height(50%)

  .dijitArrowButtonInner设置border、左右padding、background-image、上下margin(负值)、background-position

  .dijitUpArrowButton与.dijitDownArrowButton的使用绝对定位来控制两个button的位置布局

  NumberSpinner.less中25-85行设置以上信息,85-151主要设置不同状态下,最外层div、.dijitArrowButton、.dijitArrowButtonInner的background-color、border或者backgroun-image来现实效果。

目录
相关文章
|
编解码 网络安全 CDN
使用cdn为github pages加速
第一次使用cdn
2200 0
|
12月前
|
安全 Java Android开发
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
JavaWeb解压缩漏洞之ZipSlip与Zip炸弹
361 2
|
5月前
|
存储 安全 API
秘密任务 1.0:为什么 DTO 是 API 设计效率和安全性的秘密武器?
在软件开发中,确保API安全与高效至关重要。本文通过“间谍机构”场景,介绍数据传输对象(DTO)的作用。DTO是一种设计模式,用于格式化数据并隐藏敏感信息,仅传送必要内容。例如,在特工数据中,DTO可过滤掉密码和任务详情,仅返回代号和权限等级。使用DTO能简化前后端通信、提升性能和安全性。 文中示例展示如何用DTO处理GET与POST请求:GET响应只含安全字段,POST创建新特工时隐藏密码。借助工具如APIPost,可更高效管理API设计,实现安全、结构化的数据交互。总结来说,DTO让API更简洁、安全且高效。
|
11月前
|
存储 安全 Java
String、StringBuffer 和 StringBuilder 的区别
【10月更文挑战第21天】String、StringBuffer 和 StringBuilder 都有各自的特点和适用场景。了解它们之间的区别,可以帮助我们在编程中更合理地选择和使用这些类,从而提高程序的性能和质量。还可以结合具体的代码示例和实际应用场景,进一步深入分析它们的性能差异和使用技巧,使对它们的理解更加全面和深入。
415 57
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
在 Flutter 中如何使用 ChangeNotifierProvider 实现数据共享?
|
10月前
|
消息中间件 供应链 架构师
微服务如何实现低耦合高内聚?架构师都在用的技巧!
本文介绍了微服务的拆分方法,重点讲解了“高内聚”和“低耦合”两个核心设计原则。高内聚强调每个微服务应专注于单一职责,减少代码修改范围,提高系统稳定性。低耦合则通过接口和消息队列实现服务间的解耦,确保各服务独立运作,提升系统的灵活性和可维护性。通过领域建模和事件通知机制,可以有效实现微服务的高效拆分和管理。
290 7
|
存储 Java 关系型数据库
java: 无法访问org.springframework.context.ConfigurableApplicationContext
`亲测可用,之前搜索了很多博客,啥样的都有,就是不介绍报错以及配置用处,根本不懂照抄那些配置是干啥的,稀里糊涂的按照博客搭完也跑不起来,因此记录这个。` `项目背景`:公司项目当前采用http协议+shiro+mysql的登录认证方式,而现在想支持ldap协议认证登录然后能够访问自己公司的项目网站。 `举例说明`:假设我们公司有自己的门户网站,现在我们收购了一家公司,他们数据库采用ldap存储用户数据,那么为了他们账户能登陆我们公司项目所以需要集成,而不是再把他们的账户重新在mysql再创建一遍,万一人家有1W个账户呢,不累死了且也不现实啊。
316 11
|
人工智能 运维 自然语言处理
AI战略丨构建未来: 生成式人工智能技术落地策略
GenAI 的技术落地需要企业进行周密地规划和持续地努力。企业必须从自身的战略出发, 综合考虑成本、效果和性能,制定合理的技术架构,通过全面的 AI 治理,实现可持续的创新和发展。
啥?Flutter也能整3D了吗?我靠,竟然是这样的操作👀
当我看了这样一个节目之后,我发现,复杂的ui竟然这么简单就可以实现了!当时我就用Flutter整了这么个3D效果,快来围观!!
|
Rust 前端开发 JavaScript
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
尤雨溪:Turbopack 真的比 Vite 快 10 倍吗?
469 0

热门文章

最新文章