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.
246 lines
8.0 KiB
246 lines
8.0 KiB
<!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>
|
|
|