0

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

4

3 に答える 3

3

この質問は既に回答済みですが、興味のある方は、ウィジェット ファクトリを使用して _buttonHtml クラス (ボタンをレンダリングする) をオーバーライドできます。やり方はかなり簡単です。

これを行うには、次の構文を使用します。

//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();

いつものように、通常は問題なく渡す任意のオプションでインスタンス化できます

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

カスタム名前空間を呼び出すには、次を使用します。

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

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

簡単な。この例では、jQuery UI スピナーのデフォルトの動作をオーバーライドしています。最初の引数はカスタム名です。ドキュメントでは、カスタム名前空間で名前を付けることが推奨されています。したがって、「custom.myButton」のようなもの (好きなもの) はここで受け入れられます。2 番目の引数は、上書きしようとしているベース ウィジェットです。私たちの場合、それは ui.spinner です。次に、オーバーライドされたメソッドを提供します。スピナーのソース コードを見ると、このメソッドが現在ソース内に存在し、デフォルトの動作をオーバーライドしているだけであることがわかります。2 番目の例でわかるように、ui.spinner を独自の名前空間で拡張しました。これが同じ船に乗っている人に役立つことを願っています。

ソース:

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

于 2015-03-12T17:02:33.250 に答える
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

またはこれ: http://jsfiddle.net/smwMv/

$("#spin")
    .spinner()
    .parent()
    .find(".ui-spinner-button")
    .replaceWith(function(){
        return $("<input>", {
            type:'button',
            'class':this.className, // preserve classNames
            tabindex:-1
        });
    });
于 2013-01-18T19:36:36.767 に答える
0

私はあなたがしたいHTMLの変更に正確には従いませんが、スピナーのHTMLにアクセスすることはできます<spinner>.parent().find(...)。

例として、上矢印を醜い赤い境界線に変更することを示すフィドルがあります：http: //jsfiddle.net/W7ayu/

抜粋：

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

また、出力されたHTMLも表示されます。

于 2013-01-18T19:27:54.293 に答える