Question

我有一个kendo弹出窗口，它会自动将k-button类应用于该窗口中的按钮。

<button data-role="button" title="Save record and close" class="btn btn-primary k-button" style="" id="saveClose" role="button" aria-disabled="false" tabindex="0">Save &amp; Close</button>

这是原始按钮

<div class="btn-group mr5">
  <button id="del" class="btn btn-primary" type="button" title="Delete>
	<i class=" fa fa-minus mr5 "></i>
	 Delete
  </button>
</div>

我想要的是在加载网格时，它不会将k-button类添加到按钮。

Answer 1

我无法重现此问题，但我已尝试为此提供解决方案。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
    <div>
        <button id="OpenWin">OPEN</button>
        <div id="window">
            <button data-role="button" title="Save record and close" class="btn btn-primary"
                id="saveClose" role="button" aria-disabled="false" tabindex="0">
                Save &amp; Close</button>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var window = $("#window");
            $("#OpenWin").click(function (e) {
                window.data("kendoWindow").open();
            });
            window.kendoWindow({
                width: "505px",
                height: "315px",
                title: "Rams's Ten Principles of Good Design",
                actions: ["Pin", "Refresh", "Maximize", "Close"],
                open: hideButtonStyle,
                activate: hideButtonStyle,
                refresh: hideButtonStyle,
                visible: false
            });
        });
        function hideButtonStyle(e) {
            //Below code line remove all CSS class from the button
            $("#saveClose").removeClass();
            //Below code line re-add your existing CSS class
            $("#saveClose").addClass("btn btn-primary");
        }
    </script>
</body>
</html>

如果有任何疑虑，请告诉我。

Answer 2

我已经使用以下代码

通过Css代替JS完成了这项工作

.btn.k-button{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: 400; 
    border: 1px solid transparent;
}
.btn.k-button:hover{
    background-color:#2e6da4;
}

防止使用k-button类 - Telerik KendoUI

2 个答案: