CODEWITHSUNDEEP
jquery-ui-spinner
elizabethmeyer
elizabethmeyer

Reputation: 1003

JQuery UI spinner - change icons

I want JQuery UI Spinner to display a plus and a minus sign instead of up and down arrows.

I've extended the JQuery UI Spinner as such:

$.widget("ui.spinner", $.ui.spinner, {
    options: {
        icons: {
            down: "icon custom-down-icon",
            up: "icon custom-up-icon"
        }
    }
});

With these classes I can then style the up and down spinner "buttons" as I prefer.

This DOES change the class of the s containing the spinner icon as I want, but it doesn't change the actual HTML character inside the s.

HTML being generated:

<span class="ui-icon icon icon-plus">▼</span>

Any idea where this character comes from? And how I can change it by extending the Spinner widget.

PS. Just setting options when initialising the widget is not really a viable option here.

Upvotes: 1

Views: 4924

Answers (4)

Michael Kartsev
Michael Kartsev

Reputation: 11

You can extend default buttons by calling a widget constructor

$.widget( "ui.spinner", $.ui.spinner, {
        _buttonHtml: function() {
            return "" +
                "<input class='ui-spinner-button ui-spinner-up' id='buttonadd' type='button' value='&plus;' />" +
                "<input class='ui-spinner-button ui-spinner-down' id='buttonremove' type='button' value='&minus;' />";
        }
    });

And then attach spinner to element:

$('#spinner').spinner()

Upvotes: 1

tom newman
tom newman

Reputation: 21

The HTML character that is loaded depends on the class of the span, I think the "custom-icon" ones are just for the example.

There is a full list of the icons available here: http://api.jqueryui.com/theming/icons/

Just pick the one you want (there are a couple of +s and -s) and follow the instructions here: http://api.jqueryui.com/spinner/#option-icons

This is my code if it helps:

 $('input[class="itemLevel"]').spinner({ min: 0, max: 5, icons: { down: "ui-icon-carat-1-w", up: "ui-icon-carat-1-e"} });

Upvotes: 2

Galsh
Galsh

Reputation: 1

Include this link in your head:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

Upvotes: -2

jwhazel
jwhazel

Reputation: 984

I ran into something very similar. I'm not sure how to change it by just extending the widget itself and had to come up with something quick so I just had jQuery look for the class and replace the HTML inside the span:

$(document).ready(function() {
    $('span > .icon-plus').html('*new plus button*');
});

Upvotes: 3

Related Questions