請教各位,如何用dojo去建立數個tab,但共用同一個submit button的表格呢?
我,页面小白的做法是
数个tab的样式是一样的(这样看上去submit button只有一个),数个submit button调用一个私有的方法来处理。。。
其实在一个div里面做tab,在另外的div里面做button就好了
然后tab里面的内容用变量缓存,最后传输到button就ok
我花了2个小是给你拼凑出来一个dojo,因为我是页面白,我相信你一定能搞定其它部分
[code="javascript"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<br> @import "<a href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css">http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css</a>";<br> @import "<a href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css">http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css</a>";<br>
Sample
djConfig="isDebug: true, parseOnLoad: true"<br> src="https://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js">
<br> dojo.require("dojo.parser");<br> dojo.require("dijit.layout.ContentPane");<br> dojo.require("dijit.layout.TabContainer");<br> dojo.require("dijit.form.Button");<br> dojo.require("dijit.InlineEditBox");<br> dojo.require("dijit.form.TextBox");</p> <pre><code> var tabs = dojo.byId("mainTabContainer"); var content; dojo.subscribe("mainTabContainer-selectChild", function(child) { if(child != undefined && child != null) conent = child.get("content"); }); Commands = { sayHello: function() { var status = "Button Clicked at time: " + (new Date()); dojo.byId("output").innerHTML = status + " -- " + content; console.debug(status); } } dojo.addOnLoad(function() { dojo.connect(dojo.byId("testButton"), "onclick", Commands, "sayHello"); new dijit.InlineEditBox({onChange:myHandler, autoSave:false}, dojo.byId("id")); }); </script> <script type="text/javascript"> function foo() { console.debug("click foo"); } function myHandler(idOfBox, value) { console.debug("Edited value from " + idOfBox + " is now " + value); } </script> </code></pre> <p></head><br> <body class="tundra"></p> <h1>Sample Dojo 1.0.0 xdomain page</h1> <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px"> <div id="tab1" dojoType="dijit.layout.ContentPane" title="First Tab" selected="true" closable="false"> 第一个 Tab </div> <div id="tab2" dojoType="dijit.layout.ContentPane" title="Second Tab" selected="false" closable="true"> 第二个 Tab </div> <div id="tab3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true"> 第三个 Tab </div> </div> <p> <button id="testButton">Click Me</button> </p> <p id="output"> </p> <h3 id="editable" autosave="false" dojoType="dijit.InlineEditBox" title="h3 example" onChange="myHandler(this.id,arguments[0])"> Edit me - I trigger the onChange callback </h3> <p><span id="id">programatic InlineEditBox</span></p> <p></body><br> </html></p> <p>[/code]</p>