Question

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

我扩展了JQuery UI Spinner ：

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

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

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

正在生成HTML：

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

知道这个角色来自哪里？以及我如何通过扩展Spinner小部件来改变它。

PS。只是在初始化小部件时设置选项在这里不是一个可行的选择。

Answer 1

我碰到了非常相似的东西。我不确定如何通过扩展小部件本身来改变它，并且必须快速提出一些东西，所以我只是让jQuery查找类并替换span中的HTML：

$(document).ready(function() {
    $('span > .icon-plus').html('*new plus button*');
});

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

Answer 3

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

$.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()

Answer 4

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

JQuery UI微调器 - 更改图标

4 个答案: