Question

使用Kendo UI网格改进网站的可访问性。

遇到挑战，在网格磁贴中添加样式，并使用内置于Kendo UI中的所有样式继承。

有没有人知道如何在Kendo UI网格中更改锚标记（或任何HTML元素）的焦点样式？

示例 - 我想将此样式添加到网格项：

a:focus { outline: #FF0000 dotted medium; }

Answer 1

我猜您使用模板将列呈现为HTML anchor，对吗？

你应该有类似的东西：

{ 
    field: "City", 
    width: 200, 
    template: "<a href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

如果你这样做并使用CSS：

a:focus { outline: #FF0000 dotted medium; }

有效！请在此处查看：http://jsfiddle.net/F5R7m/1/

现在的问题是，您是否只想将此样式限制为网格，因此网格外的锚点不会获得相同的样式。然后，您可以将模板定义为：

{ 
    field: "City", 
    width: 200, 
    template: "<a class='ob-grid' href='http://maps.google.com?q=#= City #'>#= City #</a>" 
}

和CSS样式为：

a.ob-grid:focus { 
    outline: #FF0000 dotted medium;
}

并按照此示例运行：http://jsfiddle.net/F5R7m/2/

或者您可以通过将CSS定义为：

将其限制为单个网格而不更改模板

#grid a:focus { 
    outline: #FF0000 dotted medium;
}

#grid指的是您的剑道UI id的{{1}}。示例：http://jsfiddle.net/F5R7m/3/

如果您希望将其用于页面中的每个网格，则可以将CSS定义为：

grid

然后任何HTML锚点在获得焦点时都会有红色虚线，如下所示：http://jsfiddle.net/F5R7m/5/

Answer 2

你最喜欢只需要在你的CSS中添加！important。

我使用以下JS将一个css类添加到kendo Grid中的tr中，以不同方式为行设置颜色并突出显示效果（在本例中为包含特定单词的td）：

function setMessageColor(){
    $("#EventMessagesGrid tr td:contains('Nominal')").closest('tr').addClass("nominal-message");
    $("#EventMessagesGrid tr td:contains('Warning')").closest('tr').addClass("warning-message");
    $("#EventMessagesGrid tr td:contains('Failure')").closest('tr').addClass("failure-message");
}

这些类的css遵循以下模式：

.warning-message {
background-color: #fffdec !important;
}
.warning-message:hover {
    background-color: #fff9c2 !important;
}

Answer 3

取决于您的网格设置方式......

Kendo将选定的类添加到元素中。

您可以使用类似的内容在css中定位。

.k-state-selected{
    border: 1px dotted red !important;
}

如果你最后加载了你的css，你可能不需要这个重要的东西，但它没有受到伤害。

将焦点样式添加到Kendo UI网格？

3 个答案: