xiaohuli 2013-07-09
这几天看了一点DWZ,打算拿这个作为webUI的基础,于是下载了一份最新版本,打算先拿一个日期控件开刀。于是在dwz-ria目录下,建立了一个mydate.html,把DWZ自带的index.html中引用一大堆js、css和定义的初始化的js函数贴在里边,又从w_datepicker.html中贴了一个日期组件的代码,如下:
index中的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; 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>
w_datepicker.html中的代码:
<div class="pageContent"> <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);"> <div class="pageFormContent" layoutH="98"> <p> <label>默认格式:</label> <input type="text" name="date1" class="date" readonly="true"/> <a class="inputDateButton" href="javascript:;">选择</a> <span class="info">yyyy-MM-dd</span> </p> </div> </form> </div>
折腾了半天,最后显示了一个日期控件选择的图标,但是点的时候,没有任何反应!
查网上的资料,也居然没有发现任何有用的东西
后来实在没办法,把w_datepicker.html中的内容,贴在index.html的最后,</body>之前,居然能够出来。
然后我就一点一点删除index.html中的内容,直到剩下如下的内容:
<body scroll="no"> <div id="layout"> <div id="container"> <div id="navTab" class="tabsPage"> <div class="navTab-panel tabsPageContent layoutBox"> <div class="page unitBox"> <div class="pageFormContent" layoutH="80" style="margin-right:230px"> </div> </div> </div> </div> </div> </div>
后来反复看了半天,感情是js依赖于特定名字的div!没有验证,但是应该是这样的一种情况。
比较让人不解的是,居然没有任何文档和资料提到这个。难道所有人都比我聪明,一开始都认识到这个问题并解决了?疑惑!疑惑!
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT