Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 267 lines (175 sloc) 6.578 kb
fcc4fff8 »
2011-11-20 monster commit from moinconverter, which is always done prior to the …
1 .. _dojo/addClass:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
2
9dd52dc6 »
2011-11-20 mondo whitespace change
3 dojo.addClass
4 =============
d608cc59 »
2011-11-20 \r\n -> \n conversion.
5
9dd52dc6 »
2011-11-20 mondo whitespace change
6 :Project owner: Eugene Lazutkin
7 :Available: since V0.9
d608cc59 »
2011-11-20 \r\n -> \n conversion.
8
9dd52dc6 »
2011-11-20 mondo whitespace change
9 .. contents::
10 :depth: 2
d608cc59 »
2011-11-20 \r\n -> \n conversion.
11
9dd52dc6 »
2011-11-20 mondo whitespace change
12 Safely adds a CSS class or a set of classes to a node avoiding duplications.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
13
9dd52dc6 »
2011-11-20 mondo whitespace change
14 Since Dojo 1.7, ``dojo.addClass`` is exposed via the ``add`` method of the ``dojo/dom-class`` module. An alias is kept in ``dojo/_base/html`` for backward-compatibility.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
15
9dd52dc6 »
2011-11-20 mondo whitespace change
16 =====
17 Usage
18 =====
d608cc59 »
2011-11-20 \r\n -> \n conversion.
19
9dd52dc6 »
2011-11-20 mondo whitespace change
20 The function takes two arguments:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
21
9dd52dc6 »
2011-11-20 mondo whitespace change
22 1. A DOM node or its node id (as a string).
23 2. A string, which can list classes separated by spaces, or an array of CSS classes as strings. In the latter case array elements cannot contain spaces.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
24
9dd52dc6 »
2011-11-20 mondo whitespace change
25 Space-separated classes and arrays are supported since 1.4.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
26
9dd52dc6 »
2011-11-20 mondo whitespace change
27 Dojo 1.7+ (AMD)
28 ---------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
29
9dd52dc6 »
2011-11-20 mondo whitespace change
30 When using AMD format in a fully baseless application, ``add`` is accessed from the ``dojo/dom-class`` module.
d608cc59 »
2011-11-20 \r\n -> \n conversion.
31
9dd52dc6 »
2011-11-20 mondo whitespace change
32 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
33
9dd52dc6 »
2011-11-20 mondo whitespace change
34 require(["dojo/dom-class"], function(domClass){
35 // Add a class to some node:
36 domClass.add("someNode", "anewClass");
37 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
38
9dd52dc6 »
2011-11-20 mondo whitespace change
39 Alternatively, you can load dojo base in AMD style and continue using ``dojo.addClass`` in the ``define`` or ``require`` callback:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
40
9dd52dc6 »
2011-11-20 mondo whitespace change
41 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
42
9dd52dc6 »
2011-11-20 mondo whitespace change
43 require(["dojo"], function(dojo){
44 // Add a class to some node:
45 dojo.addClass("someNode", "anewClass");
46 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
47
9dd52dc6 »
2011-11-20 mondo whitespace change
48 Dojo < 1.7
49 ----------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
50
9dd52dc6 »
2011-11-20 mondo whitespace change
51 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
52
9dd52dc6 »
2011-11-20 mondo whitespace change
53 // Add a class to some node:
54 dojo.addClass("someNode", "anewClass");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
55
9dd52dc6 »
2011-11-20 mondo whitespace change
56 ========
57 Examples
58 ========
d608cc59 »
2011-11-20 \r\n -> \n conversion.
59
9dd52dc6 »
2011-11-20 mondo whitespace change
60 Add a class
61 -------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
62
9dd52dc6 »
2011-11-20 mondo whitespace change
63 The following example adds the class "style1" to the node "example1":
d608cc59 »
2011-11-20 \r\n -> \n conversion.
64
9dd52dc6 »
2011-11-20 mondo whitespace change
65 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
66
9dd52dc6 »
2011-11-20 mondo whitespace change
67 // dojo 1.7+ (AMD)
68 require(["dojo/dom-class"], function(domClass){
69 domClass.add("example1", "style1");
70 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
71
9dd52dc6 »
2011-11-20 mondo whitespace change
72 // dojo < 1.7
73 dojo.addClass("example1", "style1");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
74
9dd52dc6 »
2011-11-20 mondo whitespace change
75 See it in action:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
76
9dd52dc6 »
2011-11-20 mondo whitespace change
77 .. cv-compound::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
78
9dd52dc6 »
2011-11-20 mondo whitespace change
79 .. css::
aa4dc2c3 »
2011-11-21 label deprecation, cleanups
80
d608cc59 »
2011-11-20 \r\n -> \n conversion.
81
9dd52dc6 »
2011-11-20 mondo whitespace change
82 <style type="text/css">
83 .style1 { background-color: #7c7c7c; color: #ffbf00; border: 1px solid #ffbf00; padding: 20px;}
84 </style>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
85
9dd52dc6 »
2011-11-20 mondo whitespace change
86 .. cv:: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
87
9dd52dc6 »
2011-11-20 mondo whitespace change
88 <script type="text/javascript">
89 dojo.require("dojo.parser");
90 dojo.require("dijit.form.Button");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
91
9dd52dc6 »
2011-11-20 mondo whitespace change
92 function add1() {
93 // add the class "style1" to the node "example1":
94 dojo.addClass("example1", "style1");
95 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
96
9dd52dc6 »
2011-11-20 mondo whitespace change
97 dojo.addOnLoad(function() {
98 dojo.connect(dojo.byId("button1"), "onclick", add1);
99 });
100 </script>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
101
9dd52dc6 »
2011-11-20 mondo whitespace change
102 .. cv:: html
d608cc59 »
2011-11-20 \r\n -> \n conversion.
103
9dd52dc6 »
2011-11-20 mondo whitespace change
104 <div id="example1">This node will be changed.</div>
105 <button id="button1" data-dojo-type="dijit.form.Button" type="button">Add class</button>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
106
107
9dd52dc6 »
2011-11-20 mondo whitespace change
108 Add several classes as a string
109 -------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
110
9dd52dc6 »
2011-11-20 mondo whitespace change
111 The following example adds two classes: "style1" and "style2" to the node "example1":
d608cc59 »
2011-11-20 \r\n -> \n conversion.
112
9dd52dc6 »
2011-11-20 mondo whitespace change
113 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
114
9dd52dc6 »
2011-11-20 mondo whitespace change
115 // dojo 1.7+ (AMD)
116 require(["dojo/dom-class"], function(domClass){
117 domClass.add("example1", "style1 style2");
118 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
119
9dd52dc6 »
2011-11-20 mondo whitespace change
120 // dojo < 1.7
121 dojo.addClass("example1", "style1 style2");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
122
9dd52dc6 »
2011-11-20 mondo whitespace change
123 See it in action:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
124
9dd52dc6 »
2011-11-20 mondo whitespace change
125 .. cv-compound::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
126
127
9dd52dc6 »
2011-11-20 mondo whitespace change
128 .. css::
aa4dc2c3 »
2011-11-21 label deprecation, cleanups
129
d608cc59 »
2011-11-20 \r\n -> \n conversion.
130
9dd52dc6 »
2011-11-20 mondo whitespace change
131 <style type="text/css">
132 .style1 { background-color: #7c7c7c; color: #ffbf00;}
133 .style2 { border: 1px solid #ffbf00; padding: 20px;}
134 </style>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
135
9dd52dc6 »
2011-11-20 mondo whitespace change
136 .. cv:: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
137
9dd52dc6 »
2011-11-20 mondo whitespace change
138 <script type="text/javascript">
139 dojo.require("dojo.parser");
140 dojo.require("dijit.form.Button");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
141
9dd52dc6 »
2011-11-20 mondo whitespace change
142 function add1() {
143 // add classes "style1" and "style2" to the node "example1":
144 dojo.addClass("example1", "style1 style2");
145 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
146
9dd52dc6 »
2011-11-20 mondo whitespace change
147 dojo.addOnLoad(function() {
148 dojo.connect(dojo.byId("button1"), "onclick", add1);
149 });
150 </script>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
151
9dd52dc6 »
2011-11-20 mondo whitespace change
152 .. cv:: html
d608cc59 »
2011-11-20 \r\n -> \n conversion.
153
9dd52dc6 »
2011-11-20 mondo whitespace change
154 <div id="example1">This node will be changed.</div>
155 <button id="button1" data-dojo-type="dijit.form.Button" type="button">Add classes</button>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
156
157
9dd52dc6 »
2011-11-20 mondo whitespace change
158 Add several classes as an array
159 -------------------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
160
9dd52dc6 »
2011-11-20 mondo whitespace change
161 The following example adds two classes: "style1" and "style2" to the node "example1":
d608cc59 »
2011-11-20 \r\n -> \n conversion.
162
9dd52dc6 »
2011-11-20 mondo whitespace change
163 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
164
9dd52dc6 »
2011-11-20 mondo whitespace change
165 // dojo 1.7+ (AMD)
166 require(["dojo/dom-class"], function(domClass){
167 domClass.add("example1", ["style1", "style2"]);
168 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
169
9dd52dc6 »
2011-11-20 mondo whitespace change
170 // dojo < 1.7
171 dojo.addClass("example1", ["style1", "style2"]);
d608cc59 »
2011-11-20 \r\n -> \n conversion.
172
9dd52dc6 »
2011-11-20 mondo whitespace change
173 See it in action:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
174
9dd52dc6 »
2011-11-20 mondo whitespace change
175 .. cv-compound::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
176
9dd52dc6 »
2011-11-20 mondo whitespace change
177 .. css::
aa4dc2c3 »
2011-11-21 label deprecation, cleanups
178
d608cc59 »
2011-11-20 \r\n -> \n conversion.
179
9dd52dc6 »
2011-11-20 mondo whitespace change
180 <style type="text/css">
181 .style1 { background-color: #7c7c7c; color: #ffbf00;}
182 .style2 { border: 1px solid #ffbf00; padding: 20px;}
183 </style>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
184
9dd52dc6 »
2011-11-20 mondo whitespace change
185 .. cv:: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
186
9dd52dc6 »
2011-11-20 mondo whitespace change
187 <script type="text/javascript">
188 dojo.require("dojo.parser");
189 dojo.require("dijit.form.Button");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
190
9dd52dc6 »
2011-11-20 mondo whitespace change
191 function add1() {
192 // add classes "style1" and "style2" to the node "example1":
193 dojo.addClass("example1", ["style1", "style2"]);
194 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
195
9dd52dc6 »
2011-11-20 mondo whitespace change
196 dojo.addOnLoad(function() {
197 dojo.connect(dojo.byId("button1"), "onclick", add1);
198 });
199 </script>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
200
9dd52dc6 »
2011-11-20 mondo whitespace change
201 .. cv:: html
d608cc59 »
2011-11-20 \r\n -> \n conversion.
202
9dd52dc6 »
2011-11-20 mondo whitespace change
203 <div id="example1">This node will be changed.</div>
204 <button id="button1" data-dojo-type="dijit.form.Button" type="button">Add classes</button>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
205
206
9dd52dc6 »
2011-11-20 mondo whitespace change
207 Add to multiple nodes
208 ---------------------
d608cc59 »
2011-11-20 \r\n -> \n conversion.
209
9dd52dc6 »
2011-11-20 mondo whitespace change
210 ``addClass`` is also available for :ref:`NodeLists <dojo/NodeList>`, so that it's also possible to add classes for multiple nodes. The following example adds the class for each node in the NodeList returned from dojo.query:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
211
9dd52dc6 »
2011-11-20 mondo whitespace change
212 .. code-block :: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
213
9dd52dc6 »
2011-11-20 mondo whitespace change
214 // dojo 1.7+ (AMD)
215 require(["dojo/query", "dojo/NodeList-dom"], function(query){
216 query("#example3 div").addClass("style3");
217 });
d608cc59 »
2011-11-20 \r\n -> \n conversion.
218
9dd52dc6 »
2011-11-20 mondo whitespace change
219 // dojo < 1.7
220 dojo.query("#example3 div").addClass("style3");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
221
9dd52dc6 »
2011-11-20 mondo whitespace change
222 See it in action:
d608cc59 »
2011-11-20 \r\n -> \n conversion.
223
9dd52dc6 »
2011-11-20 mondo whitespace change
224 .. cv-compound::
d608cc59 »
2011-11-20 \r\n -> \n conversion.
225
9dd52dc6 »
2011-11-20 mondo whitespace change
226 .. css::
aa4dc2c3 »
2011-11-21 label deprecation, cleanups
227
d608cc59 »
2011-11-20 \r\n -> \n conversion.
228
9dd52dc6 »
2011-11-20 mondo whitespace change
229 <style type="text/css">
230 .style3 { background-color: #7c7c7c; color: #ffbf00; padding: 10px }
231 .additionalStyle3 { background-color: #491f00; color: #36d900 }
232 </style>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
233
9dd52dc6 »
2011-11-20 mondo whitespace change
234 .. cv:: javascript
d608cc59 »
2011-11-20 \r\n -> \n conversion.
235
9dd52dc6 »
2011-11-20 mondo whitespace change
236 <script type="text/javascript">
237 dojo.require("dojo.parser");
238 dojo.require("dijit.form.Button");
d608cc59 »
2011-11-20 \r\n -> \n conversion.
239
9dd52dc6 »
2011-11-20 mondo whitespace change
240 function add3() {
241 // add the class "style3" to each <div> node:
242 dojo.query("#example3 div").addClass("style3");
243 }
d608cc59 »
2011-11-20 \r\n -> \n conversion.
244
9dd52dc6 »
2011-11-20 mondo whitespace change
245 dojo.addOnLoad(function() {
246 dojo.connect(dojo.byId("button3"), "onclick", add3);
247 });
248 </script>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
249
9dd52dc6 »
2011-11-20 mondo whitespace change
250 .. cv:: html
d608cc59 »
2011-11-20 \r\n -> \n conversion.
251
9dd52dc6 »
2011-11-20 mondo whitespace change
252 <div id="example3" class="additionalStyle3">
253 <div>This node will be changed.</div>
254 <div>This node also.</div>
255 <div>And this is the last one.</div>
256 </div>
257 <button id="button3" data-dojo-type="dijit.form.Button" type="button">Add to multiple nodes</button>
d608cc59 »
2011-11-20 \r\n -> \n conversion.
258
259
9dd52dc6 »
2011-11-20 mondo whitespace change
260 ========
261 See also
262 ========
d608cc59 »
2011-11-20 \r\n -> \n conversion.
263
9dd52dc6 »
2011-11-20 mondo whitespace change
264 * :ref:`dojo.hasClass <dojo/hasClass>`
265 * :ref:`dojo.removeClass <dojo/removeClass>`
266 * :ref:`dojo.toggleClass <dojo/toggleClass>`
Something went wrong with that request. Please try again.