Javascript 在Dojox DialogWidget中显示元素
我在正确显示dojox DialogWidget内容时遇到问题。 我创建了两个工具栏和一个ContentPane。其想法是将一个工具栏固定在顶部宽度固定的大小上,将另一个工具栏固定在底部,将ContentPane固定在中间。在我的例子中,我只看到顶部工具栏和内容窗格,它们散落在剩余空间上,因此看不到底部工具栏。内容在不同的浏览器中也会显示不同的内容。我在下面弹出我的代码Javascript 在Dojox DialogWidget中显示元素,javascript,dojo,Javascript,Dojo,我在正确显示dojox DialogWidget内容时遇到问题。 我创建了两个工具栏和一个ContentPane。其想法是将一个工具栏固定在顶部宽度固定的大小上,将另一个工具栏固定在底部,将ContentPane固定在中间。在我的例子中,我只看到顶部工具栏和内容窗格,它们散落在剩余空间上,因此看不到底部工具栏。内容在不同的浏览器中也会显示不同的内容。我在下面弹出我的代码 <!DOCTYPE html> require(“dojo.parser”); require(“dij
<!DOCTYPE html>
require(“dojo.parser”);
require(“dijit.layout.BorderContainer”);
require(“dijit.layout.ContentPane”);
require(“dijit.Toolbar”);
require(“dijit.form.Button”);
require(“dijit.form.VerticalSlider”);
require(“dijit.form.VerticalRuleLabels”);
require(“dijit.form.VerticalRule”);
require(“dijit.TooltipDialog”);
require(“dojox.widget.Dialog”
);
dialog=null;
dojo.addOnLoad(函数()
{
container=dojo.create(“div”{
类:“测试”,
id:“查看器”
},dojo.body());
console.debug(“容器ID:+Container”);
var appLayout=new dijit.layout.BorderContainer({
设计:“标题”,
样式:“宽度:100%;高度:100%”,
},container.id);
content=new dijit.layout.ContentPane({
地区:“中心”,
标题:“视口”,
类:“dhMedViewViewport”
});
appLayout.addChild(内容);
viewportContainer=content.domNode;
var imgToolbar_zgoraj=新的dijit.Toolbar({
地区:“顶级”,
}“dhmv工具栏”);
imgToolbar_zgoraj.addChild(新的dijit.form.Button({
标签:“重置”,
showLabel:正确
}));
var imgToolbar_spodaj=新的dijit.Toolbar({
区域:“底部”,
}“dhmv工具栏”);
imgToolbar_spodaj.addChild(新的dijit.form.Button({
标签:“重置”,
showLabel:正确
}));
appLayout.addChild(imgtoolbarzgoraj);
appLayout.addChild(imgToolbar_spodaj);
appLayout.startup();
dialog=新建dojox.widget.dialog({
sizeToViewport:对,
内容:容器
});
});
函数showDialogTwo(){
dialog.startup();
dialog.show();
}
测试对话框
向我展示!
showDialogTwo();
是否有任何错误消息或其他提示?当您创建容器节点时,我想它至少会失败,因为类是一个保留字。另外:HTML文件中是否存在dhmvToolBar?也许你可以给我们一把小提琴来说明这个问题。。。
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main-demo.css" media="screen" />
<link rel="stylesheet" href="medview.css" media="screen" />
<link rel="stylesheet" href="main.css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="async:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.VerticalSlider");
dojo.require("dijit.form.VerticalRuleLabels");
dojo.require("dijit.form.VerticalRule");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.Dialog"
);
dialog = null;
dojo.addOnLoad(function()
{
container = dojo.create("div", {
class : "test",
id : "viewer"
}, dojo.body());
console.debug("Container ID: " + container);
var appLayout = new dijit.layout.BorderContainer({
design : "headline",
style:'width:100%;height:100%',
}, container.id);
content = new dijit.layout.ContentPane({
region:"center",
title : "Viewports",
class : "dhMedViewViewport"
});
appLayout.addChild(content);
viewportContainer = content.domNode;
var imgToolbar_zgoraj = new dijit.Toolbar({
region:"top",
}, "dhmv-toolbar");
imgToolbar_zgoraj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
var imgToolbar_spodaj = new dijit.Toolbar({
region:"bottom",
}, "dhmv-toolbar");
imgToolbar_spodaj.addChild(new dijit.form.Button({
label : "Reset",
showLabel : true
}));
appLayout.addChild(imgToolbar_zgoraj);
appLayout.addChild(imgToolbar_spodaj);
appLayout.startup();
dialog = new dojox.widget.Dialog({
sizeToViewport: true,
content : container
});
});
function showDialogTwo() {
dialog.startup();
dialog.show();
}
</script>
</head>
<body class="claro">
<p>
Test dialogBox
</p>
<button id="buttonTwo" dojoType="dijit.form.Button" type="button">
Show me!
<script type="dojo/method" event="onClick" args="evt">
showDialogTwo();
</script>
</button>
</body>