index.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>简单实用国产jQuery UI框架 - DWZ富客户端框架(J-UI.com)</title>
  6. <link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
  7. <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
  8. <link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>
  9. <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>
  10. <!--[if IE]>
  11. <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
  12. <![endif]-->
  13. <!--[if lt IE 9]><script src="js/speedup.js" type="text/javascript"></script><script src="js/jquery-1.11.3.min.js" type="text/javascript"></script><![endif]-->
  14. <!--[if gte IE 9]><!--><script src="js/jquery-2.1.4.min.js" type="text/javascript"></script><!--<![endif]-->
  15. <script src="js/jquery.cookie.js" type="text/javascript"></script>
  16. <script src="js/jquery.validate.js" type="text/javascript"></script>
  17. <script src="js/jquery.bgiframe.js" type="text/javascript"></script>
  18. <script src="xheditor/xheditor-1.2.2.min.js" type="text/javascript"></script>
  19. <script src="xheditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
  20. <script src="uploadify/scripts/jquery.uploadify.js" type="text/javascript"></script>
  21. <!-- svg图表 supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ -->
  22. <script type="text/javascript" src="chart/raphael.js"></script>
  23. <script type="text/javascript" src="chart/g.raphael.js"></script>
  24. <script type="text/javascript" src="chart/g.bar.js"></script>
  25. <script type="text/javascript" src="chart/g.line.js"></script>
  26. <script type="text/javascript" src="chart/g.pie.js"></script>
  27. <script type="text/javascript" src="chart/g.dot.js"></script>
  28. <script src="js/dwz.core.js" type="text/javascript"></script>
  29. <script src="js/dwz.util.date.js" type="text/javascript"></script>
  30. <script src="js/dwz.validate.method.js" type="text/javascript"></script>
  31. <script src="js/dwz.barDrag.js" type="text/javascript"></script>
  32. <script src="js/dwz.drag.js" type="text/javascript"></script>
  33. <script src="js/dwz.tree.js" type="text/javascript"></script>
  34. <script src="js/dwz.accordion.js" type="text/javascript"></script>
  35. <script src="js/dwz.ui.js" type="text/javascript"></script>
  36. <script src="js/dwz.theme.js" type="text/javascript"></script>
  37. <script src="js/dwz.switchEnv.js" type="text/javascript"></script>
  38. <script src="js/dwz.alertMsg.js" type="text/javascript"></script>
  39. <script src="js/dwz.contextmenu.js" type="text/javascript"></script>
  40. <script src="js/dwz.navTab.js" type="text/javascript"></script>
  41. <script src="js/dwz.tab.js" type="text/javascript"></script>
  42. <script src="js/dwz.resize.js" type="text/javascript"></script>
  43. <script src="js/dwz.dialog.js" type="text/javascript"></script>
  44. <script src="js/dwz.dialogDrag.js" type="text/javascript"></script>
  45. <script src="js/dwz.sortDrag.js" type="text/javascript"></script>
  46. <script src="js/dwz.cssTable.js" type="text/javascript"></script>
  47. <script src="js/dwz.stable.js" type="text/javascript"></script>
  48. <script src="js/dwz.taskBar.js" type="text/javascript"></script>
  49. <script src="js/dwz.ajax.js" type="text/javascript"></script>
  50. <script src="js/dwz.pagination.js" type="text/javascript"></script>
  51. <script src="js/dwz.database.js" type="text/javascript"></script>
  52. <script src="js/dwz.datepicker.js" type="text/javascript"></script>
  53. <script src="js/dwz.effects.js" type="text/javascript"></script>
  54. <script src="js/dwz.panel.js" type="text/javascript"></script>
  55. <script src="js/dwz.checkbox.js" type="text/javascript"></script>
  56. <script src="js/dwz.history.js" type="text/javascript"></script>
  57. <script src="js/dwz.combox.js" type="text/javascript"></script>
  58. <script src="js/dwz.print.js" type="text/javascript"></script>
  59. <!-- 可以用dwz.min.js替换前面全部dwz.*.js (注意:替换时下面dwz.regional.zh.js还需要引入)
  60. <script src="bin/dwz.min.js" type="text/javascript"></script>
  61. -->
  62. <script src="js/dwz.regional.zh.js" type="text/javascript"></script>
  63. <script type="text/javascript">
  64. $(function(){
  65. DWZ.init("dwz.frag.xml", {
  66. loginUrl:"login_dialog.html", loginTitle:"登录", // 弹出登录对话框
  67. // loginUrl:"login.html", // 跳到登录页面
  68. statusCode:{ok:200, error:300, timeout:301}, //【可选】
  69. pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可选】
  70. keys: {statusCode:"statusCode", message:"message"}, //【可选】
  71. ui:{hideMode:'offsets'}, //【可选】hideMode:navTab组件切换的隐藏方式,支持的值有’display’,’offsets’负数偏移位置的值,默认值为’display’
  72. debug:false, // 调试模式 【true|false】
  73. callback:function(){
  74. initEnv();
  75. $("#themeList").theme({themeBase:"themes"}); // themeBase 相对于index页面的主题base路径
  76. }
  77. });
  78. });
  79. </script>
  80. </head>
  81. <body>
  82. <div id="layout">
  83. <div id="header">
  84. <div class="headerNav">
  85. <a class="logo" href="http://j-ui.com">标志</a>
  86. <ul class="nav">
  87. <li id="switchEnvBox"><a href="javascript:">(<span>北京</span>)切换城市</a>
  88. <ul>
  89. <li><a href="sidebar_1.html">北京</a></li>
  90. <li><a href="sidebar_2.html">上海</a></li>
  91. <li><a href="sidebar_2.html">南京</a></li>
  92. <li><a href="sidebar_2.html">深圳</a></li>
  93. <li><a href="sidebar_2.html">广州</a></li>
  94. <li><a href="sidebar_2.html">天津</a></li>
  95. <li><a href="sidebar_2.html">杭州</a></li>
  96. </ul>
  97. </li>
  98. <li><a href="https://me.alipay.com/dwzteam" target="_blank">捐赠</a></li>
  99. <li><a href="changepwd.html" target="dialog" width="600">设置</a></li>
  100. <li><a href="http://www.cnblogs.com/dwzjs" target="_blank">博客</a></li>
  101. <li><a href="http://weibo.com/dwzui" target="_blank">微博</a></li>
  102. <li><a href="login.html">退出</a></li>
  103. </ul>
  104. <ul class="themeList" id="themeList">
  105. <li theme="default"><div class="selected">蓝色</div></li>
  106. <li theme="green"><div>绿色</div></li>
  107. <!--<li theme="red"><div>红色</div></li>-->
  108. <li theme="purple"><div>紫色</div></li>
  109. <li theme="silver"><div>银色</div></li>
  110. <li theme="azure"><div>天蓝</div></li>
  111. </ul>
  112. </div>
  113. <!-- navMenu -->
  114. </div>
  115. <div id="leftside">
  116. <div id="sidebar_s">
  117. <div class="collapse">
  118. <div class="toggleCollapse"><div></div></div>
  119. </div>
  120. </div>
  121. <div id="sidebar">
  122. <div class="toggleCollapse"><h2>主菜单</h2><div>收缩</div></div>
  123. <div class="accordion" fillSpace="sidebar">
  124. <div class="accordionHeader">
  125. <h2><span>Folder</span>界面组件</h2>
  126. </div>
  127. <div class="accordionContent">
  128. <ul class="tree treeFolder">
  129. <li><a href="tabsPage.html" target="navTab">主框架面板</a>
  130. <ul>
  131. <li><a href="main.html" target="navTab" rel="main">我的主页</a></li>
  132. <li><a href="http://www.baidu.com" target="navTab" rel="page1">页面一(外部页面)</a></li>
  133. <li><a href="demo_page2.html" target="navTab" rel="external" external="true">iframe navTab页面</a></li>
  134. <li><a href="demo_page1.html" target="navTab" rel="page1" fresh="false">替换页面一</a></li>
  135. <li><a href="demo_page2.html" target="navTab" rel="page2">页面二</a></li>
  136. <li><a href="demo_page4.html" target="navTab" rel="page3" title="页面三(自定义标签名)">页面三</a></li>
  137. <li><a href="demo_page4.html" target="navTab" rel="page4" fresh="false">测试页面(fresh="false")</a></li>
  138. <li><a href="w_editor.html" target="navTab">表单提交会话超时</a></li>
  139. <li><a href="demo/common/ajaxTimeout.html" target="navTab">navTab会话超时</a></li>
  140. <li><a href="demo/common/ajaxTimeout.html" target="dialog">dialog会话超时</a></li>
  141. <li><a href="index_menu.html" target="_blank">横向导航条</a></li>
  142. </ul>
  143. </li>
  144. <li><a>常用组件</a>
  145. <ul>
  146. <li><a href="w_panel.html" target="navTab" rel="w_panel">面板</a></li>
  147. <li><a href="w_tabs.html" target="navTab" rel="w_tabs">选项卡面板</a></li>
  148. <li><a href="w_dialog.html" target="navTab" rel="w_dialog">弹出窗口</a></li>
  149. <li><a href="w_alert.html" target="navTab" rel="w_alert">提示窗口</a></li>
  150. <li><a href="w_list.html" target="navTab" rel="w_list">CSS表格容器</a></li>
  151. <li><a href="demo_page1.html" target="navTab" rel="w_table">表格容器</a></li>
  152. <li><a href="w_removeSelected.html" target="navTab" rel="w_table">表格数据库排序+批量删除</a></li>
  153. <li><a href="w_tree.html" target="navTab" rel="w_tree">树形菜单</a></li>
  154. <li><a href="w_accordion.html" target="navTab" rel="w_accordion">滑动菜单</a></li>
  155. <li><a href="w_editor.html" target="navTab" rel="w_editor">编辑器</a></li>
  156. <li><a href="w_datepicker.html" target="navTab" rel="w_datepicker">日期控件</a></li>
  157. <li><a href="demo/database/db_widget.html" target="navTab" rel="db">suggest+lookup+主从结构</a></li>
  158. <li><a href="demo/database/treeBringBack.html" target="navTab" rel="db">tree查找带回</a></li>
  159. <li><a href="demo/sortDrag/1.html" target="navTab" rel="sortDrag">单个sortDrag示例</a></li>
  160. <li><a href="demo/sortDrag/2.html" target="navTab" rel="sortDrag">多个sortDrag示例</a></li>
  161. <li><a href="demo/sortDrag/form.html" target="navTab" rel="sortDrag">可拖动表单示例</a></li>
  162. </ul>
  163. </li>
  164. <li><a>表单组件</a>
  165. <ul>
  166. <li><a href="w_validation.html" target="navTab" rel="w_validation">表单验证</a></li>
  167. <li><a href="w_button.html" target="navTab" rel="w_button">按钮</a></li>
  168. <li><a href="w_textInput.html" target="navTab" rel="w_textInput">文本框/文本域</a></li>
  169. <li><a href="w_combox.html" target="navTab" rel="w_combox">下拉菜单</a></li>
  170. <li><a href="w_checkbox.html" target="navTab" rel="w_checkbox">多选框/单选框</a></li>
  171. <li><a href="demo_upload.html" target="navTab" rel="demo_upload">iframeCallback表单提交</a></li>
  172. <li><a href="w_uploadify.html" target="navTab" rel="w_uploadify">uploadify多文件上传</a></li>
  173. </ul>
  174. </li>
  175. <li><a>组合应用</a>
  176. <ul>
  177. <li><a href="demo/pagination/layout1.html" target="navTab" rel="pagination1">局部刷新分页1</a></li>
  178. <li><a href="demo/pagination/layout2.html" target="navTab" rel="pagination2">局部刷新分页2</a></li>
  179. </ul>
  180. </li>
  181. <li><a>图表</a>
  182. <ul>
  183. <li><a href="chart/test/barchart.html" target="navTab" rel="chart">柱状图(垂直)</a></li>
  184. <li><a href="chart/test/hbarchart.html" target="navTab" rel="chart">柱状图(水平)</a></li>
  185. <li><a href="chart/test/linechart.html" target="navTab" rel="chart">折线图</a></li>
  186. <li><a href="chart/test/linechart2.html" target="navTab" rel="chart">曲线图</a></li>
  187. <li><a href="chart/test/linechart3.html" target="navTab" rel="chart">曲线图(自定义X坐标)</a></li>
  188. <li><a href="chart/test/piechart.html" target="navTab" rel="chart">饼图</a></li>
  189. </ul>
  190. </li>
  191. <li><a href="dwz.frag.xml" target="navTab" external="true">dwz.frag.xml</a></li>
  192. </ul>
  193. </div>
  194. <div class="accordionHeader">
  195. <h2><span>Folder</span>典型页面</h2>
  196. </div>
  197. <div class="accordionContent">
  198. <ul class="tree treeFolder treeCheck">
  199. <li><a href="demo_page1.html" target="navTab" rel="demo_page1">查询我的客户</a></li>
  200. <li><a href="demo_page1.html" target="navTab" rel="demo_page2">表单查询页面</a></li>
  201. <li><a href="demo_page4.html" target="navTab" rel="demo_page4">表单录入页面</a></li>
  202. <li><a href="demo_page5.html" target="navTab" rel="demo_page5">有文本输入的表单</a></li>
  203. <li><a href="javascript:;">有提示的表单输入页面</a>
  204. <ul>
  205. <li><a href="javascript:;">页面一</a></li>
  206. <li><a href="javascript:;">页面二</a></li>
  207. </ul>
  208. </li>
  209. <li><a href="javascript:;">选项卡和图形的页面</a>
  210. <ul>
  211. <li><a href="javascript:;">页面一</a></li>
  212. <li><a href="javascript:;">页面二</a></li>
  213. </ul>
  214. </li>
  215. <li><a href="javascript:;">选项卡和图形切换的页面</a></li>
  216. <li><a href="javascript:;">左右两个互动的页面</a></li>
  217. <li><a href="javascript:;">列表输入的页面</a></li>
  218. <li><a href="javascript:;">双层栏目列表的页面</a></li>
  219. </ul>
  220. </div>
  221. <div class="accordionHeader">
  222. <h2><span>Folder</span>流程演示</h2>
  223. </div>
  224. <div class="accordionContent">
  225. <ul class="tree">
  226. <li><a href="newPage1.html" target="dialog" rel="dlg_page">列表</a></li>
  227. <li><a href="newPage1.html" target="dialog" rel="dlg_page2">列表</a></li>
  228. </ul>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <div id="container">
  234. <div id="navTab" class="tabsPage">
  235. <div class="tabsPageHeader">
  236. <div class="tabsPageHeaderContent"><!-- 显示左右控制时添加 class="tabsPageHeaderMargin" -->
  237. <ul class="navTab-tab">
  238. <li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">我的主页</span></span></a></li>
  239. </ul>
  240. </div>
  241. <div class="tabsLeft">left</div><!-- 禁用只需要添加一个样式 class="tabsLeft tabsLeftDisabled" -->
  242. <div class="tabsRight">right</div><!-- 禁用只需要添加一个样式 class="tabsRight tabsRightDisabled" -->
  243. <div class="tabsMore">more</div>
  244. </div>
  245. <ul class="tabsMoreList">
  246. <li><a href="javascript:;">我的主页</a></li>
  247. </ul>
  248. <div class="navTab-panel tabsPageContent layoutBox">
  249. <div class="page unitBox">
  250. <div class="accountInfo">
  251. <div class="alertInfo">
  252. <p><a href="https://code.csdn.net/dwzteam/dwz_jui/tree/master/doc" target="_blank" style="line-height:19px"><span>DWZ框架使用手册</span></a></p>
  253. <p><a href="http://pan.baidu.com/s/18Bb8Z" target="_blank" style="line-height:19px">DWZ框架开发视频教材</a></p>
  254. </div>
  255. <div class="right">
  256. <p style="color:red">DWZ官方微博 <a href="http://weibo.com/dwzui" target="_blank">http://weibo.com/dwzui</a></p>
  257. </div>
  258. <p><span>DWZ富客户端框架</span></p>
  259. <p>DWZ官方微博:<a href="http://weibo.com/dwzui" target="_blank">http://weibo.com/dwzui</a></p>
  260. </div>
  261. <div class="pageFormContent" layoutH="80" style="margin-right:230px">
  262. <h2>DWZ系列开源项目:</h2>
  263. <div class="unit"><a href="https://git.oschina.net/dwzteam/dwz_jui" target="_blank">dwz富客户端框架 - jUI</a></div>
  264. <div class="unit"><a href="https://git.oschina.net/dwzteam/dwz_group" target="_blank">DWZ框架 + ThinkPHP 实现小组工作日志系统</a></div>
  265. <div class="unit"><a href="https://code.csdn.net/dwzteam/dwz_ssh2" target="_blank">dwz4j企业级Java Web快速开发框架(Hibernate+Spring+Struts2) + jUI整合应用</a></div>
  266. <div class="unit"><a href="https://code.csdn.net/dwzteam/dwz_springmvc" target="_blank">dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用</a></div>
  267. <div class="unit"><a href="https://code.csdn.net/dwzteam/dwz_thinkphp" target="_blank">ThinkPHP + jUI整合应用</a></div>
  268. <div class="unit"><a href="https://code.csdn.net/dwzteam/dwz_zendframework" target="_blank">Zend Framework + jUI整合应用</a></div>
  269. <div class="unit"><a href="http://www.yiiframework.com/extension/dwzinterface/" target="_blank">YII + jUI整合应用</a></div>
  270. <a class="buttonActive" href="https://git.oschina.net/dwzteam/" target="_blank"><span>DWZ开源系列源码(oschina)</span></a>
  271. <a class="button" href="https://github.com/dwzteam/" target="_blank"><span>DWZ开源系列源码(github)</span></a>
  272. <a class="button" href="https://code.csdn.net/dwzteam/" target="_blank"><span>DWZ开源系列源码(CSDN CODE)</span></a>
  273. <div class="divider"></div>
  274. <h2>常见问题及解决:</h2>
  275. <pre style="margin:5px;line-height:1.4em">
  276. Error loading XML document: dwz.frag.xml
  277. 直接用IE打开index.html弹出一个对话框:Error loading XML document: dwz.frag.xml
  278. 原因:没有加载成功dwz.frag.xml。IE ajax laod本地文件有限制, 是ie安全级别的问题, 不是框架的问题。
  279. 解决方法:部署到apache 等 Web容器下。
  280. 如何精简JS:
  281. 1) dwz.min.js替换全部dwz.*.js (注意:替换时下面dwz.regional.zh.js还需要引入
  282. 2) demo index页面head中引入的几个第三方JS库也可以根据项目情况删除:
  283. js/jquery.cookie.js 用于cookie中纪录jUI主题theme,下次打开浏览器时纪录用户选择的主题风格
  284. js/jquery.validate.js 用于form表单验证
  285. js/jquery.bgiframe.js 用于解决IE6 dialog盖不住navTab页面中的select问题
  286. xheditor/xheditor-1.2.2.min.js 在线编辑器
  287. xheditor/xheditor_lang/zh-cn.js 在线编辑器国际化
  288. uploadify/scripts/jquery.uploadify.min.js 多文件上传
  289. </pre>
  290. <div class="divider"></div>
  291. <h2>有偿服务(<span style="color:red;">公司培训,技术支持,解决使用jUI过程中出现的全部疑难问题</span>):</h2><br/>
  292. <pre style="margin:5px;line-height:1.4em;">
  293. 合作电话:010-52897073 18600055221
  294. 技术支持:0571-88517625 17767167745
  295. 邮箱:support@jui.org
  296. </pre>
  297. <a class="button" href="http://code.csdn.net/groups/2155" target="_blank"><span>DWZ讨论组</span></a>
  298. </div>
  299. <div style="width:230px;position: absolute;top:60px;right:0" layoutH="80">
  300. <iframe width="100%" height="430" class="share_self" frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?width=0&height=430&fansRow=2&ptype=1&skin=1&isTitle=0&noborder=1&isWeibo=1&isFans=0&uid=1739071261&verifier=c683dfe7"></iframe>
  301. </div>
  302. </div>
  303. </div>
  304. </div>
  305. </div>
  306. </div>
  307. <div id="footer">Copyright &copy; 2010 <a href="demo_page2.html" target="dialog">DWZ团队</a> 京ICP备15053290号-2</div>
  308. </body>
  309. </html>