kendoUI中window控件的使用

最新推荐文章于 2023-07-13 17:31:11 发布

hljlthm

最新推荐文章于 2023-07-13 17:31:11 发布

阅读量5.6k

点赞数

本文链接：https://blog.csdn.net/hljlthm/article/details/45459395

版权

今天主要的工作是完成了部门模版维护功能的页面，其中页面中主要使用了kendo的treeview控件、grid控件、和window控件。由于treeview 和grid和之前模块的页面相似，所以今天花费了一定时间了解了window控件。下面列出window的基础demo。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
            <div id="window">
                <div class="armchair"><img src="../content/web/window/armchair-402.png" alt="Artek Alvar Aalto - Armchair 402" /> Artek Alvar Aalto - Armchair 402</div>
                <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

                <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

                <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>

                <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
            </div>

            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

                    var onClose = function() {
                        undo.show();
                    }

                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "600px",
                            title: "About Alvar Aalto",
                            actions: [
                                "Pin",
                                "Minimize",
                                "Maximize",
                                "Close"
                            ],
                            close: onClose
                        });
                    }
                });
            </script>

            <style>

                #example
                {
                    min-height:500px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                    float: left;
                    margin: 30px 30px 120px 30px;
                    text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }
            </style>
        </div>


</body>
</html>

hljlthm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kendoUI中window控件的使用

今天主要的工作是完成了部门模版维护功能的页面，其中页面中主要使用了kendo的treeview控件、grid控件、和window控件。由于treeview 和grid和之前模块的页面相似，所以今天花费了一定时间了解了window控件。下面列出window的基础demo。<!DOCTYPE html><html><head> <title></title> <link rel="s
复制链接

扫一扫