|
| 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](http://api.jqueryui.com/jquery.widget/#option-classes). 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 associated with the structural `ui-dialog` class name. Now, whenever the dialog applies the `ui-dialog` class name, it will also add a `custom-red` class name. 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 the `classes` option, 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 like any other widget factory option, which means all the widget factory option mechanisms 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 the `ui-dialog` class name: |
| 44 | + |
| 45 | +``` |
| 46 | +dialog.dialog( "option", "classes.ui-dialog", "" ); |
| 47 | +``` |
| 48 | + |
| 49 | +And 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 the `ui-dialog` class name: |
| 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 | +As an added benefit, the widget factory also removes any class names specified in the `classes` option 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 class names used within a widget. This approach works for simple cases, but it can 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, check out [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 the `classes` option in your own widgets |
| 88 | + |
| 89 | +Custom widgets can take advantage of the `classes` option just like the jQuery UI widgets do. In fact, the widget factory provides a number of new helper methods to make implementing your own `classes` option relatively easy. As an example consider the following custom redBox widget, *before* the `classes` option: |
| 90 | + |
| 91 | +``` |
| 92 | +<style> |
| 93 | + .custom-red-box { background: red; } |
| 94 | +</style> |
| 95 | +<script> |
| 96 | + $.widget( "custom.redBox", { |
| 97 | + _create: function() { |
| 98 | + this.element.addClass( "custom-red-box ui-corner-all" ); |
| 99 | + }, |
| 100 | + _destroy: function() { |
| 101 | + this.element.removeClass( "custom-red-box ui-corner-all" ); |
| 102 | + } |
| 103 | + }); |
| 104 | +</script> |
| 105 | +``` |
| 106 | + |
| 107 | +Adding the `classes` option to this widget allows users to do two things: associate new class names with the `custom-red-box` class name, as well as control how the `ui-corner-all` class name is used. The code below shows an updated implementation of the `redBox` widget that makes these use cases possible: |
| 108 | + |
| 109 | +``` |
| 110 | +<style> |
| 111 | + .custom-red-box { background: red; } |
| 112 | +</style> |
| 113 | +<script> |
| 114 | + $.widget( "custom.redBox", { |
| 115 | + options: { |
| 116 | + classes: { |
| 117 | + "custom-red-box": "ui-corner-all" |
| 118 | + } |
| 119 | + }, |
| 120 | + _create: function() { |
| 121 | + this._addClass( "custom-red-box" ); |
| 122 | + }, |
| 123 | + _destroy: function() { |
| 124 | + this._removeClass( "custom-red-box" ); |
| 125 | + } |
| 126 | + }); |
| 127 | +</script> |
| 128 | +``` |
| 129 | + |
| 130 | +There are two changes to note here. The first is the specification of the `classes` property in the `options` object. This configures the default mapping of structural class names to presentational class names. Here the structural `custom-red-box` class name is mapped to a presentational `ui-corner-all` class name. |
| 131 | + |
| 132 | +The second thing to note is the use of the widget factory's new `_addClass()` and `_removeClass()` methods. The methods are shorthands that accept a structural class name and apply it, and its associated presentational class names, to an element. You can specify the element by passing it as the first argument of `_addClass()`/`_removeClass()` (or `_toggleClass()`, which hasn't been mentioned yet, but it also available), or you can omit the element as this example does, in which case the classes are applied to or removed from the widget's main element (`this.element`). For more examples of how these methods work, refer to the API documentation of [`_addClass()`]((http://api.jqueryui.com/jquery.widget/#method-_addClass), [`_removeClass()`]((http://api.jqueryui.com/jquery.widget/#method-_removeClass), and [`_toggleClass()`]((http://api.jqueryui.com/jquery.widget/#method-_toggleClass). |
| 133 | + |
| 134 | +In general, using the `classes` options in your widgets gives your widgets' users flexibility in how your widgets' class names are managed, and lets them adapt to a wide variety of themes. |
0 commit comments