1

我希望 JQuery UI Spinner 显示加号和减号，而不是上下箭头。

我已经像这样扩展了 JQuery UI Spinner：

$.widget("ui.spinner", $.ui.spinner, {
    options: {
        icons: {
            down: "icon custom-down-icon",
            up: "icon custom-up-icon"
        }
    }
});

通过这些类，我可以根据自己的喜好设置上下微调器“按钮”的样式。

这确实会根据需要更改包含微调器图标的 s 的类，但不会更改 s 中的实际 HTML 字符。

正在生成的 HTML：

<span class="ui-icon icon icon-plus">▼&lt;/span>

知道这个角色是从哪里来的吗？以及如何通过扩展 Spinner 小部件来更改它。

PS。在初始化小部件时仅设置选项在这里并不是一个真正可行的选项。

4

4 回答 4

3

我遇到了非常相似的事情。我不确定如何通过扩展小部件本身来更改它，并且必须快速想出一些东西，所以我只是让 jQuery 查找类并替换跨度内的 HTML：

$(document).ready(function() {
    $('span > .icon-plus').html('*new plus button*');
});
于 2013-11-07T20:42:23.523 回答
2

加载的 HTML 字符取决于跨度的类，我认为“自定义图标”仅用于示例。

这里有可用图标的完整列表：http: //api.jqueryui.com/theming/icons/

只需选择您想要的（有几个 +s 和 -s）并按照此处的说明进行操作：http: //api.jqueryui.com/spinner/#option-icons

如果有帮助，这是我的代码：

 $('input[class="itemLevel"]').spinner({ min: 0, max: 5, icons: { down: "ui-icon-carat-1-w", up: "ui-icon-carat-1-e"} });
于 2015-01-21T11:16:13.457 回答
1

您可以通过调用小部件构造函数来扩展默认按钮

$.widget( "ui.spinner", $.ui.spinner, {
        _buttonHtml: function() {
            return "" +
                "<input class='ui-spinner-button ui-spinner-up' id='buttonadd' type='button' value='&plus;' />" +
                "<input class='ui-spinner-button ui-spinner-down' id='buttonremove' type='button' value='&minus;' />";
        }
    });

然后将微调器附加到元素：

$('#spinner').spinner()
于 2015-04-01T11:32:38.480 回答
-2

将此链接包含在您的脑海中：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
于 2014-01-07T19:49:48.557 回答