本文介绍了如何在dojo对话框中找到按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在javascript和dojo。基于我的关于非底线的对话框,我创建了一个对话框。现在我想添加按钮到对话框。该按钮是dojo按钮,它们都在。我如何在对话框中找到这些? require([dijit / Dialog,dijit / DialogUnderlay,dojo / domReady!],function(Dialog,DialogUnderlay){
//只是为了获取正确的样式
document.body.className =tundra;
myDialog2 = new Dialog({
title:我的对话框,
内容:测试内容,
style:width: 300px
});
showDialog2 = function(){
myDialog2.show()然后(function(){
DialogUnderlay.hide $ b //小黑客在关闭对话框时避免JS错误
DialogUnderlay._singleton.bgIframe = {destroy:function(){}}
});
}
});
; button onclick =showDialog2();> show without underlay< / button>
< div id =navtool>
< div data-dojo-type =dijit / form / Buttonid =zoomin>放大< / div>
< div data-dojo-type =dijit / form / Buttonid =zoomout>缩小< / div>
< div data-dojo-type =dijit / form / Buttonid =zoomfullext> Full Extent< / div>
< div data-dojo-type =dijit / form / Buttonid =zoomprev> Prev Extent< / div>
< div data-dojo-type =dijit / form / Buttonid =zoomnext> Next Extent< / div>
< div data-dojo-type =dijit / form / Buttonid =pan> Pan< / div>
< div data-dojo-type =dijit / form / Buttonid =deactivate>停用< / div>
< / div>
解决方案
如果你给了一个 domNode
到对话框
的内容
属性,dojo将放置节点并启动小部件对于你。
require([dijit / Dialog,dijit / DialogUnderlay,dojo / dom,dojo / domReady! ],function(Dialog,DialogUnderlay,dom){//只是为了获取正确的样式文档的代码片段.body.className =tundra; myDialog2 = new Dialog({title:My Dialog,content:dom。 by(Navigator),style:width:300px}); showDialog2 = function(){myDialog2.show()。then(function(){DialogUnderlay.hide()// little hack以避免JS错误关闭DialogUnderlay._singleton.bgIframe = {destroy:function(){}}});}});
< script src =// ajax.googleapis.com/ajax /libs/dojo/1.10.4/dojo/dojo.js\"></script><link rel =stylesheettype =text / csshref =// ajax.googleapis.com/ajax/库/道场/ 1.10.4 /道场/资源/ dojo.css> < link rel =stylesheettype =text / csshref =// ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css\"> < div id =navtool> < div data-dojo-type =dijit / form / Buttonid =zoomin>放大< / div> < div data-dojo-type =dijit / form / Buttonid =zoomout>缩小< / div> < div data-dojo-type =dijit / form / Buttonid =zoomfullext> Full Extent< / div> < div data-dojo-type =dijit / form / Buttonid =zoomprev> Prev Extent< / div> < div data-dojo-type =dijit / form / Buttonid =zoomnext> Next Extent< / div> < div data-dojo-type =dijit / form / Buttonid =pan> Pan< / div> < div data-dojo-type =dijit / form / Buttonid =deactivate> Deactivate< / div>< / div>< button onclick =showDialog2();> show without underlay< / button>
I'm in javascript and dojo. based on the my previous question about dialog with non underlay, I created a dialog. Now i want to add my buttons to the dialog. the button are dojo buttons and all of them are in . How can i locate these in my dialog ?
require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/domReady!"], function(Dialog, DialogUnderlay){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog2 = new Dialog({
title: "My Dialog",
content: "Test content.",
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});
<button onclick="showDialog2();">show without underlay</button>
<div id="navtool" >
<div data-dojo-type="dijit/form/Button" id="zoomin" >Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
</div>
解决方案
If you give a domNode
to the content
property of the dialog
, dojo will place the node and start the widgets for you.
require(["dijit/Dialog", "dijit/DialogUnderlay", "dojo/dom", "dojo/domReady!"], function(Dialog, DialogUnderlay, dom){
//just for the snippets to get the right styling
document.body.className = "tundra";
myDialog2 = new Dialog({
title: "My Dialog",
content: dom.byId('navtool'),
style: "width: 300px"
});
showDialog2 = function () {
myDialog2.show().then(function() {
DialogUnderlay.hide()
//little hack to avoid JS error when closing the dialog
DialogUnderlay._singleton.bgIframe = {destroy: function() {}}
});
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div id="navtool" >
<div data-dojo-type="dijit/form/Button" id="zoomin" >Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" >Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" >Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" >Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" >Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" >Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" >Deactivate</div>
</div>
<button onclick="showDialog2();">show without underlay</button>
这篇关于如何在dojo对话框中找到按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!