Question

我创建了一个双剑道列表框，以在彼此之间移动项目。在水平布局中，按钮看起来不错且正确。但是我在垂直配对中指向左和右的按钮不起作用。

我希望能够获得或获得的信息是如何分别修改每个按钮，而不必更改按钮的核心功能。我仍然希望transferTo和transferFrom能够正常工作，但是我希望按钮看起来有所不同（或者可能有文字）。

            var availableUsers = $("#usersavailable").kendoListBox({
            connectWith: "selectedusers",
            draggable: true,
            dataTextField: "UserName",
            dataValueField: "UserId",
            selectable: "multiple",
            dataSource: [],
            toolbar: {
                position: "bottom",
                tools: [
                    {
                        type: "splitButton", text: 'Insert Down', icon: 'insert-down'}
                    },
                    //"transferTo",
                    "transferFrom",
                    "transferAllTo",
                    "transferAllFrom"],


            },
        }).data("kendoListBox");
        var selectedUsers = $("#selectedusers").kendoListBox({
            dataTextField: "UserName",
            dataValueField: "UserId",
            draggable: true,
            selectable: "multiple",
            dataSource: [],
            remove: function (e) {
                setSelected(e, false);
            },
            add: function (e) {
                setSelected(e, true);
            }
        }).data("kendoListBox");

理想情况下，文档中直接讨论如何使用此页面的页面会很棒。试图找到关于放置在什么地方及其含义的具体信息一直是一个挑战。

Answer 1

通过messages配置属性，您可以设置命令按钮的文本，该按钮将呈现为command元素的title。浏览器会在按钮悬停时弹出其默认标题工具提示。

我不确定是否可以在列表框配置中指定工具栏splitButton。

选择toolbar.tools使用的按钮以及messages.tools使用每个按钮的消息文本

来自Listbox Configuration messages docs

$("#listBoxA").kendoListBox({
    connectWith: "listBoxB",
    dataSource: [ "ItemA1", "ItemA2" ],
    toolbar: {
        tools: [ "moveUp", "moveDown", "remove",
                 "transferTo", "transferFrom", "transferAllTo", "transferAllFrom" ]
    },
    messages: {
        tools: {
            moveUp: "my MoveUp message",
            moveDown: "my MoveDown message",
            remove: "Remove",
            transferTo: "my TransferTo message",
            transferFrom: "my TransferFrom message",
            transferAllTo: "my TransferAllTo message",
            transferAllFrom: "my TransferAllFrom message"
        }
    }

您可以使用一些jQuery来更改ListBox图标，这些jQuery会更改与命令图标相对应的元素：

$(".k-listbox-toolbar [data-command='transferAllTo'] span").attr("class", "k-icon k-i-warning");

如果您还希望在工具栏图标之后输入实际文本，请覆盖图标的宽度并after()文本：

-- css --
.k-listbox-toolbar [data-command="transferAllTo"] { width: auto; }

-- js --
$(".k-listbox-toolbar [data-command='transferAllTo'] span")
.attr("class", "k-icon k-i-warning")
.after("Hi")
;

请参阅dojo Tweaked ListBox ToolBar

如何更改Kendo ListBox工具栏中的按钮

1 个答案: