公司里面的项目一直把dojo作为js开发工具,不可否认的是dojo类库很强大,但是使用起来很不是滋味.
如何的通过innerHTML函数来动态生成dojo
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Job Application Form</title>
<script type="text/javascript">
var djConfig = {
isDebug: true
};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.event.*");
dojo.require("dojo.xml.Parse");
dojo.require("dojo.widget.Parse");
var parser = new dojo.xml.Parse();
dojo.addOnLoad( function() {
var showCalcMethodbtn=dojo.widget.byId("showCalcMethodbtn");
dojo.event.connect(showCalcMethodbtn, "onClick", showCalcMethodbtnPressed);
});
function showCalcMethodbtnPressed(){
alert("Okay");
//var test=dojo.widget.byId("test");
//var createHtml="<input type=\"checkbox\" name=\"cb1\" id=\"cb1\" dojoType=\"Checkbox\" /> <label for=\"cb1\">IT</label><br />";
//test.innerHTML=createHtml;
// dojo.byId('listviewpane').innerHTML=s;
// var frag = parser.parseElement(dojo.byId("listviewpane"), null, true);
//dojo.widget.getParser().createComponents(frag);
var str="<table border=\"1\" width=\"98%\" id=\"table10\" bgcolor=\"#CCFFFF\">"+
"<tr bgcolor=\"#66FFCC\"> <td width=\"139\"><p align=\"center\"><b>Calc Method</b></td>"+
"<td width=\"45\"><p align=\"center\"></td>"+
"<td><p align=\"center\"><b>Calc Field</b></td></tr>";
for(var i=0;i<10;i++){
str+="<tr id=\"showCalcFieldRow_"+i+"\"><td width=\"139\" id=\"showCalcMethodTD_"+
i+"\" tittle="+i+">"+i+"</td>"+
"<td width=\"45\"><button dojoType=\"Button\" widgetId=\"showCalcMethodbtn\" onClick=\"alert('dd')\">Create2</button></td>"+
"<td id=\"showCalcFieldTD_"+i+"\" ><option id=\"All\" value=\"All\">All</option></td></tr>";
}
str+="</table>";
var test=document.getElementById("test");
//test.innerHTML="<input type=\"checkbox\" name=\"cb1\" id=\"cb1\" dojoType=\"Checkbox\" /> <label for=\"cb1\">IT</label><br/>"+
// "<button dojoType=\"Button\" widgetId=\"showCalcMethodbtn\">Create2</button>";
test.innerHTML=str;
var frag = parser.parseElement(test, null, true);
dojo.widget.getParser().createComponents(frag);
}
</script>
<style type="text/css">
body {
padding: 1em;
}
div .dojoButton {
float: left;
margin-left: 10px;
}
</style>
</head>
<body >
<h2 class="pageSubContentTitle">Job Application Form</h2>
<p>This is just a little demo of dojo's form widgets</p>
<form method="get" id="form1" action="">
<div class="formAnswer" id="D1">
<input type="checkbox" name="cb1" id="cb1" value="1" dojoType="Checkbox" /> IT<br />
<input type="checkbox" name="cb2" id="cb2" value="1" dojoType="Checkbox" />Marketing<br />
<input type="checkbox" name="cb3" id="cb3" value="1" dojoType="Checkbox" /> <label for="cb3">Business</label><br />
<button dojoType="Button" widgetId="showCalcMethodbtn" >Create</button>
</div>
<div id="test">
</div>
</form>
</body>
</html>