Widget: Ability to customize style-related CSS classes

[Scott González]

Right now there are classes like .ui-corner-all that are hardcoded in widgets. We should remove the hardcoding and add the ability to customize the style-related classes based on the functional classes.

Proposal based on idea from Doug Neiner:

$( "#dialog" ).dialog({
    classes: {
        "ui-dialog": "ui-corner-top",
        "ui-dialog-titlebar": "ui-corner-top awesome-fade-class"
        "ui-dialog-buttonpane": null
    }
});

The classes option would map functional classes to additional style classes. The existing style classes would become the defaults and the user can completely override the style classes.

Use within a widget could be:

uiDialog.addClass( this._classes( "ui-dialog" ) );

where the call to ._classes() would return "ui-dialog ui-corner-top".

[gf3]

Wow what a great idea! Can't wait to see this make it's way into core UI.

[Scott González]

#8928 is a duplicate of this ticket.

[Jörn Zaefferer]

PR: ​https://github.com/jquery/jquery-ui/pull/790

[Alexander Schmitz]

Widget: Add classes option and _add/_remove/_toggleClass methods

Fixes #7053 Closes gh-1411

Changeset: c192d4086d9bbaf09d5f870857af30c60a427e22

[Alexander Schmitz]

Accordion: Add classes option

Ref #7053 Ref gh-1411

Changeset: 7c6a7d71e98cbeea21bfc1560f8a82484a3c9510

[Alexander Schmitz]

Autocomplete: Add classes option

Ref #7053 Ref gh-1411

Changeset: cff1fb2a13e18403c02ba516e08db3a5b21a8b6c

[Alexander Schmitz]

Dialog: Add classes option

Ref #7053 Ref gh-1411

Changeset: 6f4884f6f5b422bacbb20dbd82d90d351a985a4b

[Alexander Schmitz]

Draggable: Add classes option

Ref #7053 Ref gh-1411

Changeset: e9bb449b5dde255e4a79ea6768864ba26529ed6c

[Alexander Schmitz]

Droppable: Add classes option

Ref #7053 Ref gh-1411

Changeset: f58277a521ae41b1d3e054a419ef5fda85e7db21

[Alexander Schmitz]

Menu: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2ebef69efe96a5b6057bdedd8876a76661bde482

[Alexander Schmitz]

Progressbar: Add classes option

Ref #7053 Ref gh-1411

Changeset: ea35ded6ed12747d88bf163c3b7fa15506ef521a

[Alexander Schmitz]

Resizable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2665aa01469daf10dacf76f60a7e5f39f2e0a3de

[Alexander Schmitz]

Selectable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2a7873dd5711db472a87f749e698e80c49ccf8cd

[Alexander Schmitz]

Selectmenu: Add classes option

Ref #7053 Ref gh-1411

Changeset: 3483486a153f6f7b3a8bbe9783735eb63adfd033

[Alexander Schmitz]

Slider: Add classes option

Ref #7053 Ref gh-1411

Changeset: 491bb9c7f4929eb574e0ab6116a5b22562446734

[Alexander Schmitz]

Sortable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 90c27b4b5130fff9abbfea671c193c59e4bf8850

[Alexander Schmitz]

Spinner: Add classes option

Ref #7053 Ref gh-1411

Changeset: 28dccda3776c586052d787dd77e0abdbf1b68a0d

[Alexander Schmitz]

Tabs: Add classes option

Ref #7053 Ref gh-1411

Changeset: aaddfbfa8b3bdb0374540d7dd1e13a708bdb00aa

[Alexander Schmitz]

Tooltip: Add classes option

Ref #7053 Ref gh-1411

Changeset: 9d71547394f9464e5af1f0c77e56917d0ba5abb6

[Jörn Zaefferer]

Tabs: Rename ui-tab class to ui-tabs-tab for consistent prefixes

Fixes #12061 Closes gh-1538 Ref #7053 Ref jquery/api.jqueryui.com#256

Changeset: 74ccbc18a414be9f78f6765b2b6c8be29c5019a9