Skip to content

Commit 42d9200

Browse files
committed
jQuery UI: Article on the classes option—new to jQuery UI 1.12
1 parent f933bef commit 42d9200

File tree

1 file changed

+89
-0
lines changed

1 file changed

+89
-0
lines changed
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script>{
2+
"title": "Using the classes Option",
3+
"level": "advanced"
4+
}</script>
5+
6+
As of the 1.12 release, the jQuery UI widget factory includes a means of managing CSS class names through the `classes` option. This article will give you an overview of how the `classes` option works, and discuss what you can do with it.
7+
8+
### Syntax overview
9+
10+
The `classes` option is used to map structural class names to custom class names that you define. To see what this means let's look at an example. The code below uses the `classes` option to create a red dialog:
11+
12+
```
13+
<style>
14+
.custom-red { background: red; }
15+
</style>
16+
<script>
17+
var dialog = $( "<div>Red</div>" ).dialog({
18+
classes: {
19+
"ui-dialog": "custom-red"
20+
}
21+
});
22+
</script>
23+
```
24+
25+
Here, the presentational `custom-red` class name is being associated with the structural `ui-dialog` class name. Now, whenever the dialog applies the `ui-dialog` class name it will also add `custom-red`. You can associate multiple class names by including multiple space-delimited class names in the object's value. For instance the following code creates a dialog that is big and red:
26+
27+
```
28+
<style>
29+
.custom-red { background: red; }
30+
.custom-big { font-size: 3em; }
31+
</style>
32+
<script>
33+
var dialog = $( "<div>Big and red</div>" ).dialog({
34+
classes: {
35+
"ui-dialog": "custom-red custom-big"
36+
}
37+
});
38+
</script>
39+
```
40+
41+
*Note: To get a full list of the class names you can use with `classes`, you can log the default values stored at `$.namespace.wigetName.prototype.options.classes`. For instance the dialog widget's default values are available at `$.ui.dialog.prototype.options.classes`. Additionally, the API documentation for all jQuery UI widgets list the class names they use; here are dialog's: <http://api.jqueryui.com/dialog/#theming>.*
42+
43+
The `classes` option works any other widget factory option, which means all the mechanisms around options still apply. For instance the following code uses the [`option()` method](http://api.jqueryui.com/jquery.widget/#method-option) to remove all class names currently associated with `ui-dialog`:
44+
45+
```
46+
dialog.dialog( "option", "classes.ui-dialog", "" );
47+
```
48+
49+
The following creates a [widget extension](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/) that automatically associates the `custom-red` and `custom-big` class names with `ui-dialog`:
50+
51+
```
52+
<style>
53+
.custom-red { background: red; }
54+
.custom-big { font-size: 3em; }
55+
</style>
56+
<script>
57+
$.widget( "custom.dialog", $.ui.dialog, {
58+
options: {
59+
classes: {
60+
"ui-dialog": "custom-red custom-big"
61+
}
62+
}
63+
});
64+
$( "<div>Big and red</div>" ).dialog();
65+
</script>
66+
```
67+
68+
The widget factory also removes any class names specified in `classes` when the widget is destroyed.
69+
70+
### Theming
71+
72+
As the previous examples show, the `classes` option provides a quick way to associate custom class names with classes used within a widget. This approach works for simple cases, but it also be used to adapt third-party themes to work with widget-factory-built widgets. For example, if you're using [Bootstrap](http://getbootstrap.com/) and jQuery UI together, you can use the following code to create a jQuery UI dialog that uses Bootstrap's theming:
73+
74+
```
75+
$.extend( $.ui.dialog.prototype.options.classes, {
76+
"ui-dialog": "modal-content",
77+
"ui-dialog-titlebar": "modal-header",
78+
"ui-dialog-title": "modal-title",
79+
"ui-dialog-titlebar-close": "close",
80+
"ui-dialog-content": "modal-body",
81+
"ui-dialog-buttonpane": "modal-footer"
82+
});
83+
```
84+
85+
For more examples of this approach, checkout [Alexander Schmitz's repo](https://github.com/arschmitz/jqueryui-bootstrap-adapter) that adapts jQuery UI to work with Boostrap using the `classes` option.
86+
87+
### Using `classes` in your own widgets
88+
89+
...

0 commit comments

Comments
 (0)