Changeset 2831
- Timestamp:
- 08/22/07 04:02:56 (1 year ago)
- Location:
- trunk/plugins/calendar
- Files:
-
- 1 added
- 2 modified
-
index.html (modified) (16 diffs)
-
jquery-calendar-demo.css (added)
-
jquery-calendar-demo.js (modified) (3 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/plugins/calendar/index.html
r2641 r2831 1 1 <html> 2 2 <head> 3 <title>jQuery Calendar Examples</title> 4 <script type="text/javascript" src="jquery.pack.js"></script> 5 <script type="text/javascript" src="jquery.debug.js"></script> 6 <script type="text/javascript" src="jquery.tabs.js"></script> 7 <!--script type="text/javascript" src="jquery.blockUI.js"></script--> 8 <script type="text/javascript" src="jquery-calendar.js"></script> 9 <script type="text/javascript" src="jquery-calendar-fr.js"></script> 10 <script type="text/javascript" src="jquery-calendar-demo.js"></script> 11 <link rel="stylesheet" type="text/css" href="jquery-calendar.css" title="default"/> 12 <link rel="stylesheet" type="text/css" href="jquery-calendar-alt.css" title="alt"/> 13 <style type="text/css">@import "jquery.tabs.css";</style> 14 <style type="text/css"> 15 body { font-family: Arial, Helvetica, Sans-serif; } 16 pre { margin: 5px 10px; } 17 #tabs ul { width: 100%; } 18 .feature { border: 1px solid #3c576c; } 19 .calLabel { float: left; width: 15em; } 20 .ar_day { color: white !important; background: #eee url(img/ar.gif) no-repeat center !important; } 21 .au_day { color: blue !important; background: #eee url(img/au.gif) no-repeat center !important; } 22 .br_day { color: green !important; background: #eee url(img/br.gif) no-repeat center !important; } 23 .cn_day { color: red !important; background: #eee url(img/cn.gif) no-repeat center !important; } 24 .id_day { color: white !important; background: #eee url(img/id.gif) no-repeat center !important; } 25 .ie_day { color: white !important; background: #eee url(img/ie.gif) no-repeat center !important; } 26 .ke_day { color: red !important; background: #eee url(img/ke.gif) no-repeat center !important; } 27 .lb_day { color: white !important; background: #eee url(img/lb.gif) no-repeat center !important; } 28 .nz_day { color: blue !important; background: #eee url(img/nz.gif) no-repeat center !important; } 29 .se_day { color: blue !important; background: #eee url(img/se.gif) no-repeat center !important; } 30 .us_day { color: white !important; background: #eee url(img/us.gif) no-repeat center !important; } 31 .za_day { color: green !important; background: #eee url(img/za.gif) no-repeat center !important; } 32 </style> 3 <title>jQuery Calendar Examples</title> 4 <script type="text/javascript" src="jquery.pack.js"></script> 5 <script type="text/javascript" src="jquery.debug.js"></script> 6 <script type="text/javascript" src="jquery-calendar.js"></script> 7 <script type="text/javascript" src="jquery-calendar-fr.js"></script> 8 <script type="text/javascript" src="jquery-calendar-demo.js"></script> 9 <link rel="stylesheet" type="text/css" href="jquery-calendar.css" title="default"/> 10 <link rel="stylesheet" type="text/css" href="jquery-calendar-alt.css" title="alt"/> 11 <link rel="stylesheet" type="text/css" href="jquery-calendar-demo.css" /> 33 12 </head> 34 13 <body> 35 <h1>jQuery Calendar Examples</h1> 36 <div id="tabs"> 37 <ul> 38 <li><a href="#default"><span>Defaults</span></a></li> 39 <li><a href="#invoke"><span>Invocation</span></a></li> 40 <li><a href="#keys"><span>Keystrokes</span></a></li> 41 <li><a href="#restrict"><span>Restricting</span></a></li> 42 <li><a href="#custom"><span>Customise</span></a></li> 43 <li><a href="#l10n"><span>Localisation</span></a></li> 44 <li><a href="#range"><span>Date range</span></a></li> 45 <li><a href="#misc"><span>Miscellaneous</span></a></li> 46 <li><a href="#inline"><span>Inline</span></a></li> 47 <li><a href="#styles"><span>Stylesheets</span></a></li> 14 <div id="wrap"> 15 <p><a href="http://docs.jquery.com/Plugins/Calendar">jQuery Calendar API</a></p> 16 <p><a href="http://docs.jquery.com/Plugins/Calendar/ChangeLog">jQuery Calendar Change Log</a></p> 17 <h1>jQuery Calendar Examples</h1> 18 <ul id="tabs"> 19 <li><a href="#default">Defaults</a></li> 20 <li><a href="#invoke">Invocation</a></li> 21 <li><a href="#keys">Keystrokes</a></li> 22 <li><a href="#restrict">Restricting</a></li> 23 <li><a href="#custom">Customise</a></li> 24 <li><a href="#l10n">Localisation</a></li> 25 <li><a href="#range">Date range</a></li> 26 <li><a href="#misc">Miscellaneous</a></li> 27 <li><a href="#inline">Inline</a></li> 28 <li><a href="#styles">Stylesheets</a></li> 48 29 </ul> 49 30 <div id="default" class="feature"> 31 <h2>Defaults</h2> 50 32 <p>The calendar can easily be added to an input field with appropriate default settings.</p> 51 33 <pre>$('#defaultFocus').calendar();</pre> … … 70 52 </div> 71 53 <div id="invoke" class="feature"> 54 <h2>Invocation</h2> 72 55 <p>The calendar can be invoked in a variety of ways, as shown below. 73 56 Also shown is the use of an image only trigger, … … 93 76 <p>The calendar can also be triggered externally for a particular input.</p> 94 77 <p><span class="calLabel">External trigger:</span> 95 <button on click="popUpCal.showFor($('#invokeFocus')[0]);">Open calendar</button></p>78 <button onClick="popUpCal.showFor($('#invokeFocus')[0]);">Open calendar</button></p> 96 79 <pre>popUpCal.showFor($('#invokeFocus')[0]);</pre> 97 80 <p>Or even opened as a "dialog". If the <em>blockUI</em> plugin is available, … … 99 82 <p><span class="calLabel">Calendar dialog:</span> 100 83 <input type="text" size="10" id="invokeDialog" readonly="readonly"/> 101 <button on click="popUpCal.dialogCalendar($('#invokeDialog').val(),84 <button onClick="popUpCal.dialogCalendar($('#invokeDialog').val(), 102 85 setDateFromDialog, {prompt: 'Choose a date', speed: ''});">Open dialog</button></p> 103 86 <pre>popUpCal.dialogCalendar($('#invokeDialog').val(), setDateFromDialog, … … 105 88 </div> 106 89 <div id="keys" class="feature"> 90 <h2>Keystrokes</h2> 107 91 <p>The calendar also responds to keystrokes entered in the input field.</p> 108 92 <p><span class="calLabel">Keyboard driven:</span> … … 121 105 </div> 122 106 <div id="restrict" class="feature"> 107 <h2>Restricting</h2> 123 108 <p>You can restrict the functionality of the calendar in various ways. 124 109 The first example sets the first day of the week to Monday and prevents it from being … … 141 126 </div> 142 127 <div id="custom" class="feature"> 128 <h2>Customise</h2> 143 129 <p>You can customise the selectability and/or appearance of individual days 144 130 by setting a callback function that accepts a date and returns an array … … 169 155 </div> 170 156 <div id="l10n" class="feature"> 157 <h2>Localisation</h2> 171 158 <p>You can localise the calendar for other languages and regional differences. 172 159 The calendar defaults to English with a date format of DD/MM/YYYY. … … 190 177 </div> 191 178 <div id="range" class="feature"> 179 <h2>Date Range</h2> 192 180 <p>Use a custom field settings function to create a date range control: 193 181 two date fields, each restricting the other. The function takes an … … 204 192 </div> 205 193 <div id="misc" class="feature"> 194 <h2>Miscellaneous</h2> 206 195 <p>Additional settings let you move the <em>Clear</em>/<em>Close</em> controls 207 196 to the bottom and display the days in other months (non-selectable). … … 216 205 on the fly. As an example, here we change the speed at which the calendar appears.</p> 217 206 <p><span class="calLabel">Display speed:</span> 218 <select on change="setSpeed(this);"><option value="">immediate</option>207 <select onChange="setSpeed(this);"><option value="">immediate</option> 219 208 <option value="slow">slow</option><option value="medium" selected="selected">medium</option> 220 209 <option value="fast">fast</option></select></p> … … 231 220 The attribute values are evaluated as JavaScript.</p> 232 221 <p><span class="calLabel">Inline configuration 1:</span> 233 <input type="text" size="10" class="inlineConfig" on change="showDay(this);"222 <input type="text" size="10" class="inlineConfig" onChange="showDay(this);" 234 223 cal:closeAtTop="false" cal:firstDay="1" cal:appendText="which is a"/> 235 224 <span id="inlineDay">blank</span></p> … … 246 235 </div> 247 236 <div id="inline" class="feature"> 237 <h2>Inline</h2> 248 238 <p>The calendar can be used inline rather than as a popup.</p> 249 239 <p><span class="calLabel">Inline date range:</span> … … 270 260 </div> 271 261 <div id="styles" class="feature"> 262 <h2>Stylesheets</h2> 272 263 <p>The calendar can be formatted through the use of a stylesheet. 273 264 The default stylesheet is used in the rest of this demo … … 277 268 <p><span class="calLabel">In a dialog:</span> 278 269 <input type="text" size="10" id="altDialog" readonly="readonly"/> 279 <button on click="popUpCal.dialogCalendar($('#altDialog').val(),270 <button onClick="popUpCal.dialogCalendar($('#altDialog').val(), 280 271 setAltDateFromDialog, {prompt: 'Choose a date', speed: ''});">Open dialog</button></p> 281 272 <p>The basic HTML structure of the calendar is shown below:</p> … … 315 306 </div></pre> 316 307 </div> 317 <p><a href="http://docs.jquery.com/Plugins/Calendar">jQuery Calendar API</a></p>318 <p><a href="http://docs.jquery.com/Plugins/Calendar/ChangeLog">jQuery Calendar Change Log</a></p>319 308 </div> 320 309 </body> -
trunk/plugins/calendar/jquery-calendar-demo.js
r2796 r2831 4 4 5 5 $(document).ready(function () { 6 $('#tabs').tabs({onClick: updateTabs})6 tabs.init(); 7 7 // Restore default language after loading French localisation 8 8 popUpCal.setDefaults(popUpCal.regional['']); … … 53 53 $('#altStyle').calendar(); 54 54 }); 55 56 function updateTabs(anchor, newDiv, oldDiv) {57 var stylesheet = (newDiv.id == 'styles' ? 'alt' : 'default');58 $('link').each(function() {59 this.disabled = (this.title != '' && this.title != stylesheet);60 });61 }62 55 63 56 function setSpeed(select) { … … 120 113 (month < 10 ? '0' : '') + month + '/' + date.getFullYear(); 121 114 } 115 116 // Custom Tabs by Marc Grabanski 117 var tabs = 118 { 119 init : function () 120 { 121 // Setup tabs 122 var nextHTML = '<div class="nextFeature"><a>Continue to next section >></a></div>'; 123 //var backHTML 124 $(".feature").hide().append(nextHTML); 125 $(".feature:first").show().id; 126 var tabCount = $("#tabs a").size(); 127 $("#tabs a:eq(0)").addClass('over'); 128 129 // Get all of the IDs from the hrefs 130 tabs.IDs = []; 131 for (var i=0;i<tabCount;i++) { 132 tabs.IDs[i] = $("#tabs a:eq(" + i + ")").attr("href").replace("#",""); 133 } 134 135 // Slide visible up and clicked one down 136 $("#tabs a").each(function(i){ 137 $(this).click(function () { 138 $('.over').removeClass('over'); 139 $(this).addClass('over'); 140 $(".feature:visible").slideUp("fast", function() { 141 $("#" + tabs.IDs[i]).slideDown(); 142 }); 143 tabs.stylesheet = (tabs.IDs[i] == 'styles') ? 'alt' : 'default'; 144 $('link').each(function() { 145 this.disabled = (this.title != '' && this.title != tabs.stylesheet); 146 }); 147 }); 148 }); 149 150 $(".feature .nextFeature a").each(function(i){ 151 $(this).click(function() { 152 $(".feature:visible").slideUp("fast", function() { 153 if (tabs.IDs.length > (i+1) ) { 154 $("#" + tabs.IDs[i+1]).slideDown(); 155 $('.over').removeClass('over'); 156 $("#tabs a:eq(" + (i+1) + ")").addClass('over'); 157 } else { 158 $("#" + tabs.IDs[0]).slideDown(); 159 $('.over').removeClass('over'); 160 $("#tabs a:eq(0)").addClass('over'); 161 } 162 }); 163 }); 164 }); 165 } 166 }