Updated
This commit is contained in:
Éric Lemoine
246
master/examples/test_FileUploaderCSS.html
Normal file
246
master/examples/test_FileUploaderCSS.html
Normal file
@@ -0,0 +1,246 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user