CSS 样式编辑代码片断
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| {
"widgets": {
"TextBox": {
"appliesTo": [
"dijit.form.TextBox"
],
"states": {
$all": {
"selectors": {
".claro .dijitTextBox": [
"$std_10"
]
},
"query": {
"classes":".dijit .dijitReset .dijitLeft .dijitTextBox"
}
},
"Focused": {
"selectors": {
".claro .dijitTextBoxFocused": [
"$std_10"
]
},
"query": {
"classes":".dijit.dijitReset.dijitLeft.dijitTextBox"
}
},
"Hover": {
"selectors": {
”.claro .dijitTextBoxHover": [
"$std_10"
]
},
"query": {
"classes": ".dijit.dijitReset.dijitLeft.dijitTextBox"
}
}
}
}
}
}
|
图 15. 用 Maqetta 对 Dojo widgets 样式化举例 通常情况下，调整 Dojo widgets 是非常耗时的，需要研究 Dojo 的 CSS 文件结构及规则，但 Maqetta 提供的工具，使对 Dojo widgets 的调整变得容易和快速。如在某些特定的情况下，需要对 Dojo 按钮调整成一个固定宽度 (8em)，我们可以在画面上选择需要定制的这个按钮，在属性面板顶部，指定一个自定义的 CSS 类，例如（login_button）应用在此按钮上，然后在打开 Layout 属性，进行详细的设置界面，为 Width 设置值为 8em, 所有适用于此元素 width 的 CSS 样式规则将被呈现，此时选择第一个单选按钮，告诉 Maqetta 在 app.css 文件中新建一个新的 CSS 类名为 login_button, 值为 8em 的类 , 则之前的规则将被加入到 app.css，代码如下：
#myapp.mytheme .login_button.dijitButton .dijitButtonNode{width:8em;}
需要注意的是，Maqetta 会自动为 HTML 的 BODY 元素加上 MyApp 这个 ID，此 ID 的作用就是使新的样式具有较高的优先级，因为 ID 选择器比 CLASS 和标签选择器优先级别高。
图 16. 加入 JQuery UI, YUI 至 widgets 面板 对于熟悉 JQuery,YUI 的用户来说，也整合了部分控件，极大的方便了设计师。 |
