Override HTML result jQueryUI Spinner

Question

I'm trying using jQuery Spinner but, i would like to overrides the HTML result.

Basically change the follow button html structure:

<a class="ui-spinner-button ...>
    <span class="ui-button-text">
        <span class="ui-icon ui-icon-triangle-1-n">?</span>
    </span>
</a>

by:

<button type="button" class="ui-spinner-up" tabindex="-1"></button>

Have any way to do it, without change the original script (jquery.spinner.js)?

Regards, Giolvani

Can we get a [Fiddle](http://jsfiddle.net)? – Mooseman Jan 18 '13 at 19:19 — Mooseman, Jan 18 '13 at 19:19

score 4 · Answer 1 · answered Mar 12 '15 at 17:02

I know this question has been answered already, but if anyone is interesed you can override the _buttonHtml class (which renders the buttons) using the widget factory now. It's fairly simple to do.

You can do this by using the following syntax:

//Overriding the default buttons with our own classes
$.widget("ui.spinner", $.ui.spinner, {
    _buttonHtml: function () {
        return "" +
            "<button type='button' class='ui-spinner-up' tabindex='-1'></button>";
    }
});

//To call it, we simply instantiate like normal:
$("#myElement").spinner();

As always, you could instantiate with any options you would normally pass just fine

$("#myElement").spinner({min: '1', max: '10', numberFormat: 'n0'});

To call a custom namespace, you would use this:

$.widget("custom.myExtension", $.ui.spinner, {
    red: function() {
        this.element.css( "color", "red" );
    }
});

//Instantiate it like so:
$("myElement").myExtension("red");

Easy breezy. In this example, I am overriding the default behavior for the jQuery UI spinner. The first argument is your custom name. The documentation suggests you name it in the custom namespace. So something like "custom.myButton" (whatever you like) would be acceptable here. The second argument is the base widget you are trying to overwrite. In our case, it is the ui.spinner. Then you provide the overridden method; if you look at the source code for the spinner, you can see that this method currently exists within the source, and we are simply overriding the default behavior. As you can see in the second example, I extended the ui.spinner with my own namespace. Hope this helps anyone in the same boat.

Sources:

http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ http://api.jqueryui.com/spinner/#method-_buttonHtml

Shmiddty · Accepted Answer · 2013-01-18T19:44:51.273

1

$("#spin")
    .spinner()                         //init the spinner
    .parent()                          //grab the spinner wrapper
    .find(".ui-spinner-button")        //grab each button
    .empty()                           //remove their children
    .append("<div>Custom HTML</div>"); //add custom html

Or this: http://jsfiddle.net/smwMv/

$("#spin")
    .spinner()
    .parent()
    .find(".ui-spinner-button")
    .replaceWith(function(){
        return $("<input>", {
            type:'button',
            'class':this.className, // preserve classNames
            tabindex:-1
        });
    });

edited Jan 18 '13 at 19:44

answered Jan 18 '13 at 19:36

Shmiddty

13,847
1
35
52

Thanks Shmiddty! I was thinking in something like this http://stackoverflow.com/questions/3488016/using-html-in-jquery-ui-autocomplete, but your solution solved my problem! – Giolvani Jan 21 '13 at 16:23
1

@Grinn It's like I took your code and turned it into the correct answer. Weird huh? – Shmiddty Jan 22 '13 at 17:24
@Shmiddty Something like that. I see it more like you stole my work to make a wild guess at exactly what he wanted - in order to get some status without doing any actual work. I used to work with a guy like you. He's now unemployed. – Grinn Jan 22 '13 at 17:31
Also, how can one steal what is freely given? – Shmiddty Jan 22 '13 at 17:36

Grinn · Answer 3 · 2013-01-18T19:38:43.657

0

I don't exactly follow what HTML changes you want to make, but you can access the spinner's HTML with <spinner>.parent().find(...).

As an example, here's a fiddle that shows changing the up arrow to have an ugly red border: http://jsfiddle.net/W7ayu/

Excerpt:

$("#spin")
    .spinner()
    .parent()
    .find(".ui-spinner-up")
    .css("border", "solid 1px red");

It also shows the outputted HTML.

edited Jan 18 '13 at 19:38

answered Jan 18 '13 at 19:27

Grinn

5,370
38
51

Override HTML result jQueryUI Spinner

3 Answers3