参考资料: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样式连带着影响到其他dijit。痛定思痛之后决定深入了解一下dijit的样式结构,把他分享出来希望高手能够不吝指正。

  dijit的样式表位于以下目录中,dijit.css是对所有dijit布局结构的定义,另外我们还可以看到三个目录:claro、soria、tundra这三个目录中定义的就是dojo带给我们的三种样式风格。进入到claro中我们可以看到其中的css文件和less文件,对于我们需要修改dijit样式的开发者来说,主要就是看其中的less文件,这就好比一个类库给我们提供了一系列接口。这里面定义的就是不同风格下的dijit样式,我们打开其中一个,可以看到文件开头介绍了该文件中主要定制了哪些class,以及这些class的作用。(less是一种css预编译语言,整个dojo样式体系就是用它写的,详情请看第三个链接)

  

  现在我们打开themeTester.html页面,在这可以看到各种dijit,这个时候右键出来的是contextmenu菜单,不想要的话在代码里把它相应的代码注掉就行。下面我们先来看看TextBox,所有的TextBox都是通过div内嵌input来布局

  

由于一个元素可以加多个class所以左图主要画出能够反映dijit布局结构的class,具体的类还需要读者自己去看,下面介绍几个重要的class:

  .dijitInputField,当你想改变textBox的宽度或者高度时,只需改变改变该类中的padding属性即可。

  .dijitInputInner,该类中定义TextBox的内部input样式,可以设置color、padding

  .dijitArowButton,该类主要定义下拉按钮的背景样式

  .dijitArrowButtonInner,该类主要通过设置background-position来改变不同的箭头指向

  .dijitValidationContainer,error状态下中间的叹号,通过设置background、border、width样式

  至于不同状态下TextBox的样式在claro/form/Common.less中line73-150设置,还请读者自己查看。

  

  dijit的样式十分庞杂,比dojo的类更加繁琐。今天先到这吧,以后会继续更新,希望大家支持,提出宝贵意见。

dijit样式定制之TextBox(一)的更多相关文章

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

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

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

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

  3. Android Toolbar样式定制详解

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

  4. [CSS] input样式定制

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

  5. Django中Admin样式定制

    Django自带的admin在展示数据是样式有点单一,我们可以自己定义数据的展示样式. 一.自定义数据展示样式 1.后台查询书记列表时,同时列出出版社和出版时间: admin.py文件 from dj ...

  6. Bootstrap 样式定制-lessc编译源码

    1.github上下载源码:解压:如目录bootstrap 2.新建同级目录custom-bootstrap ,在该目录下新建 如下三个文件:其实就是bootstrap下面的bootstrap.les ...

  7. CSS滚动条样式定制

    效果图如下 <!DOCTYPE html> <!-- saved from url=(0061)http://www.xuanfengge.com/demo/201311/scrol ...

  8. MVC @Html.TextBox 添加属性和样式

    1.添加属性:@Html.TextBox("CnAddressmodify","", new { maxlength="90" }) 2.添 ...

  9. WPF:定制Checkbox样式,让“正确”绿得好看,让“错误”红的显眼

    WPF提供了样式.模板.触发器.状态管理.矢量形状等方式,让我们不需要背景图片,也可以轻松定制控件的风格样式.下面是笔者针对Checkbox进行的样式定制,让“正确”绿得好看,让“错误”红的显眼.  ...

随机推荐

  1. OpenCV linux cmake添加使用

    安装好opencv之后: 只需要添加一下,就可以方便的使用opencv了,find_package opencv 会寻找FindOpenCV.cmake find_package(OpenCV REQ ...

  2. Android(Xamarin)之旅(五)

    2016年1月23日,北京迎来了很痛苦的一天,冻死宝宝了,一天都没有出我自己的小黑屋,在这屋子里自娱自乐.不知道你们呢 对于android的四大基本组件(Activity.Service.Broadc ...

  3. 来自MarsEdit的博客测试

    使用MarsEdit编辑的第一个测试博客. 希望我们一帆风顺! 插图,在插图时可以调整尺寸:   六种公式写法,记得要在选项中打开-启用数学公式: \begin{equation}\sum\end{e ...

  4. 多次drawRect,显示重叠,需要设置背景颜色

    自己写的一个控件,中途在setNeedsDisplay,重写drawRect方法,有时会把以前drawRect绘制上去,不知道为什么,后来设置了控件的背景颜色backgroundcolor,这个问题就 ...

  5. HTML页面跳转的5种方法

    下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件.1) html的实现 <head> <!-- 以下 ...

  6. C#引用类型(class)和值类型(struct)

    1. 值参数 当利用值向方法传递参数时,编译程序给实参的值做一份拷贝,并且将此拷贝传递给该方法.被调用的方法不传内存中实参的值,所以使用值参数时,可以保证实际值是安全的. using System; ...

  7. Git 源代码管理工具

    Git 源代码管理工具 Git基本信息 Git :Git是一个“分布式”的版本控制工具 Git的作者是Linux之父 Linus Benedict Torvolds,当初开发Git仅仅是为了辅助Lin ...

  8. UI基础之UITextField相关

    UITextField *textF = [[UITextField alloc] init]; 1.字体相关 textF.text = @"文本框文字"; textF.textC ...

  9. Spring In action chapter1_wiringBeans

    Automatically wiring beans Spring attacks automatic wiring from two angles: Component scanning-Sprin ...

  10. windows环境下修改Mysql的root密码

    最近一直没用Mysql,root密码给忘了,然后就自己修改了一下,现在整理一下步骤.(我的版本是5.1) 启动MySQL服务:>>net start mysql 关闭MySQL服务:> ...