Question

我正在尝试根据条件将css类应用于Kendo工具栏。我有一个页面，其中我有两种模式，编辑和读取模式。最初页面加载时，页面将处于读取模式。因此，包含4个按钮的kendo工具栏将处于禁用状态，当鼠标悬停在按钮上时，它将显示手形符号。切换到编辑模式时，工具栏变为活动状态，按钮将可单击。我的问题是当鼠标悬停在阅读模式的按钮上时，如何添加css类以使默认光标出现在工具栏中？

.k-link{
   cursor:default;
}

以上样式将用于jquery。 Jquery如下：

$(document).ready(function () {
     if (var gridEdit == "Read") {
       //css class(mentioned above) to add 
     }
 });

如何在上述条件下添加css类。如果有人能为我解决这个问题会很有帮助。提前谢谢。

Answer 1

如果要禁用工具栏中的按钮，除了应用CSS类之外，还需要做更多的工作。应用类不会阻止点击事件被触发。

您需要将禁用的CSS类应用于按钮：

$('.k-grid-toolbar').children('.k-button').addClass('k-state-disabled')

然后添加一个click事件处理程序以防止click事件被触发：

 $('.k-grid-toolbar').children('.k-button.k-state-disabled').on("click", disableToolbar);

 function disableToolbar()
 {
        return false;
 }

然后重新启用按钮，您可以执行相反的操作。解除之前添加的点击事件的解除绑定，并删除.k-state-disabled类。

 $('.k-grid-toolbar').children('.k-button.k-state-disabled').off("click", disableToolbar);
 $('.k-grid-toolbar').children('.k-button').removeClass('k-state-disabled')

您可以看到working example of this here

如何使用jquery基于条件将cssClass添加到kendo工具栏

1 个答案: