0

我正在尝试使用 jQuery Spinner，但是我想覆盖 HTML 结果。

基本上改变了跟随按钮的html结构：

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

经过：

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

有什么办法做到这一点，而不改变原来的脚本（jquery.spinner.js）？

问候， 乔尔瓦尼

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”（无论你喜欢什么）这样的东西在这里都是可以接受的。第二个参数是您尝试覆盖的基本小部件。在我们的例子中，它是 ui.spinner。然后你提供被覆盖的方法；如果您查看微调器的源代码，您可以看到该方法当前存在于源代码中，我们只是覆盖了默认行为。正如您在第二个示例中所看到的，我使用自己的命名空间扩展了 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 更改，但您可以使用<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 回答