source: Dev/trunk/src/client/dojox/form/tests/test_FileUploaderCSS.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.0 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
2<html lang="en">
3<head>
4        <title>FileUploader CSS Test</title>
5        <link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
6        <link href="../../../dijit/themes/tundra/form/Button.css" rel="stylesheet" />
7        <link href="../resources/FileUploader.css" rel="stylesheet" />
8        <script>
9                djConfig = {
10                        isDebug: true,
11                        popup:true,
12                        parseOnLoad: true
13                }
14        </script>
15        <script src="../../../dojo/dojo.js"></script>
16        <script>
17                dojo.require("dojo.parser");
18                dojo.require("dojox.form.FileUploader");
19                dojo.require("dijit.form.Button");
20
21                dojo.ready(function(){
22                        var props = {
23                                isDebug:false,
24                                hoverClass:"btnDftHover",
25                                activeClass:"btnDftActive"
26                        }
27                        if(dijit.byId("btnD")){
28                                new dojox.form.FileUploader(dojo.mixin({button:dijit.byId("btnD")}, props));
29                        }
30                });
31        </script>
32        <style>
33                body{
34                        font-family:sans-serif;
35                }
36                table td{
37                        width:33%;
38                        vertical-align:top;
39                }
40                .scrolls{
41                        width:100%;
42                        height:75px;
43                        overflow-y:scroll;
44                        position:relative;
45                }
46                .note{
47                        font-size:11px;
48                        font-family:sans-serif;
49                        color:#666;
50                        width:400px;
51                        margin-top:15px;
52                }
53                .note.nw{
54                        width:auto !important;
55                }
56                h3{
57                        width:600px;
58                        font-weight:normal;
59                        font-size:14px;
60                }
61                .flashBtn{
62                        border:2px solid #333333;
63                        background:url(images/grad.jpg) #d0d0d0 repeat-x scroll 0px bottom;
64                        font-size:12px;
65                        font-family:Arial;
66                        padding:5px;
67                        width:100px;
68                        height:100px;
69                        vertical-align:middle; /* emulates a <button> */
70                        text-align:center;
71                }
72                .flashBtnHover{
73                        background-image:url(images/grad_over.jpg);
74                        color:#fff;
75                        cursor:pointer;
76                }
77                .flashBtnPress{
78                        background-image:url(images/grad_down.jpg);
79                }
80                .top{
81                        vertical-align:top;
82                }
83                .bot{
84                        vertical-align:bottom;
85                        padding-bottom:15px;
86                }
87                .ctr{
88                        border:#666 solid 6px;
89                        margin-left:60px;
90                }
91                .left{
92                        text-align:left;
93                }
94                .gfx{
95                        width:197px;
96                        height:29px;
97                        background:url(images/rndBtn_norm.png) no-repeat;
98                        border:0;
99                        text-align:left;
100                        padding-left:55px;
101                        font-size:14px;
102                        color:#fff;
103                        font-weight:bold;
104                        font-style:italic;
105                        vertical-align:middle;
106                }
107                .gfxOver{
108                        background:url(images/rndBtn_over.png) no-repeat;
109                        color:#fdfc9f;
110                }
111                .gfxDown{
112                        background:url(images/rndBtn_down.png) no-repeat;
113                        color:#c6dfe3;
114                }
115                .sprite{
116                        width:197px;
117                        height:29px;
118                        background:url(images/rndBtnSprite.png) #fff no-repeat 0px -0px;
119                        border:0;
120                        text-align:left;
121                        padding-left:55px;
122                        font-size:14px;
123                        color:#fff;
124                        font-weight:bold;
125                        font-style:italic;
126                }
127                .spriteOver{
128                        background:url(images/rndBtnSprite.png) no-repeat 0px -30px;
129                        color:#fdfc9f;
130                }
131                .spriteDown{
132                        background:url(images/rndBtnSprite.png) no-repeat 0px -60px;
133                        color:#c6dfe3;
134                }
135                .floatLeft{
136                        float:left;
137                        margin-left:5px;
138                        width:150px;
139                }
140                .block{
141                        display:block;
142                }
143                .wrapping{
144                        width:100px;
145                        height:60px;
146                        white-space:normal;
147                        line-height:12px !important;
148                        vertical-align:top;
149                        padding-top:10px;
150                }
151        </style>
152</head>
153<body class="tundra">
154        <h1>FileUploader CSS Test</h1>
155        <h3>
156                All the buttons on this page are either Flash or HTML uploaders. They all should open a
157                file-browse dialog, but otherwise the uploading is non-functional. This page is for testing
158                rendering and layout. This takes a while to render in IE, but it's not a real-world test.
159                <strong>NOTE: This test opens a Browse Dialog, but does not upload.</strong>
160        </h3>
161
162        <div class="note">
163                Testing default, markup (don't use a DIV unless you style it, the width is not controlled by default)
164        </div>
165        <button isDebug="true" devMode="true" dojoType="dojox.form.FileUploader">Default Markup Flash</button>
166        <button force="html" dojoType="dojox.form.FileUploader">Default Markup HTML</button>
167
168        <div class="note">
169                Testing float right and left, and using style="" to override class. The buttons should cascade properly when resizing
170                the window.
171        </div>
172        <div style="padding:10px; border:1px solid #ccc;float:left; width:60%; margin-bottom:20px;">
173                <button class="floatLeft" dojoType="dojox.form.FileUploader">Flash Float Left</button>
174                <button force="html" class="floatLeft" dojoType="dojox.form.FileUploader">Flash Float Left</button>
175                <button dojoType="dojox.form.FileUploader" style="display:block; width:150px;float:right;">Flash Float Right</button>
176                <button force="html" dojoType="dojox.form.FileUploader" style="display:block; width:150px;float:right;margin-right:5px;">HTML Float Right</button>
177        </div>
178
179        <div class="note">
180                Text wrapping - FileUploader does not support text wrapping natively, it needs some CSS massaging to make it happen.
181        </div>
182        <button class="wrapping" dojoType="dojox.form.FileUploader">Using a Flash button with long wrapping text</button>
183        <button force="html" class="wrapping" dojoType="dojox.form.FileUploader">Using an HTML button with long wrapping text</button>
184
185        <div class="note">
186                Testing Dijit Button for backward compatibility. Use of a dijit button is
187                deprecated and will be removed in 1.5. On the right is the Flash Upload button and on the left a
188                Dijit button for comparison. Note there is a bug getting the hover font style correct.
189        </div>
190        <button id="btnX" class="dBtn" dojoType="dijit.form.Button">Using Dijit Button</button>
191        <button id="btnD" class="dBtn" dojoType="dijit.form.Button">Using Dijit Button</button>
192
193        <div class="note">Testing top-center</div>
194        <div baseClass="flashBtn top" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Top</div>
195
196        <div class="note">Testing bottom-center with 20px bottom padding</div>
197        <div baseClass="flashBtn bot" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Bottom</div>
198
199        <div class="note">Testing centered text, wide border and a left margin</div>
200        <div id="btn1" class="flashBtn ctr" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Center</div>
201
202        <div class="note">Testing left align</div>
203        <button id="btn3" class="flashBtn left" hoverClass="flashBtnHover" activeClass="flashBtnPress" dojoType="dojox.form.FileUploader">Flash Left</button>
204
205        <div class="note">
206                Testing background images for HTML and Flash buttons. "GFX" uses three
207                different images, "SPRITE" uses one sprited image with the background-position changed. The
208                uploader doesn't support icons (you can use html in the Flash button, but it's not very good) so
209                this example uses backgrounds with icons in them, and the text shifted with a 55px left padding.
210                All of these buttons are inline.
211        </div>
212        <button class="sprite" hoverClass="spriteOver" activeClass="spriteDown" dojoType="dojox.form.FileUploader">HTML BK SPRITE</button>
213        <button class="sprite" hoverClass="spriteOver" activeClass="spriteDown" dojoType="dojox.form.FileUploader">FLASH BK SPRITE</button>
214        <button class="gfx" hoverClass="gfxOver" activeClass="gfxDown" dojoType="dojox.form.FileUploader">HTML BK GFX</button>
215        <button class="gfx" hoverClass="gfxOver" activeClass="gfxDown" dojoType="dojox.form.FileUploader">Flash BK GFX</button>
216
217        <table style="margin-bottom:30px;">
218                <tr>
219                <td>
220                        <div class="scrolls">
221                                <p>
222                                        Testing <button dojoType="dojox.form.FileUploader">Flash inline buttons</button> in a
223                                        scrolling pane. Also testing
224                                        <button dojoType="dojox.form.FileUploader">HTML inline buttons</button>.
225                                        Because we are no longer using an invisible Flash movie using wmode=transparent.
226                                        The Windows Firefox clickable bug should be fixed (and hopefully some Linux
227                                        problems).
228                                </p>
229                        </div>
230                </td>
231                <td>
232                        <div class="scrolls">
233                                Testing a
234                        <div>
235                                <button class="block" dojoType="dojox.form.FileUploader">HTML Block Display Button</button>
236                        </div>
237                        in a scrolling pane. This is really just to see if IE blows up on this as well as the
238                        inline test (it does). IE is not liking using innerHTML in a scrolling pane. This should
239                        still work however - the button is built outside of the pane and inserted (as well as
240                        the previous inline test). This will cause a slower render time.
241                        </div>
242                </td>
243                </tr>
244        </table>
245</body>
246</html>
Note: See TracBrowser for help on using the repository browser.