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

Answer 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
        });
    });