You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
4.5 KiB
148 lines
4.5 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
|
<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 !important; |
|
} |
|
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>
|
|
|