Skip to main content

Search and Top Navigation

#7053 closed feature (fixed)

Opened March 02, 2011 09:22PM UTC

Closed March 11, 2015 08:11PM UTC

Last modified April 18, 2015 07:00AM UTC

Widget: Ability to customize style-related CSS classes

Reported by: scottgonzalez Owned by: petersendidit
Priority: blocker Milestone: 1.12.0
Component: ui.widget Version: 1.8.9
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (26)

Changed April 21, 2011 05:42PM UTC by gf3 comment:1

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

Changed February 27, 2012 03:40PM UTC by jzaefferer comment:2

priority: minormajor
status: newopen

Changed October 11, 2012 02:57PM UTC by scottgonzalez comment:3

milestone: 1.9.01.10.0

Changed October 18, 2012 07:11PM UTC by petersendidit comment:4

owner: → petersendidit
status: openassigned

Changed December 20, 2012 02:33PM UTC by scottgonzalez comment:5

#8928 is a duplicate of this ticket.

Changed December 28, 2012 10:39AM UTC by jzaefferer comment:6

Changed January 25, 2013 09:22PM UTC by tj.vantoll comment:7

milestone: 1.10.0none

Changed January 29, 2013 01:46PM UTC by scottgonzalez comment:8

blocking: → 5901

Changed September 02, 2014 12:09PM UTC by scottgonzalez comment:9

milestone: none1.12.0
priority: majorblocker

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:10

resolution: → fixed
status: assignedclosed

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

Fixes #7053

Closes gh-1411

Changeset: c192d4086d9bbaf09d5f870857af30c60a427e22

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:11

Accordion: Add classes option

Ref #7053

Ref gh-1411

Changeset: 7c6a7d71e98cbeea21bfc1560f8a82484a3c9510

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:12

Autocomplete: Add classes option

Ref #7053

Ref gh-1411

Changeset: cff1fb2a13e18403c02ba516e08db3a5b21a8b6c

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:13

Dialog: Add classes option

Ref #7053

Ref gh-1411

Changeset: 6f4884f6f5b422bacbb20dbd82d90d351a985a4b

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:14

Draggable: Add classes option

Ref #7053

Ref gh-1411

Changeset: e9bb449b5dde255e4a79ea6768864ba26529ed6c

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:15

Droppable: Add classes option

Ref #7053

Ref gh-1411

Changeset: f58277a521ae41b1d3e054a419ef5fda85e7db21

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:16

Menu: Add classes option

Ref #7053

Ref gh-1411

Changeset: 2ebef69efe96a5b6057bdedd8876a76661bde482

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:17

Progressbar: Add classes option

Ref #7053

Ref gh-1411

Changeset: ea35ded6ed12747d88bf163c3b7fa15506ef521a

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:18

Resizable: Add classes option

Ref #7053

Ref gh-1411

Changeset: 2665aa01469daf10dacf76f60a7e5f39f2e0a3de

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:19

Selectable: Add classes option

Ref #7053

Ref gh-1411

Changeset: 2a7873dd5711db472a87f749e698e80c49ccf8cd

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:20

Selectmenu: Add classes option

Ref #7053

Ref gh-1411

Changeset: 3483486a153f6f7b3a8bbe9783735eb63adfd033

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:21

Slider: Add classes option

Ref #7053

Ref gh-1411

Changeset: 491bb9c7f4929eb574e0ab6116a5b22562446734

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:22

Sortable: Add classes option

Ref #7053

Ref gh-1411

Changeset: 90c27b4b5130fff9abbfea671c193c59e4bf8850

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:23

Spinner: Add classes option

Ref #7053

Ref gh-1411

Changeset: 28dccda3776c586052d787dd77e0abdbf1b68a0d

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:24

Tabs: Add classes option

Ref #7053

Ref gh-1411

Changeset: aaddfbfa8b3bdb0374540d7dd1e13a708bdb00aa

Changed March 11, 2015 08:11PM UTC by Alexander Schmitz comment:25

Tooltip: Add classes option

Ref #7053

Ref gh-1411

Changeset: 9d71547394f9464e5af1f0c77e56917d0ba5abb6

Changed April 18, 2015 07:00AM UTC by Jörn Zaefferer comment:26

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