Ticket #4814: jquery_bug_submit.html

File jquery_bug_submit.html, 10.5 KB (added by tommyhp2, 12 years ago)

Bugs in jQuery UI DatePicker

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title></title>
6
7<link rel="stylesheet" type="text/css" media="screen" href="http://static.jquery.com/ui/css/base2.css" />
8<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
9
10<style type="text/css">
11body {
12        font: 100% Verdana, Arial, Helvetica, sans-serif;
13        /*background: #666666;*/
14        margin: 0;
15        padding: 0;
16        text-align: center;
17        /*color: #000000;*/
18        background: #000;
19        color: #fff;
20}
21.thrColHybHdr #container {
22        width: 100%;
23        /*background: #FFFFFF;*/
24        text-align: left;
25        margin: 0;
26        padding: 0;
27        background: #111;
28        color: #FFF;
29}
30.thrColHybHdr #header {
31        /*background: #DDDDDD;*/
32        background: #000;
33        padding: 0 10px;
34        margin: 0;
35        padding: 0;
36        color: #FFF;
37}
38.thrColHybHdr #header h1 {
39        margin: 0;
40        padding: 5px 10px;
41}
42.thrColHybHdr #sidebarLeft {
43        float: left;
44        width: 11em;
45        /*background: #EBEBEB;*/
46        padding: 0;
47        background: #000;
48        color: #FFF;
49}
50.thrColHybHdr #sidebarRight {
51        float: right;
52        width: 11em;
53        /*background: #EBEBEB;*/
54        padding: 0;
55        background: #000;
56        color: #FFF;
57}
58/*.thrColHybHdr #sidebarLeft h3,
59.thrColHybHdr #sidebarLeft p,
60.thrColHybHdr #sidebarRight p,
61.thrColHybHdr #sidebarRight h3 {
62        margin-left: 10px;
63        margin-right: 10px;
64}*/
65.thrColHybHdr #mainContent {
66        margin: 0 12em 0 12em;
67        padding: 0 1em 0 1em;
68}
69.thrColHybHdr #mainContentLeft {
70        margin: 0 12em 0 0;
71        padding: 0 1em 0 1em;
72}
73.thrColHybHdr #mainContentRight {
74        margin: 0 0 0 12em;
75        padding: 0 1em 0 1em;
76}
77.thrColHybHdr #mainContentFull {
78        margin: 0;
79        padding: 0 1em 0 1em;
80}
81.thrColHybHdr #footer {
82        padding: 0 10px;
83        /*background:#DDDDDD;*/
84        border: 1px solid #333333;
85        background: #333333 url(jquery/ui-bg_gloss-wave_25_333333_500x100.png) 50% 50% repeat-x;
86        color: #000;
87}
88.thrColHybHdr #footer p {
89        margin: 0;
90        padding: 5px 0;
91        text-align: center;
92        font-size: 10pt;
93}
94.fltrt {
95        float: right;
96        margin-left: 8px;
97}
98.fltlft {
99        float: left;
100        margin-right: 8px;
101}
102.clearfloat {
103        clear:both;
104        height:0;
105        font-size: 1px;
106        line-height: 0px;
107}
108</style>
109
110<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
111<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
112
113<script type="text/javascript">
114        /* Effects that can be used with Show/Hide/Toggle:
115         *
116         * Blind - Blinds the element away or shows it by blinding it in.
117         * Clip - Clips the element on or off, vertically or horizontally.
118         * Drop - Drops the element away or shows it by dropping it in.
119         * Explode - Explodes the element into multiple pieces.
120         * Fold - Folds the element like a piece of paper.
121         * Puff - Scale and fade out animations create the puff effect.
122         * Slide - Slides the element out of the viewport.
123         * Scale - Shrink or grow an element by a percentage factor.
124         */
125        $(document).ready( function() {
126                $("#accordionLeft").accordion( {
127                        //icons : {
128                        //      'header' : 'ui-icon-circle-arrow-e',
129                        //      'headerSelected' : 'ui-icon-circle-arrow-s'
130                        //},
131                        active : 0,
132                        autoHeight : false,
133                        collapsible : false,
134                        event : 'click', // click, mouseover
135                        fillSpace : true
136                });
137                $("#accordion").accordion( {
138                        //icons : {
139                        //      'header' : 'ui-icon-circle-arrow-e',
140                        //      'headerSelected' : 'ui-icon-circle-arrow-s'
141                        //},
142                        active : 0,
143                        autoHeight : false,
144                        collapsible : false,
145                        event : 'click', // click, mouseover
146                        fillSpace : false
147                });
148                /*
149                 $('.accordion .head').click( function() {
150                 $(this).next().toggle('slow');
151                 return false;
152                 }).next().hide();
153                 */
154                $("#datepicker").datepicker( {
155                        buttonImage : 'themes/base/jquery/calendar.gif',
156                        buttonImageOnly : true,
157                        buttonText : 'Choose',
158                        changeMonth : true,
159                        changeYear : true,
160                        closeText : 'Done',
161                        constrainInput : true,
162                        //currentText : 'Today',
163                        dateFormat : 'mm/dd/yy',
164                        // dayNames : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
165                        // dayNamesMin : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
166                        // dayNamesShort : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
167                        defaultDate : '+2',
168                        duration : 'fast',
169                        firstDay : 1,
170                        gotoCurrent : false, // false
171                        hidelfNoPrevNext : false, // false
172                        isRTL : false, // false
173                        maxDate : '+2m',
174                        minDate : '-1',
175                        // monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
176                        // monthNamesShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
177                        navigationAsDateFormat : true,
178                        nextText : 'Next',
179                        numberOfMonths : 1, // [ 2, 2]
180                        prevText : 'Prev',
181                        shortYearCutoff : '+10',
182                        showAnim : 'show', // show, slideDown, fadeIn, fold
183                        showButtonPanel : true,
184                        showCurrentAtPos : 0,
185                        showMonthAfterYear : false,
186                        showOn : 'both', // focus, button, both
187                        showOptions: {direction: 'up' },
188                        stepMonths : 1,
189                        yearRange : '-10:+10'
190                });
191                $("#dialog").dialog( {
192                        autoOpen : false,
193                        buttons : {
194                                "Ok" : function() {
195                                        $(this).dialog("close");
196                                }
197                        },
198                        closeOnEscape : true,
199                        draggable : false,
200                        height : 'auto',
201                        hide : 'slide',
202                        maxHeight : false, // false or # in pixels
203                        maxWidth : false, // false or # in pixels
204                        minHeight : 150,
205                        minWidth : 150,
206                        modal : true,
207                        position : 'center', // 'center', 'left', 'right', 'top', 'bottom', or array of coordinate pair
208                        resizable : false,
209                        show : 'slide',
210                        width : 300
211                });
212                $("#tabs").tabs( {
213                        /* disabled: [1, 2], */
214                        //cache : true,
215                        collapsible : false,
216                        event : 'click', // click, mouseover
217                        fx : {
218                                opacity : 'toggle'
219                        }, // toggle
220                        selected : 0,
221                        spinner : 'Retrieving data...'
222                });
223                $("#tabs2").tabs( {
224                        /* disabled: [1, 2], */
225                        //cache : true,
226                        collapsible : false,
227                        event : 'click', // click, mouseover
228                        fx : {
229                                opacity : 'toggle'
230                        }, // toggle
231                        selected : 0,
232                        spinner : 'Retrieving data...'
233                });
234
235                $("#vtabs").tabs( {
236                        /* disabled: [1, 2], */
237                        //cache : true,
238                        collapsible : false,
239                        event : 'click', // click, mouseover
240                        fx : {
241                                opacity : 'toggle'
242                        }, // toggle
243                        selected : 0,
244                        spinner : 'Retrieving data...'
245                });
246                $("#vtabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
247                $("#vtabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
248        });
249</script>
250</head>
251<body class="thrColHybHdr">
252
253<div id="container">
254<div id="header">
255header
256<br class="clearfloat" />
257</div>
258
259<div id="sidebarLeft">
260<div id="accordionLeft">
261<h4><a href="#">Section 1</a></h4>
262<div>Section 1 content</div>
263<h4><a href="#">Section 2</a></h4>
264<div>Section 2 content</div>
265<h4><a href="#">Section 3</a></h4>
266<div>Section 3 content</div>
267</div>
268</div>
269
270<div id="sidebarRight">sidebar right</div>
271
272<div id="mainContent">
273<div id="accordion">
274<h4><a href="#">Section 1</a></h4>
275<div>Section 1 content</div>
276<h4><a href="#">Section 2</a></h4>
277<div>Section 2 content</div>
278<h4><a href="#">Section 3</a></h4>
279<div>Section 3 content</div>
280</div>
281<br />
282<p>Date: <input type="text" id="datepicker"></p>
283<div id="dialog" title="Dialog Title">I'm in a dialog</div>
284<br />
285
286<div id="tabs">
287<ul>
288        <li><a href="#fragment-1"><span>One</span></a></li>
289        <li><a href="#fragment-2"><span>Two</span></a></li>
290        <li><a href="#fragment-3"><span>Three</span></a></li>
291</ul>
292<div id="fragment-1">
293<p>First tab is active by default:</p>
294<pre><code>$('#example').tabs();</code></pre></div>
295<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
296<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
297</div>
298
299<div id="tabs2">
300<ul>
301        <li><a href="#fragment-1"><span>One</span></a></li>
302        <li><a href="#fragment-2"><span>Two</span></a></li>
303        <li><a href="#fragment-3"><span>Three</span></a></li>
304</ul>
305<div id="fragment-1">
306<p>First tab is active by default:</p>
307<pre><code>$('#example').tabs();</code></pre></div>
308<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
309<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
310</div>
311
312<div id="vtabs">
313<ul>
314        <li><a href="#fragment-1"><span>One</span></a></li>
315        <li><a href="#fragment-2"><span>Two</span></a></li>
316        <li><a href="#fragment-3"><span>Three</span></a></li>
317</ul>
318<div id="fragment-1">
319<p>First tab is active by default:</p>
320<pre><code>$('#example').tabs();</code></pre></div>
321<div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
322<div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
323</div>
324
325</div>
326
327<br class="clearfloat" />
328<div id="footer">footer</div>
329
330</body>
331</html>