dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
149 lines (138 loc) • 4.57 kB
HTML
<html lang="en">
<head>
<title>FileUploader TabContainer Test</title>
<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
<link href="../../../dijit/themes/tundra/form/Button.css" rel="stylesheet" />
<link href="../../../dijit/themes/tundra/Dialog.css" rel="stylesheet" />
<link href="../../../dijit/themes/tundra/layout/TabContainer.css" rel="stylesheet" />
<link href="../resources/FileUploader.css" rel="stylesheet" />
<script>
djConfig = {
isDebug: true,
popup:true,
parseOnLoad: true
}
</script>
<script src="../../../dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dojox.form.FileUploader");
dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Form");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
var fakeTab;
showFake = function(){
dojo.style(fakeTab, "left", "0px");
}
hideFake = function(){
dojo.style(fakeTab, "left", "-2000px");
}
dojo.addOnLoad(function(){
var tab = dijit.byId("tab3");
fakeTab = dojo.byId("fakeTab");
hideFake();
dojo.connect(tab, "onShow", showFake);
dojo.connect(tab, "onHide", hideFake);
});
</script>
<style>
html{
height:100%;
}
body{
font-family:sans-serif;
font-size:12px;
height:100%;
}
#tabs{
width:60%;
height:250px;
margin:0px 20%;
}
.dijitContentPane{
padding:10px;
}
table td{
width:33%;
vertical-align:top;
}
.scrolls{
width:100%;
height:75px;
overflow-y:scroll;
position:relative;
}
.note{
font-size:11px;
font-family:sans-serif;
color:#666;
width:400px;
margin-top:15px;
}
.note.nw{
width:auto ;
}
h3{
width:600px;
font-weight:normal;
font-size:14px;
}
.formContent{
width:300px;
height:150px;
}
#myDialog #dialogContentPane{
width:400px;
height:200px;
}
#fakeTab{
position:absolute;
left:0px;
top:125px;
width:60%;
height:250px;
margin:0px 20%;
padding:15px;
}
</style>
</head>
<body class="tundra">
<h1>FileUploader TabContainer Test</h1>
<h3>
Testing that FileUploader works in Tabs initially shown and initially hidden.
<strong>See important node below</strong>
</h3>
<div id="tabs" dojoType="dijit.layout.TabContainer" persist="false" tabStrip="true">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1">
<button isDebug="false" devMode="false" dojoType="dojox.form.FileUploader">Tab #1 Flash</button>
<button isDebug="false" devMode="false" force="html" dojoType="dojox.form.FileUploader">Tab #1 HTML</button>
</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2">
<button isDebug="false" devMode="false" dojoType="dojox.form.FileUploader">Tab #2 Flash</button>
<button isDebug="false" devMode="false" force="html" dojoType="dojox.form.FileUploader">Tab #2 HTML</button>
</div>
<div id="tab3" dojoType="dijit.layout.ContentPane" title="Tab 3">
</div>
</div>
<div id="fakeTab">
<button isDebug="false" devMode="false" dojoType="dojox.form.FileUploader">Tab #3 Flash</button>
<button isDebug="false" devMode="false" force="html" dojoType="dojox.form.FileUploader">Tab #3 HTML</button>
</div>
<p style="font-size:12px; border:2px solid #ff0000; padding:3px;">
<strong>NOTE:</strong> This test shows FileUploader successfully being created in TabContainers, <strong>BUT</strong>
there is a serious limitation in the Flash version for Firefox and Safari. When a node in those browsers is hidden
(or essentially repainted which can mean other style applications) the SWF is reloaded. This means that if you browse
for a file but don't upload upload it, change the tab and return, the files will no longer be in the FileUploader.
This problem can be seen when tabbing between Tab 1 and Tab 2 and observing the console logs and you will see the
SWF reinitializes. This problem does not exist in Internet Explorer. The HTML version of the Uploader should also
work fine.
<br/><br/>
This test also shows work around for the problem. View source of this test and see that in Tab 3, the FileUploader
is in a separate div floating over the TabContainer. When Tab #3 is shown and hidden, the div is moved off and on screen.
</p>
</body>
</html>