247 lines
8.3 KiB
HTML
247 lines
8.3 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html lang="en">
|
|
<head>
|
|
<title>FileUploader CSS Test</title>
|
|
<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
|
|
<link href="../../../dijit/themes/tundra/form/Button.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.ready(function(){
|
|
var props = {
|
|
isDebug:false,
|
|
hoverClass:"btnDftHover",
|
|
activeClass:"btnDftActive"
|
|
}
|
|
if(dijit.byId("btnD")){
|
|
new dojox.form.FileUploader(dojo.mixin({button:dijit.byId("btnD")}, props));
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
body{
|
|
font-family:sans-serif;
|
|
}
|
|
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;
|
|
}
|
|
.flashBtn{
|
|
border:2px solid #333333;
|
|
background:url(images/grad.jpg) #d0d0d0 repeat-x scroll 0px bottom;
|
|
font-size:12px;
|
|
font-family:Arial;
|
|
padding:5px;
|
|
width:100px;
|
|
height:100px;
|
|
vertical-align:middle; /* emulates a <button> */
|
|
text-align:center;
|
|
}
|
|
.flashBtnHover{
|
|
background-image:url(images/grad_over.jpg);
|
|
color:#fff;
|
|
cursor:pointer;
|
|
}
|
|
.flashBtnPress{
|
|
background-image:url(images/grad_down.jpg);
|
|
}
|
|
.top{
|
|
vertical-align:top;
|
|
}
|
|
.bot{
|
|
vertical-align:bottom;
|
|
padding-bottom:15px;
|
|
}
|
|
.ctr{
|
|
border:#666 solid 6px;
|
|
margin-left:60px;
|
|
}
|
|
.left{
|
|
text-align:left;
|
|
}
|
|
.gfx{
|
|
width:197px;
|
|
height:29px;
|
|
background:url(images/rndBtn_norm.png) no-repeat;
|
|
border:0;
|
|
text-align:left;
|
|
padding-left:55px;
|
|
font-size:14px;
|
|
color:#fff;
|
|
font-weight:bold;
|
|
font-style:italic;
|
|
vertical-align:middle;
|
|
}
|
|
.gfxOver{
|
|
background:url(images/rndBtn_over.png) no-repeat;
|
|
color:#fdfc9f;
|
|
}
|
|
.gfxDown{
|
|
background:url(images/rndBtn_down.png) no-repeat;
|
|
color:#c6dfe3;
|
|
}
|
|
.sprite{
|
|
width:197px;
|
|
height:29px;
|
|
background:url(images/rndBtnSprite.png) #fff no-repeat 0px -0px;
|
|
border:0;
|
|
text-align:left;
|
|
padding-left:55px;
|
|
font-size:14px;
|
|
color:#fff;
|
|
font-weight:bold;
|
|
font-style:italic;
|
|
}
|
|
.spriteOver{
|
|
background:url(images/rndBtnSprite.png) no-repeat 0px -30px;
|
|
color:#fdfc9f;
|
|
}
|
|
.spriteDown{
|
|
background:url(images/rndBtnSprite.png) no-repeat 0px -60px;
|
|
color:#c6dfe3;
|
|
}
|
|
.floatLeft{
|
|
float:left;
|
|
margin-left:5px;
|
|
width:150px;
|
|
}
|
|
.block{
|
|
display:block;
|
|
}
|
|
.wrapping{
|
|
width:100px;
|
|
height:60px;
|
|
white-space:normal;
|
|
line-height:12px !important;
|
|
vertical-align:top;
|
|
padding-top:10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="tundra">
|
|
<h1>FileUploader CSS Test</h1>
|
|
<h3>
|
|
All the buttons on this page are either Flash or HTML uploaders. They all should open a
|
|
file-browse dialog, but otherwise the uploading is non-functional. This page is for testing
|
|
rendering and layout. This takes a while to render in IE, but it's not a real-world test.
|
|
<strong>NOTE: This test opens a Browse Dialog, but does not upload.</strong>
|
|
</h3>
|
|
|
|
<div class="note">
|
|
Testing default, markup (don't use a DIV unless you style it, the width is not controlled by default)
|
|
</div>
|
|
<button isDebug="true" devMode="true" dojoType="dojox.form.FileUploader">Default Markup Flash</button>
|
|
<button force="html" dojoType="dojox.form.FileUploader">Default Markup HTML</button>
|
|
|
|
<div class="note">
|
|
Testing float right and left, and using style="" to override class. The buttons should cascade properly when resizing
|
|
the window.
|
|
</div>
|
|
<div style="padding:10px; border:1px solid #ccc;float:left; width:60%; margin-bottom:20px;">
|
|
<button class="floatLeft" dojoType="dojox.form.FileUploader">Flash Float Left</button>
|
|
<button force="html" class="floatLeft" dojoType="dojox.form.FileUploader">Flash Float Left</button>
|
|
<button dojoType="dojox.form.FileUploader" style="display:block; width:150px;float:right;">Flash Float Right</button>
|
|
<button force="html" dojoType="dojox.form.FileUploader" style="display:block; width:150px;float:right;margin-right:5px;">HTML Float Right</button>
|
|
</div>
|
|
|
|
<div class="note">
|
|
Text wrapping - FileUploader does not support text wrapping natively, it needs some CSS massaging to make it happen.
|
|
</div>
|
|
<button class="wrapping" dojoType="dojox.form.FileUploader">Using a Flash button with long wrapping text</button>
|
|
<button force="html" class="wrapping" dojoType="dojox.form.FileUploader">Using an HTML button with long wrapping text</button>
|
|
|
|
<div class="note">
|
|
Testing Dijit Button for backward compatibility. Use of a dijit button is
|
|
deprecated and will be removed in 1.5. On the right is the Flash Upload button and on the left a
|
|
Dijit button for comparison. Note there is a bug getting the hover font style correct.
|
|
</div>
|
|
<button id="btnX" class="dBtn" dojoType="dijit.form.Button">Using Dijit Button</button>
|
|
<button id="btnD" class="dBtn" dojoType="dijit.form.Button">Using Dijit Button</button>
|
|
|
|
<div class="note">Testing top-center</div>
|
|
<div baseClass="flashBtn top" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Top</div>
|
|
|
|
<div class="note">Testing bottom-center with 20px bottom padding</div>
|
|
<div baseClass="flashBtn bot" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Bottom</div>
|
|
|
|
<div class="note">Testing centered text, wide border and a left margin</div>
|
|
<div id="btn1" class="flashBtn ctr" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Center</div>
|
|
|
|
<div class="note">Testing left align</div>
|
|
<button id="btn3" class="flashBtn left" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Left</button>
|
|
|
|
<div class="note">
|
|
Testing background images for HTML and Flash buttons. "GFX" uses three
|
|
different images, "SPRITE" uses one sprited image with the background-position changed. The
|
|
uploader doesn't support icons (you can use html in the Flash button, but it's not very good) so
|
|
this example uses backgrounds with icons in them, and the text shifted with a 55px left padding.
|
|
All of these buttons are inline.
|
|
</div>
|
|
<button class="sprite" hoverClass="spriteOver" activeClass="spriteDown" dojoType="dojox.form.FileUploader">HTML BK SPRITE</button>
|
|
<button class="sprite" hoverClass="spriteOver" activeClass="spriteDown" dojoType="dojox.form.FileUploader">FLASH BK SPRITE</button>
|
|
<button class="gfx" hoverClass="gfxOver" activeClass="gfxDown" dojoType="dojox.form.FileUploader">HTML BK GFX</button>
|
|
<button class="gfx" hoverClass="gfxOver" activeClass="gfxDown" dojoType="dojox.form.FileUploader">Flash BK GFX</button>
|
|
|
|
<table style="margin-bottom:30px;">
|
|
<tr>
|
|
<td>
|
|
<div class="scrolls">
|
|
<p>
|
|
Testing <button dojoType="dojox.form.FileUploader">Flash inline buttons</button> in a
|
|
scrolling pane. Also testing
|
|
<button dojoType="dojox.form.FileUploader">HTML inline buttons</button>.
|
|
Because we are no longer using an invisible Flash movie using wmode=transparent.
|
|
The Windows Firefox clickable bug should be fixed (and hopefully some Linux
|
|
problems).
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="scrolls">
|
|
Testing a
|
|
<div>
|
|
<button class="block" dojoType="dojox.form.FileUploader">HTML Block Display Button</button>
|
|
</div>
|
|
in a scrolling pane. This is really just to see if IE blows up on this as well as the
|
|
inline test (it does). IE is not liking using innerHTML in a scrolling pane. This should
|
|
still work however - the button is built outside of the pane and inserted (as well as
|
|
the previous inline test). This will cause a slower render time.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|