官方文档关于使用组件已十分详细，但环境配置说的很模糊，综合google回来的多位热心网友的意见终于使用组件成功啦：
1、 在使用此框架前把需要的文件准备好(js文件（必须），dwz.frag.xml（必须）和theme（样式，不是必须的~）文件夹里的文件)，然后导入到项目中中，如图：
在项目的一个页面导入项目中需要的所有js文件和[样式文件]，如图：
dwz.frag.xml很重要，是DWZ的核心文件，所有的js文件都是经过他初始化的：
以上是使用此框架的前期准备
在页面中使用如下结构：
<body scroll="no">
<div id="layout">
<div id="navTab" class="tabsPage">
<!-- 页面内容 -->
</div>
</div>
</body>
如官方文档中提到使用“tab组件”的方法，只需文档中提到的代码嵌入到<!-- 页面内容 -->中即可。
详细代码：
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)使用组件</title> <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/> <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/> <link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/> <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/> <!--[if IE]> <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/> <![endif]--> <!--[if lte IE 9]> <script src="js/speedup.js" type="text/javascript"></script> <![endif]--> <script src="js/jquery-1.7.2.js" type="text/javascript"></script> <script src="js/jquery.cookie.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script src="js/jquery.bgiframe.js" type="text/javascript"></script> <script src="xheditor/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script> <script src="uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script> <!-- svg图表 supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ --> <script type="text/javascript" src="chart/raphael.js"></script> <script type="text/javascript" src="chart/g.raphael.js"></script> <script type="text/javascript" src="chart/g.bar.js"></script> <script type="text/javascript" src="chart/g.line.js"></script> <script type="text/javascript" src="chart/g.pie.js"></script> <script type="text/javascript" src="chart/g.dot.js"></script> <script src="js/dwz.core.js" type="text/javascript"></script> <script src="js/dwz.util.date.js" type="text/javascript"></script> <script src="js/dwz.validate.method.js" type="text/javascript"></script> <script src="js/dwz.regional.zh.js" type="text/javascript"></script> <script src="js/dwz.barDrag.js" type="text/javascript"></script> <script src="js/dwz.drag.js" type="text/javascript"></script> <script src="js/dwz.tree.js" type="text/javascript"></script> <script src="js/dwz.accordion.js" type="text/javascript"></script> <script src="js/dwz.ui.js" type="text/javascript"></script> <script src="js/dwz.theme.js" type="text/javascript"></script> <script src="js/dwz.switchEnv.js" type="text/javascript"></script> <script src="js/dwz.alertMsg.js" type="text/javascript"></script> <script src="js/dwz.contextmenu.js" type="text/javascript"></script> <script src="js/dwz.navTab.js" type="text/javascript"></script> <script src="js/dwz.tab.js" type="text/javascript"></script> <script src="js/dwz.resize.js" type="text/javascript"></script> <script src="js/dwz.dialog.js" type="text/javascript"></script> <script src="js/dwz.dialogDrag.js" type="text/javascript"></script> <script src="js/dwz.sortDrag.js" type="text/javascript"></script> <script src="js/dwz.cssTable.js" type="text/javascript"></script> <script src="js/dwz.stable.js" type="text/javascript"></script> <script src="js/dwz.taskBar.js" type="text/javascript"></script> <script src="js/dwz.ajax.js" type="text/javascript"></script> <script src="js/dwz.pagination.js" type="text/javascript"></script> <script src="js/dwz.database.js" type="text/javascript"></script> <script src="js/dwz.datepicker.js" type="text/javascript"></script> <script src="js/dwz.effects.js" type="text/javascript"></script> <script src="js/dwz.panel.js" type="text/javascript"></script> <script src="js/dwz.checkbox.js" type="text/javascript"></script> <script src="js/dwz.history.js" type="text/javascript"></script> <script src="js/dwz.combox.js" type="text/javascript"></script> <script src="js/dwz.print.js" type="text/javascript"></script> <!-- <script src="bin/dwz.min.js" type="text/javascript"></script> --> <script src="js/dwz.regional.zh.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { DWZ.init("dwz.frag.xml", { loginUrl : "login_dialog.html", loginTitle : "登录", // 弹出登录对话框 // loginUrl:"login.html", // 跳到登录页面 statusCode : { ok : 200, error : 300, timeout : 301 }, //【可选】 pageInfo : { pageNum : "pageNum", numPerPage : "numPerPage", orderField : "orderField", orderDirection : "orderDirection" }, //【可选】 debug : true, // 调试模式 【true|false】 callback : function() { initEnv(); $("#themeList").theme({ themeBase : "themes" }); // themeBase 相对于index页面的主题base路径 } }); }); </script> </head> <body scroll="no"> <div id="layout"> <div id="navTab" class="tabsPage"> <div class="tabs"> <div class="tabsHeader"> <div class="tabsHeaderContent"> <ul> <li class="selected"> <a href="#"><span>标题1</span></a> </li> <li> <a href="#"><span>标题2</span></a> </li> </ul> </div> </div> <div class="tabsContent" style="height:150px;"> <div> 内容1 </div> <div> 内容2 </div> </div> <div class="tabsFooter"> <div class="tabsFooterContent"></div> </div> </div> </div> </div> </body> </html>
