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来现实效果。

dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner的更多相关文章

  1. dijit样式定制(三)Button、RadioButton、CheckBox

    dijit.form.DropDownButton dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下图中可看一下button的主要 ...

  2. dijit样式定制之TextBox(一)

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

  3. 关于<form:select>

    今天写基于SSM框架的程序,用到了<form:select>.由于一开始遇到了问题,所以在这里加以记录,供以后查看. 直接看jsp页面的代码 <%@ page language=&q ...

  4. dijit.form.Select 基本用法

    dijit.form.Select 1)创建: var division = new dijit.form.Select({ id: "Division",//id必须唯一 nam ...

  5. <form:select>的使用

    最近在学习springMVC,用到了<form:select>标签,使用发过程中遇到了些问题,现在记录下,以防忘记. 我jsp页面是这样的: <%@ page language=&q ...

  6. Android Toolbar样式定制详解

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

  7. [CSS] input样式定制

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

  8. 定制二选一按钮SwitchButton

    定制二选一按钮SwitchButton 效果: 源码: SwitchButton.h 与 SwitchButton.m // // SwitchButton.h // KongJian // // C ...

  9. form:select form:options 标签数据回显

    在jsp页面中经常会使用到 form:select form:options 遍历后台List集合生成 select 下拉选择器,但是 form:options 标签并没有提供一个可以回显数据的属性. ...

随机推荐

  1. java基于socket公共聊天室的实现

    项目:一个公共聊天室功能的实现,实现了登录聊天,保存聊天记录等功能. 一.实现代码 1.客户端 ChatClient.java import java.io.BufferedReader; impor ...

  2. Oracle数据库迁移到AWS云的方案

    当前云已经成为常态,越来越多的企业希望使用云来增加基础设施的弹性.减轻基础设施的维护压力,运维的成本等.很多企业使用云碰到的难题之一是如何将现有的应用迁移到云上,将现有应用的中间件系统.Web系统及其 ...

  3. 3515 如何调试AT指令、查看拨号模块的打印

    冯sir给了一个在设备运行的程序serial,运行起来后可以敲指令输入AT指令,具体步骤如下: 1.将serial文件从U盘拷贝到设备里,U盘在设备系统下的目录是/stm/udisk/0/,但是注意设 ...

  4. Servlet下载文件和http响应

    下载文件等: 1.得到公共的内容ServletContext sc = this.getServletContext(); 2.在链接名字后面加个? 一个参数?参数1=值 两个参数?参数1=值& ...

  5. js库收集

    ------图表 中文 http://www.highcharts.me/ 英文 http://www.highcharts.com/ ------web前端开发框架 中文 http://www.bo ...

  6. Spark难道比oracle性能还差?百万级数据测试性能

    本人对大数据方面也是刚刚研究,由于工作需要在实时查询与统计的性能方面要深入学习.现测试性能如下:   环境:VirtualBox  host-only ubuntu版本: Linux master 4 ...

  7. Windows下nginx+php配置

    1. 首先,将 nginx.conf 中的 PHP 配置注释去掉. # pass the PHP scripts to FastCGI server listening on # #location ...

  8. Object 转化为String时的一个问题 null->"null"

    近日在工作出了一个较大的问题,导致被客户投诉. 事情大致是,某个功能里新增对用户手机的修改,在平台数据同步过程中,出现了将用户以前的要同步的数据,那时还没有手机号码所以是null,新功能上线后,将手机 ...

  9. Windows和linux的文件共享(1)

    今天是我学习linux以来第一次写博客.带着一种激动心情我开始尝试着去完成第一篇博客.从易到难.所以第一次我就主要学习了Windows之间的文件共享. Window之间的文件共享是通过局域网实现的.局 ...

  10. 如何防止JAVA反射对单例类的攻击?

    在我的上篇随笔中,我们知道了创建单例类有以下几种方式: (1).饿汉式; (2).懒汉式(.加同步锁的懒汉式.加双重校验锁的懒汉式.防止指令重排优化的懒汉式); (3).登记式单例模式; (4).静态 ...