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

时间: 2024-10-29 19:45:44

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

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

dijit.form.DropDownButton dijit的button中除了ComboButton使用table布局外,其他的button都是用span嵌套布局,下图中可看一下button的主要结构,以DropDownButton为例: 下面就是介绍几个比较重要的class .dijitDropDownButton..dijitButton..dijitComboButton..dijitToggleButton这几个类都影响各类型button的最外层整体效果,主要设置button的mar

dijit样式定制之TextBox(一)

参考资料:http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html http://www.lesscss.net/article/home.html 这系列博客主要因为工作中经常需要更改dijit样式,每次都需要看dijit的DOM结构来更改,好多次都是改了一个class样

定制二选一按钮SwitchButton

定制二选一按钮SwitchButton 效果: 源码: SwitchButton.h 与 SwitchButton.m // // SwitchButton.h // KongJian // // Created by YouXianMing on 14/10/24. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @protocol SwitchButtonDelegate

jquery.form.js实现将form提交转为ajax方式提交的方法

 这个框架集合form提交.验证.上传的功能.  这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js  1 2 3 4 <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好使--> <script type="text/javascript" sr

jquery.form.js实现将form提交转为ajax方式提交的方法_jquery

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好

Oracle体系结构及备份(二) 执行select语句的过程分析

一 环境 Oracle 11g R2 + SQL Plus + Windows 7 Ultimate English Edition 二   操作示例 Microsoft Windows [Version 6.1.7601] Copyright (c) 2009 Microsoft Corporation. All rights reserved. C:\Users\Wentasy>sqlplus scott SQL*Plus: Release 11.2.0.1.0 Production on

jQuery选择器源码解读(二):select方法_jquery

/* * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务: * 1.调用tokenize方法完成对选择器的解析 * 2.对于没有初始集合(即seed没有赋值)且是单一块选择器(即选择器字符串中没有逗号), * 完成下列事项: * 1) 对于首选择器是ID类型且context是document的,则直接获取对象替代传入的context对象 * 2) 若选择器是单一选择器,且是id.class.tag类型的,则直接获取并返回匹配的DOM元素 * 3) 获取最后一个id.cl

C# Form相关,return Form——如何加载自定义事件?

问题描述 在MyUI.dll中有Form1;usingSystem;usingSystem.Windows.Forms;namespaceMyUI{publicpartialclassForm1:Form{publicForm1(){InitializeComponent();}publiceventEventHandlerAdd;publiceventEventHandlerRemove;}} 在MyForm.Interface.Dll中有方法返回Form(Form1)usingSystem.

JavaScript使用技巧精萃[代码非常实用]_javascript技巧

(一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')"); 2. linktempDelete.Attributes["onclick"]="javascript:return confirm('"+"确认删除?"+"');"; 3. privat