回到目录
Mon, 05/14/2007 - 15:53 — criecke
目标
关于风格的部件设计的目标，按顺序列出如下- A11Y 可用性：部件在屏幕的高对比模式下看起来不好看，但好用。我们并没有因为用户放大了浏览器而特别关注边缘的参差不齐的情况。
- 预提供的tundra主题应该好看而且快速提供.合适的大小易于客户化，所以我们考虑使用图片，即使需要通过修改图片而不是改CSS规则来实现客户化。
- 通过设置css和编辑图片支持一些客户化，比如字体，颜色，背景图片，前景图片等等。 Note that this rule implies that all image paths (even things like arrows) occur in the CSS file, and then are transferred to <img> nodes for accessibility reasons.
- 许多复杂的风格，比如边框的圆角，需要用户修改部件模板和javascript代码。我们并没有屈从于让这类客户定制变的更容易。（We aren't bending over backwards to make this kind of customization easy. ）
- Dijit预带了一个名为Tundra的主题，是一些CSS和图片的集合。给所有dijit部件提供了标准的外观和使用感觉。
- 用户可以设计自己的主题，并在一个页面上使用多个主题，每个主题对于页面的一块，比如左边或右边。This is not a rule so much as a design pattern that's possible due to rule #2 above.
CSS
部件风格是由CSS来实现的。你可以使用任何的CSS。你需要象这样来定义规则
.dojoButton { ... }
这是一个小的dijit.css文件，定义了基本的CSS，但是没有缺省的定义风格的CSS会被自动的包含进页面，所以用户必须自己定义。用户要么自己写CSS，要么使用预定义的主题（themes）文件:
Tundra 主题
Dijit预包含了称为"tundra"的主题. 之所以被称为主题，是因为对所有的部件而言，它有一个统一的外观。它是CSS和图片的集合:
themes
/
tundra /
tundra . css < -- 给所有部件使用的CSS
checkbox . gif < --- 所有的checkbox和radio按钮的图片
fader . gif < --- 由tundra . css引用的背景图片
tundra /
tundra . css < -- 给所有部件使用的CSS
checkbox . gif < --- 所有的checkbox和radio按钮的图片
fader . gif < --- 由tundra . css引用的背景图片
tundra预览可以参见这里 here
前景图片和背景图片放在主题目录中，并通过CSS规则被部件引用。（通过 "background-image"属性）.
tundra.css 有如下规则
.tundra .dojoButton { ... }
你不必一定要使用tundra主题，但是大多数人会用。如果要在你的页面上使用，按如下操作（在include了dijit.js之后）：
<
link
rel
=stylesheet
href
="dijit/themes/tundra/tundra.css"
type
="text/css"
>
然后在<body>上加上主题的名字
<
body
class
=tundra
>
在body上加class=tundra是因为对所有的继承（比如.tundra.dojoButton）都会起作用。（because the rules all list a hierarchy like ".tundra .dojoButton".）
Author: Bill Keese
回到目录
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
