《kendoWindow》使用kendoWindow實作自定義的confirm驗證

2018/8/22更新：

内容明日更

————————————————————————分割線————————————————————————————

項目中需要用到類似于window.confirm的方法，原生的樣式實在是太醜。。。而項目中前端的UI架構隻有kendoUI和bootstarp，因為之前的控件都使用了kendoUI的樣式，是以出于風格一緻性的考慮，覺得使用kendoUI的樣式，第一時間想到的是dialog控件，查閱官方文檔确實也有，但不知道為何在項目中無法使用，或許是版本太低，或許是架構組禁用了這個控件。于是想到了之前用到過的kendoWindow剛好有些類似，就嘗試着做一下。

首先是彈出的window中的内容：

<div id="delete-confirm" style="display: none">
    <div class="modal-content k-dialog-confirm k-window-content k-content"
         data-role="dialog" tabindex="0">
        <div class="modal-body" style="">
            <table>
                <tbody>
                <tr>
                    <td width="54">
                        <span class="fa fa-question-circle"></span>
                    </td>
                    <td>确定删除？</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button id="onOK" class="btn btn-primary">确定</button>
        <button id="onCancel" class="btn btn-default">取消</button>
    </div>
</div>
           

綁定kendoWindow：

$("#delete-confirm").kendoWindow({
        draggable: false,
        modal: true,
        resizable: false,
        title: '确認删除',
        width: 400,
    });
           

窗體中的按鈕綁定click事件：

$("#onOK").click(function () {
                        dataSource.remove(data[0]);
                        dataSource.sync();
                        window.close();
                    });
                    $("#onCancel").click(function () {
                        window.close();
                    });
           

大功告成~

今後可以用這種方式，自定義confirm，再也不用忍受原生樣式的醜陋啦。