|
| 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