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风格的窗口和事件就创建完成了,是不是很方便.