参考资料: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. 通过viewmodel找到view

    如何通过viewmodel找到view? 之前的做法是,在view加载时(Loaded),将view保存到viewmodel中,后来想想Caliburn-Micro,自带方法可以通过viewmodel ...

  2. 求两个集合的交集和并集C#

    我是用hashset<T>来实现的 具体如代码所示 using System; using System.Collections.Generic; using System.Linq; u ...

  3. QlikView 权限设置问题和注意

    企业级报表通常都涉及到复杂的权限问题, 比如文本级权限和行级权限,某区域经理只能看到该区域的销售数据.QlikView自然也提供了该种功能. 具体方法: 在Edit script中新建一个tab, 输 ...

  4. JQuery初体验

    虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...

  5. UIAlertController、UIAlertAction 警告框

      NS_CLASS_AVAILABLE_IOS(8_0) @interface UIAlertAction : NSObject <NSCopying> //创建操作 + (instan ...

  6. SQL Server 大数据量分页建议方案

    简单的说就是这个 select top(20) * from( select *, rowid = row_number() over(order by xxx) from tb with(noloc ...

  7. Python 第五天 递归,计算器(2)

    利用函数编写如下数列: 斐波那契数列指的是这样一个数列 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584, ...

  8. asp.net mvc 事件顺序

    1. OnActionExecuting 2. Before return View() 3. OnActionExecuted 4. OnResultExecuting 5. Hello from  ...

  9. 【温故Delphi】之VCL消息机制小结

    TObject消息分派 procedure Dispatch(var Message); virtual; #负责分派消息到特定VCL组件的事件处理函数 procedure DefaultHandle ...

  10. C# v3微信 access token 过期处理的问题

    //记录access token 申请时的时间 private static DateTime GetAccessToken_Time; /// <summary> /// 过期时间为72 ...