zoukankan      html  css  js  c++  java
  • 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来现实效果。

  • 相关阅读:
    计算GPS点之间的距离
    C/C++ 获取系统时间 到秒 || 到毫秒
    Qt QLabel QTextBrowser 实现网址链接
    Qt QLabel 显示gif动图
    Qt QDateEdit QDateTimeEdit
    Qt QSpinBox 和 QDoubleSpinBox
    Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入
    Qt QLabel 大小随内容自动变化 && 内容填充整个label空间
    Qt QComBox 文本框输入itemText && 文本框查找item && 本文框添加Item &&设置显示Item数量
    JSON.parse()和JSON.stringify()
  • 原文地址:https://www.cnblogs.com/dojo-lzz/p/3652886.html
Copyright © 2011-2022 走看看