dhtmlxwindows的使用

最新推荐文章于 2018-04-08 13:21:31 发布

qianzhiyong111

最新推荐文章于 2018-04-08 13:21:31 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

文章标签： stylesheet button function css web

本文链接：https://blog.youkuaiyun.com/qianzhiyong111/article/details/6894023

dhtmlxWindows是dhtmlxWindows系列组件中用来实现web条件下的窗口界面的一个类,通过这个类可以实现类似于桌面系统的MDI窗口的效果.使用这个类需要引用两个js文件和css样式表:

<head>
    <title>Buttons Events</title>
    
    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_blue.css">
    
    <script  src="../../codebase/dhtmlxcommon.js"></script>
    <script  src="../../codebase/dhtmlxwindows.js"></script>
</head>

引用库文件和格式表之后,就可以在空白页面上创建一个窗口窗口对象:

    <script>
        
        var dhxWins = new dhtmlXWindows();
        //创建一个窗口容器对象
        dhxWins.enableAutoViewport(false);
        //禁止窗口自动适应大小
        dhxWins.setViewport(350, 50, 400, 400);
        //设置窗口视图大小
        dhxWins.vp.style.border = "#909090 1px solid";
        //定义窗口窗口对象的边框
        dhxWins.setImagePath("../../codebase/imgs/");
        //设置窗口容器对象所需图片路径
        
        //以下为创建具体窗口的代码
        var w1 = dhxWins.createWindow("w1", 10, 10, 320, 240);
        //创建一个左边距10,顶边10,宽度320,高度240的子窗口
        w1.setText("dhtmlxWindow");
        //设置窗口标题
        w1.button("close").disable();
        //设置w1窗口的关闭按钮禁止
        w1.button("help").show();
        //添加w1窗口帮助按钮
        
        
        //挂接一个事件,当点击帮助按钮时执行以下代码
        dhxWins.window("w1").attachEvent("onHelp", function(){
            alert("button /"Help/" was clicked");
        });
        
        //挂接一个事件,当点击最小化按钮时执行以下代码
        w1.button("park").attachEvent("onClick", function(){
            alert("button /"Park/" was clicked");
        });
        
        
    </script>

这样,具有完整window风格的窗口和事件就创建完成了,是不是很方便.