Question

我正在尝试使用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）？

此致 Giolvani

Answer 1

我知道这个问题已经得到了回答，但如果有人参与其中，你现在可以使用widget工具覆盖_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微调器的默认行为。第一个参数是您的自定义名称。文档建议您在自定义命名空间中将其命名。所以像＆＃34; custom.myButton＆＃34; （无论你喜欢什么）这里都可以接受。第二个参数是您尝试覆盖的基本窗口小部件。在我们的例子中，它是ui.spinner。然后你提供重写方法;如果您查看微调器的源代码，您可以看到此方法当前存在于源中，我们只是覆盖默认行为。正如您在第二个示例中所看到的，我使用自己的命名空间扩展了ui.spinner。希望这可以帮助同一条船上的任何人。

来源：

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

Answer 2

$("#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
        });
    });

Answer 3

我并不完全遵循您要进行的HTML更改，但您可以使用<spinner>.parent().find(...)访问微调器的HTML。

作为一个例子，这里有一个小提示，显示更改向上箭头有一个丑陋的红色边框：http://jsfiddle.net/W7ayu/

摘录：

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

它还显示输出的HTML。

覆盖HTML结果jQueryUI Spinner

3 个答案: