Ticket #7053 (closed feature: fixed)

Opened 5 years ago

Last modified 5 months ago

Widget: Ability to customize style-related CSS classes

Reported by: scott.gonzalez Owned by: petersendidit
Priority: blocker Milestone: 1.12.0
Component: ui.widget Version: 1.8.9
Keywords: Cc:
Blocking: #5901 Blocked by:

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

Change History

comment:1 Changed 4 years ago by gf3

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

comment:2 Changed 4 years ago by joern.zaefferer

  • Priority changed from minor to major
  • Status changed from new to open

comment:3 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.9.0 to 1.10.0

comment:4 Changed 3 years ago by petersendidit

  • Owner set to petersendidit
  • Status changed from open to assigned

comment:5 Changed 3 years ago by scott.gonzalez

#8928 is a duplicate of this ticket.

comment:7 Changed 3 years ago by tj.vantoll

  • Milestone changed from 1.10.0 to none

comment:8 Changed 3 years ago by scott.gonzalez

  • Blocking 5901 added

comment:9 Changed 12 months ago by scott.gonzalez

  • Priority changed from major to blocker
  • Milestone changed from none to 1.12.0

comment:10 Changed 6 months ago by Alexander Schmitz

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Fixes #7053 Closes gh-1411

Changeset: c192d4086d9bbaf09d5f870857af30c60a427e22

comment:11 Changed 6 months ago by Alexander Schmitz

Accordion: Add classes option

Ref #7053 Ref gh-1411

Changeset: 7c6a7d71e98cbeea21bfc1560f8a82484a3c9510

comment:12 Changed 6 months ago by Alexander Schmitz

Autocomplete: Add classes option

Ref #7053 Ref gh-1411

Changeset: cff1fb2a13e18403c02ba516e08db3a5b21a8b6c

comment:13 Changed 6 months ago by Alexander Schmitz

Dialog: Add classes option

Ref #7053 Ref gh-1411

Changeset: 6f4884f6f5b422bacbb20dbd82d90d351a985a4b

comment:14 Changed 6 months ago by Alexander Schmitz

Draggable: Add classes option

Ref #7053 Ref gh-1411

Changeset: e9bb449b5dde255e4a79ea6768864ba26529ed6c

comment:15 Changed 6 months ago by Alexander Schmitz

Droppable: Add classes option

Ref #7053 Ref gh-1411

Changeset: f58277a521ae41b1d3e054a419ef5fda85e7db21

comment:16 Changed 6 months ago by Alexander Schmitz

Menu: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2ebef69efe96a5b6057bdedd8876a76661bde482

comment:17 Changed 6 months ago by Alexander Schmitz

Progressbar: Add classes option

Ref #7053 Ref gh-1411

Changeset: ea35ded6ed12747d88bf163c3b7fa15506ef521a

comment:18 Changed 6 months ago by Alexander Schmitz

Resizable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2665aa01469daf10dacf76f60a7e5f39f2e0a3de

comment:19 Changed 6 months ago by Alexander Schmitz

Selectable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 2a7873dd5711db472a87f749e698e80c49ccf8cd

comment:20 Changed 6 months ago by Alexander Schmitz

Selectmenu: Add classes option

Ref #7053 Ref gh-1411

Changeset: 3483486a153f6f7b3a8bbe9783735eb63adfd033

comment:21 Changed 6 months ago by Alexander Schmitz

Slider: Add classes option

Ref #7053 Ref gh-1411

Changeset: 491bb9c7f4929eb574e0ab6116a5b22562446734

comment:22 Changed 6 months ago by Alexander Schmitz

Sortable: Add classes option

Ref #7053 Ref gh-1411

Changeset: 90c27b4b5130fff9abbfea671c193c59e4bf8850

comment:23 Changed 6 months ago by Alexander Schmitz

Spinner: Add classes option

Ref #7053 Ref gh-1411

Changeset: 28dccda3776c586052d787dd77e0abdbf1b68a0d

comment:24 Changed 6 months ago by Alexander Schmitz

Tabs: Add classes option

Ref #7053 Ref gh-1411

Changeset: aaddfbfa8b3bdb0374540d7dd1e13a708bdb00aa

comment:25 Changed 6 months ago by Alexander Schmitz

Tooltip: Add classes option

Ref #7053 Ref gh-1411

Changeset: 9d71547394f9464e5af1f0c77e56917d0ba5abb6

comment:26 Changed 5 months ago by 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

Note: See TracTickets for help on using tickets.