GPL-LICENSE.txt MIT-LICENSE.txt @@ -3,7 +3,7 @@ div#time-picker-wrap { border: 2px solid #77bbff; color: #1166bb; - padding: 3px; + padding: 2px; margin: 0; background: #fff; position: absolute; @@ -11,14 +11,14 @@ div#time-picker-wrap { } #time-picker-wrap table tr, #time-picker-wrap table td { - font-size: 22px; + font-size: 18px; vertical-align: middle; text-align: center; } #time-picker-wrap div.scoreboard { cursor: default; - margin: 3px 10px; + margin: 2px 6px; } #time-picker-wrap .scoreboard .increase-button span, @@ -30,10 +30,10 @@ div#time-picker-wrap { margin: 0 auto; } #time-picker-wrap .scoreboard .increase-button span { - background: url("../images/increase.png") no-repeat; + background: url("increase.png") no-repeat; } #time-picker-wrap .scoreboard .decrease-button span { - background: url("../images/decrease.png") no-repeat; + background: url("decrease.png") no-repeat; } #time-picker-wrap .scoreboard .score span { @@ -50,8 +50,8 @@ div#time-picker-wrap { #time-picker-wrap .clear-wrap, #time-picker-wrap .close-wrap { font-size: 12px; - font-weight: bold; - padding: 2px; + text-align: center; + padding: 2px 0; cursor: pointer; border: 1px solid #77bbff; } css/timepicker.css @@ -3,7 +3,7 @@ div#time-picker-wrap { border: 2px solid #77bbff; color: #1166bb; - padding: 3px; + padding: 2px; margin: 0; background: #fff; position: absolute; @@ -11,14 +11,14 @@ div#time-picker-wrap { } #time-picker-wrap table tr, #time-picker-wrap table td { - font-size: 22px; + font-size: 18px; vertical-align: middle; text-align: center; } #time-picker-wrap div.scoreboard { cursor: default; - margin: 3px 10px; + margin: 2px 6px; } #time-picker-wrap .scoreboard .increase-button span, @@ -30,10 +30,10 @@ div#time-picker-wrap { margin: 0 auto; } #time-picker-wrap .scoreboard .increase-button span { - background: url("../images/increase.png") no-repeat; + background: url("increase.png") no-repeat; } #time-picker-wrap .scoreboard .decrease-button span { - background: url("../images/decrease.png") no-repeat; + background: url("decrease.png") no-repeat; } #time-picker-wrap .scoreboard .score span { @@ -50,8 +50,8 @@ div#time-picker-wrap { #time-picker-wrap .clear-wrap, #time-picker-wrap .close-wrap { font-size: 12px; - font-weight: bold; - padding: 2px; + text-align: center; + padding: 2px 0; cursor: pointer; border: 1px solid #77bbff; } demo/timepicker.css @@ -17,15 +17,31 @@ <p style="background:#ddd;font-size:80%;margin:0 0 10px;padding:12px 0;">Yet another jQuery timepicker plugin</p> <form id="timepicker-form" action="." method="POST"> - <input type="text" id="time-picker" name="time" ></input> + <input type="text" id="time-picker" name="time" autocomplete="off"></input> <input type="submit" id="submit" name="submit" value="submit" ></input> </form> + <div style="margin-top: 400px;" id="debug"></div> + <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="timepicker.js"></script> <script type="text/javascript">//<![CDATA[ - $('#time-picker').timepicker(); + $('#time-picker').timepicker({ + showAnim: 'slide', + duration: 'fast', + defaultTime: '08:08:08' + }); //]]></script> + <!-- +<script type="text/javascript"> +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); +document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); +</script> +<script type="text/javascript"> +var pageTracker = _gat._getTracker("UA-514579-11"); +pageTracker._trackPageview(); +</script> +--> </body> </html> demo/timepicker.html @@ -1,303 +1,343 @@ /* - * jQuery Timepicker Plugin + * Yet Another jQuery Timepicker Plugin * version 0.2 * * Copyright (c) 2008 Wu Yuntao <http://luliban.com/blog/> - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://plugins.jquery.com/project/yatimepicker * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. */ (function($) { - /* Scoreboard plugin. - * Used as a single hour, minute and second picker in Timepicker +var PROP_NAME = 'timepicker'; + +/* Scoreboard plugin. + * Used as a single hour, minute and second picker in Timepicker + */ +$.fn.scoreboard = function(options) { + if (!this.length) return this; + + var debug = false, + increaseInterval = null, + decreaseInterval = null, + _frequency = 200, + _mainWrapClass = 'scoreboard', + _increaseButtonClass = 'increase-button', + _decreaseButtonClass = 'decrease-button', + _scoreWrapClass = 'score'; + + options = $.extend({ + /* minimum value of score */ + min: 0, + /* maximum value of score */ + max: 20, + /* initial value of score */ + init: 10, + /* if ``loop`` is true, value turns to its maxium when reaching its minimum, + * and vice versa */ + loop: true, + /* digit of score */ + digit: 2 + }, options || {}); + /* Verify options */ + if (options.min >= options.max) throw new Error("``max`` cannot less than ``min``"); + if (options.init < options.min || options.init > options.max) + throw new Error("``init`` cannot less than ``min`` or great than ``max``"); + var score = options.init; + + /* HTML Template */ + var _html = '<div class="' + _mainWrapClass + '"><div class="' + _increaseButtonClass + + '"><span></span></div><div class="' + _scoreWrapClass + '"><span>' + + padLeft(score) + '</span></div><div class="' + _decreaseButtonClass + + '"><span></span></div></div>'; + this.html(_html); + var _increaseButton = this.find('div.' + _increaseButtonClass + ' span'); + var _decreaseButton = this.find('div.' + _decreaseButtonClass + ' span'); + var _scoreWrap = this.find('div.' + _scoreWrapClass + ' span'); + + /* When increase-button clicked, score increases. When button is continuously pressed, + * score increases every 0.2 second. The same as decrease-button. */ - $.fn.scoreboard = function(options) { - if (!this.length) return this; - - var debug = false, - increaseInterval = null, - decreaseInterval = null, - _frequency = 200, - _mainWrapperClass = 'scoreboard', - _increaseButtonClass = 'increase-button', - _decreaseButtonClass = 'decrease-button', - _scoreWrapperClass = 'score'; - - options = $.extend({ - /* minimum value of score */ - min: 0, - /* maximum value of score */ - max: 20, - /* initial value of score */ - init: 10, - /* if ``loop`` is true, value turns to its maxium when reaching its minimum, - * and vice versa */ - loop: true, - /* digit of score */ - digit: 2 - }, options || {}); - /* Verify options */ - if (options.min >= options.max) throw new Error("``max`` cannot less than ``min``"); - if (options.init < options.min || options.init > options.max) - throw new Error("``init`` cannot less than ``min`` or great than ``max``"); - var score = options.init; - - /* HTML Template */ - var _html = '<div class="' + _mainWrapperClass + '"><div class="' + _increaseButtonClass - + '"><span></span></div><div class="' + _scoreWrapperClass + '"><span>' - + padLeft(score) + '</span></div><div class="' + _decreaseButtonClass - + '"><span></span></div></div>'; - this.html(_html); - var _increaseButton = this.find('div.' + _increaseButtonClass + ' span'); - var _decreaseButton = this.find('div.' + _decreaseButtonClass + ' span'); - var _scoreWrapper = this.find('div.' + _scoreWrapperClass + ' span'); - - /* When increase-button clicked, score increases. When button is continuously pressed, - * score increases every 0.2 second. The same as decrease-button. - */ - _increaseButton.click(function(e) { - increase(); - }).mousedown(function(e) { - if (!isRightClick(e)) increaseInterval = window.setInterval(increase, _frequency); - }).mouseup(function(e) { - if (!isRightClick(e)) window.clearInterval(increaseInterval); - }).mouseout(function(e) { - if (!isRightClick(e)) window.clearInterval(increaseInterval); - }); - - _decreaseButton.click(function(e) { - decrease(); - }).mousedown(function(e) { - if (!isRightClick(e)) decreaseInterval = window.setInterval(decrease, _frequency); - }).mouseup(function(e) { - if (!isRightClick(e)) window.clearInterval(decreaseInterval); - }).mouseout(function(e) { - if (!isRightClick(e)) window.clearInterval(decreaseInterval); - }); - - function isRightClick(e) { - var rightclick; + _increaseButton.click(function(e) { + increase(); + }).mousedown(function(e) { + if (!isRightClick(e)) increaseInterval = window.setInterval(increase, _frequency); + }).mouseup(function(e) { + if (!isRightClick(e)) window.clearInterval(increaseInterval); + }).mouseout(function(e) { + if (!isRightClick(e)) window.clearInterval(increaseInterval); + }); + + _decreaseButton.click(function(e) { + decrease(); + }).mousedown(function(e) { + if (!isRightClick(e)) decreaseInterval = window.setInterval(decrease, _frequency); + }).mouseup(function(e) { + if (!isRightClick(e)) window.clearInterval(decreaseInterval); + }).mouseout(function(e) { + if (!isRightClick(e)) window.clearInterval(decreaseInterval); + }); + + function isRightClick(e) { + var rightclick; if (!e) var e = window.event; if (e.which) rightclick = (e.which == 3); else if (e.button) rightclick = (e.button == 2); - return rightclick; - } - - function getScore() { - return parseInt(_scoreWrapper.html(), 10); - } - - function increase() { - score = getScore(); - score == options.max ? score = (options.loop ? options.min : score) : ++score; - _scoreWrapper.html(padLeft(score)); - return score; - } - - function decrease() { - score = getScore(); - score == options.min ? score = (options.loop ? options.max : score) : --score; - _scoreWrapper.html(padLeft(score)); - return score; - } - - function padLeft(val) { - if (val.toString().length >= options.digit) return String(val); - return padLeft("0" + val); - } - - }; - - /* Timepicker plugin - * Use timeboard to pick up any time. - */ - $.fn.timepicker = function(options) { - if (!this.length) return this; - - var debug = false, - _input = this, - _timepicker = null, - _timepickerPosition = null, - _hourpicker = null, - _minutepicker = null, - _secondpicker = null, - _hourScore = null, - _minuteScore = null, - _secondScore = null, - _timepickerShowing = false, - _mainWrapper = 'time-picker-wrap', - _timeboardWrapClass = 'time-board-wrap', - _hourWrapClass = 'hour-picker-wrap', - _minuteWrapClass = 'minute-picker-wrap', - _secondWrapClass = 'second-picker-wrap', - _suggestWrapClass = 'suggest-picker-wrap', - _timeSuggestWrapClass = 'time-suggest-wrap', - _buttonWrapClass = 'button-wrap', - _clearWrapClass = 'clear-wrap', + return rightclick; + } + + function getScore() { + return parseInt(_scoreWrap.html(), 10); + } + + function increase() { + score = getScore(); + score == options.max ? score = (options.loop ? options.min : score) : ++score; + _scoreWrap.html(padLeft(score)); + return score; + } + + function decrease() { + score = getScore(); + score == options.min ? score = (options.loop ? options.max : score) : --score; + _scoreWrap.html(padLeft(score)); + return score; + } + + function padLeft(val) { + if (val.toString().length >= options.digit) return String(val); + return padLeft("0" + val); + } + +}; + +/* Timepicker plugin + * Use timeboard to pick up any time. + */ +$.fn.timepicker = function(options) { + if (!this.length) return this; + + var debug = false, + _input = this, + _timepicker = null, + _timepickerPosition = null, + _hourpicker = null, + _minutepicker = null, + _secondpicker = null, + _hourScore = null, + _minuteScore = null, + _secondScore = null, + _timepickerShowing = false, + _mainClass = 'timepicker', + _inputClass = 'timepicker-input', + _mainWrap = 'time-picker-wrap', + _timeboardWrapClass = 'time-board-wrap', + _hourWrapClass = 'hour-picker-wrap', + _minuteWrapClass = 'minute-picker-wrap', + _secondWrapClass = 'second-picker-wrap', + _suggestWrapClass = 'suggest-picker-wrap', + _timeSuggestWrapClass = 'time-suggest-wrap', + _buttonWrapClass = 'button-wrap', + _clearWrapClass = 'clear-wrap', _clearText = 'Clear', // Display text for clear link - _closeWrapClass = 'close-wrap', + _closeWrapClass = 'close-wrap', _closeText = 'Close', // Display text for close link - _suggestTimeNames = { - 'Now': null, // Calculate when needed - '6 a.m.': [6, 0, 0], - 'Noon': [12, 0, 0], - '8 p.m.': [20, 0, 0], - 'Midnight': [0, 0, 0] - }; - - var _html = '<div id="' + _mainWrapper + '" class="hidden"><table><tbody><tr class="' - + _timeboardWrapClass + '"><td class="' + _hourWrapClass - + '"></td><td>:</td><td class="' + _minuteWrapClass - + '"></td><td>:</td><td class="' + _secondWrapClass - + '"></td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Now</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">6 a.m.</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Noon</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">8 p.m.</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Midnight</td></tr><tr class="' + _buttonWrapClass - + '"><td class="' + _clearWrapClass + '" colspan="2"><span>' + _clearText - + '</span></td><td></td><td class="' + _closeWrapClass - + '" colspan="2"><span>' + _closeText - + '</span></td></tr></tbody></table></div>'; - - /* Default options - options = $.extend({ }, options || {}); - */ - - this.focus(showTimepicker).click(showTimepicker).keydown(doKeyDown); - - function initialTimepicker() { - _input.after(_html); - _timepicker = $('#' + _mainWrapper); - _hourpicker = _timepicker.find('td.' + _hourWrapClass), - _minutepicker = _timepicker.find('td.' + _minuteWrapClass), - _secondpicker = _timepicker.find('td.' + _secondWrapClass); - _hourpicker.scoreboard({ 'min': 0, 'max': 23, 'init': 0, 'digit': 2 }); - _minutepicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); - _secondpicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); - _hourScore = _hourpicker.find('.score span'); - _minuteScore = _minutepicker.find('.score span'); - _secondScore = _secondpicker.find('.score span'); - - _timepicker.find('td.' + _clearWrapClass).click(doClear); - _timepicker.find('td.' + _closeWrapClass).click(doClose); - _timepicker.find('tr.' + _timeSuggestWrapClass + ' td').click(doTimeSuggest); + _suggestTimeNames = { + 'Now': null, // Calculate when needed + '6 a.m.': [6, 0, 0], + 'Noon': [12, 0, 0], + '8 p.m.': [20, 0, 0], + 'Midnight': [0, 0, 0] + }; + + var _html = '<div id="' + _mainWrap + '" class="' + _mainClass + + '" style="display:none;"><table><tbody><tr class="' + + _timeboardWrapClass + '"><td class="' + _hourWrapClass + + '"></td><td>:</td><td class="' + _minuteWrapClass + + '"></td><td>:</td><td class="' + _secondWrapClass + + '"></td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Now</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">6 a.m.</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Noon</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">8 p.m.</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Midnight</td></tr><tr class="' + _buttonWrapClass + + '"><td class="' + _clearWrapClass + '" colspan="2"><span>' + _clearText + + '</span></td><td></td><td class="' + _closeWrapClass + + '" colspan="2"><span>' + _closeText + + '</span></td></tr></tbody></table></div>'; + + /* Default options + */ + options = $.extend({ + showAnim: 'show', // name of jQuery animation for popup + duration: 'normal', // Duration of display/closure + defaultTime: '00:00:00' // Used when field is blank: 00:00:00 + }, options || {}); + + this.val(options.defaultTime); + this.focus(showTimepicker).click(showTimepicker).keydown(doKeyDown); + $(document.body).mousedown(checkExternalClick); + + function initialTimepicker() { + _input.after(_html); + _input.addClass(_inputClass); + _timepicker = $('#' + _mainWrap); + _hourpicker = _timepicker.find('td.' + _hourWrapClass), + _minutepicker = _timepicker.find('td.' + _minuteWrapClass), + _secondpicker = _timepicker.find('td.' + _secondWrapClass); + _hourpicker.scoreboard({ 'min': 0, 'max': 23, 'init': 0, 'digit': 2 }); + _minutepicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); + _secondpicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); + _hourScore = _hourpicker.find('.score span'); + _minuteScore = _minutepicker.find('.score span'); + _secondScore = _secondpicker.find('.score span'); + + _timepicker.find('td.' + _clearWrapClass).click(doClear); + _timepicker.find('td.' + _closeWrapClass).click(doClose); + _timepicker.find('tr.' + _timeSuggestWrapClass + ' td').click(doTimeSuggest); + + if (options.defaultTime) { + var time = options.defaultTime.split(':'); + setTime(time[0], time[1], time[2]); } - - function showTimepicker() { - if (!_timepickerShowing) { - var current = _input.val(); - if (current.match(/^[0-9]{1,2}:[0-9]{1,2}(:[0-9]{1,2})?$/)) { - current = current.split(':'); - setTime(current[0], current[1], current[2]); - } - if (!_timepicker) initialTimepicker(); - _timepicker.removeClass('hidden'); - setPosition(this); - _timepickerShowing = true; + } + + function showTimepicker() { + if (_timepicker == null) initialTimepicker(); + if (!_timepickerShowing) { + var current = _input.val(); + if (current.match(/^[0-9]{1,2}:[0-9]{1,2}(:[0-9]{1,2})?$/)) { + current = current.split(':'); + setTime(current[0], current[1], current[2]); } + setPosition(this); + switch (options.showAnim) { + case 'show': _timepicker.show(options.duration); + break; + case 'fade': _timepicker.fadeIn(options.duration); + break; + case 'slide': _timepicker.slideDown(options.duration); + break; + } + _timepickerShowing = true; + return; } + } - function hideTimepicker() { - if (_timepickerShowing) { - _timepicker.addClass('hidden'); - _input.focus(); - _timepickerShowing = false; + function hideTimepicker() { + if (_timepickerShowing) { + switch (options.showAnim) { + case 'show': _timepicker.hide(options.duration); + break; + case 'fade': _timepicker.fadeOut(options.duration); + break; + case 'slide': _timepicker.slideUp(options.duration); + break; } + _timepickerShowing = false; + return; } - - // Set position of timepicker - function setPosition(input) { - var _inputPosition = $(input).offset(); - _timepickerPosition = [_inputPosition.left, _inputPosition.top + input.offsetHeight]; - if ($.browser.opera) { // correction for Opera when scrolled - _timepickerPosition[0] -= document.documentElement.scrollLeft; + } + + function toggleTimepicker() { + if (_timepickerShowing) hideTimepicker(); + else showTimepicker(); + } + + // Set position of timepicker + function setPosition(input) { + var _inputPosition = $(input).offset(); + _timepickerPosition = [_inputPosition.left, _inputPosition.top + input.offsetHeight]; + if ($.browser.opera) { // correction for Opera when scrolled + _timepickerPosition[0] -= document.documentElement.scrollLeft; _timepickerPosition[1] -= document.documentElement.scrollTop; - } - _timepicker.css({ 'left': _timepickerPosition[0] + 'px', - 'top': _timepickerPosition[1] + 'px' }); } - - function doKeyDown(e) { - var handled = true; - if (_timepickerShowing) { - switch (e.keyCode) { - // Tab key - case 9: getTime(); - hideTimepicker(); - break; - // ESC key - case 27: hideTimepicker(); - break; - } - } else { - handled = false; + _timepicker.css({ 'left': _timepickerPosition[0] + 'px', + 'top': _timepickerPosition[1] + 'px' }); + } + + function doKeyDown(e) { + var handled = true; + if (_timepickerShowing) { + switch (e.keyCode) { + // Tab key + case 9: getTime(); + hideTimepicker(); + break; + // ESC key + case 27: hideTimepicker(); + break; } + } else { + handled = false; + } if (handled) { e.preventDefault(); - e.stopPropagation(); + e.stopPropagation(); } + } + + function doTimeSuggest(e) { + var suggest = $(this).html(); + if (suggest == 'Now') { + // If suggests "Now", calculate time immediately + var now = new Date(); + _suggestTimeNames[suggest] = [now.getHours(), now.getMinutes(), now.getSeconds()]; } - - function doTimeSuggest(e) { - var suggest = $(this).html(); - if (suggest == 'Now') { - // If suggests "Now", calculate time immediately - var now = new Date(); - _suggestTimeNames[suggest] = [now.getHours(), now.getMinutes(), now.getSeconds()]; - } - var time = _suggestTimeNames[suggest]; - setTime(time[0], time[1], time[2]); - return time; - } - - function doClear() { - // Clear time in the ``_input`` - _input.val(""); - hideTimepicker(); - } - - function doClose() { - // Get time on board and insert the time into ``_input`` - getTime(); + var time = _suggestTimeNames[suggest]; + setTime(time[0], time[1], time[2]); + return time; + } + + function doClear() { + // Clear time in the ``_input`` + _input.val(""); + hideTimepicker(); + return; + } + + function doClose() { + // Get time on board and insert the time into ``_input`` + getTime(); + hideTimepicker(); + return; + } + + function getTime() { + // Get time on board + var time = _hourScore.html() + ':' + _minuteScore.html() + ':' + _secondScore.html(); + _input.val(time); + return time; + } + + function setTime(hour, minute, second) { + // Set time on board + if (typeof hour == 'undefined') hour = 0; + if (typeof minute == 'undefined') minute = 0; + if (typeof second == 'undefined') second = 0; + _hourScore.html(padLeft(hour)); + _minuteScore.html(padLeft(minute)); + _secondScore.html(padLeft(second)); + return getTime(); + } + + function padLeft(val) { + if (val.toString().length >= 2) return String(val); + return padLeft("0" + val); + } + + function checkExternalClick(e) { + if (!_timepickerShowing) return; + var target = $(e.target); + if ((target.parents('#' + _mainWrap).length == 0) && + !target.hasClass(_inputClass) && + !target.hasClass(_mainClass)) hideTimepicker(); - } - - function getTime() { - // Get time on board - var time = _hourScore.html() + ':' + _minuteScore.html() + ':' + _secondScore.html(); - _input.val(time); - return time; - } - - function setTime(hour, minute, second) { - // Set time on board - if (typeof hour == 'undefined') hour = 0; - if (typeof minute == 'undefined') minute = 0; - if (typeof second == 'undefined') second = 0; - _hourScore.html(padLeft(hour)); - _minuteScore.html(padLeft(minute)); - _secondScore.html(padLeft(second)); - return getTime(); - } - - function padLeft(val) { - if (val.toString().length >= 2) return String(val); - return padLeft("0" + val); - } + } - }; +}; - })(jQuery); +})(jQuery); demo/timepicker.js @@ -1,303 +1,343 @@ /* - * jQuery Timepicker Plugin + * Yet Another jQuery Timepicker Plugin * version 0.2 * * Copyright (c) 2008 Wu Yuntao <http://luliban.com/blog/> - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. + * Dual licensed under the MIT (MIT-LICENSE.txt) + * and GPL (GPL-LICENSE.txt) licenses. + * + * http://plugins.jquery.com/project/yatimepicker * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. */ (function($) { - /* Scoreboard plugin. - * Used as a single hour, minute and second picker in Timepicker +var PROP_NAME = 'timepicker'; + +/* Scoreboard plugin. + * Used as a single hour, minute and second picker in Timepicker + */ +$.fn.scoreboard = function(options) { + if (!this.length) return this; + + var debug = false, + increaseInterval = null, + decreaseInterval = null, + _frequency = 200, + _mainWrapClass = 'scoreboard', + _increaseButtonClass = 'increase-button', + _decreaseButtonClass = 'decrease-button', + _scoreWrapClass = 'score'; + + options = $.extend({ + /* minimum value of score */ + min: 0, + /* maximum value of score */ + max: 20, + /* initial value of score */ + init: 10, + /* if ``loop`` is true, value turns to its maxium when reaching its minimum, + * and vice versa */ + loop: true, + /* digit of score */ + digit: 2 + }, options || {}); + /* Verify options */ + if (options.min >= options.max) throw new Error("``max`` cannot less than ``min``"); + if (options.init < options.min || options.init > options.max) + throw new Error("``init`` cannot less than ``min`` or great than ``max``"); + var score = options.init; + + /* HTML Template */ + var _html = '<div class="' + _mainWrapClass + '"><div class="' + _increaseButtonClass + + '"><span></span></div><div class="' + _scoreWrapClass + '"><span>' + + padLeft(score) + '</span></div><div class="' + _decreaseButtonClass + + '"><span></span></div></div>'; + this.html(_html); + var _increaseButton = this.find('div.' + _increaseButtonClass + ' span'); + var _decreaseButton = this.find('div.' + _decreaseButtonClass + ' span'); + var _scoreWrap = this.find('div.' + _scoreWrapClass + ' span'); + + /* When increase-button clicked, score increases. When button is continuously pressed, + * score increases every 0.2 second. The same as decrease-button. */ - $.fn.scoreboard = function(options) { - if (!this.length) return this; - - var debug = false, - increaseInterval = null, - decreaseInterval = null, - _frequency = 200, - _mainWrapperClass = 'scoreboard', - _increaseButtonClass = 'increase-button', - _decreaseButtonClass = 'decrease-button', - _scoreWrapperClass = 'score'; - - options = $.extend({ - /* minimum value of score */ - min: 0, - /* maximum value of score */ - max: 20, - /* initial value of score */ - init: 10, - /* if ``loop`` is true, value turns to its maxium when reaching its minimum, - * and vice versa */ - loop: true, - /* digit of score */ - digit: 2 - }, options || {}); - /* Verify options */ - if (options.min >= options.max) throw new Error("``max`` cannot less than ``min``"); - if (options.init < options.min || options.init > options.max) - throw new Error("``init`` cannot less than ``min`` or great than ``max``"); - var score = options.init; - - /* HTML Template */ - var _html = '<div class="' + _mainWrapperClass + '"><div class="' + _increaseButtonClass - + '"><span></span></div><div class="' + _scoreWrapperClass + '"><span>' - + padLeft(score) + '</span></div><div class="' + _decreaseButtonClass - + '"><span></span></div></div>'; - this.html(_html); - var _increaseButton = this.find('div.' + _increaseButtonClass + ' span'); - var _decreaseButton = this.find('div.' + _decreaseButtonClass + ' span'); - var _scoreWrapper = this.find('div.' + _scoreWrapperClass + ' span'); - - /* When increase-button clicked, score increases. When button is continuously pressed, - * score increases every 0.2 second. The same as decrease-button. - */ - _increaseButton.click(function(e) { - increase(); - }).mousedown(function(e) { - if (!isRightClick(e)) increaseInterval = window.setInterval(increase, _frequency); - }).mouseup(function(e) { - if (!isRightClick(e)) window.clearInterval(increaseInterval); - }).mouseout(function(e) { - if (!isRightClick(e)) window.clearInterval(increaseInterval); - }); - - _decreaseButton.click(function(e) { - decrease(); - }).mousedown(function(e) { - if (!isRightClick(e)) decreaseInterval = window.setInterval(decrease, _frequency); - }).mouseup(function(e) { - if (!isRightClick(e)) window.clearInterval(decreaseInterval); - }).mouseout(function(e) { - if (!isRightClick(e)) window.clearInterval(decreaseInterval); - }); - - function isRightClick(e) { - var rightclick; + _increaseButton.click(function(e) { + increase(); + }).mousedown(function(e) { + if (!isRightClick(e)) increaseInterval = window.setInterval(increase, _frequency); + }).mouseup(function(e) { + if (!isRightClick(e)) window.clearInterval(increaseInterval); + }).mouseout(function(e) { + if (!isRightClick(e)) window.clearInterval(increaseInterval); + }); + + _decreaseButton.click(function(e) { + decrease(); + }).mousedown(function(e) { + if (!isRightClick(e)) decreaseInterval = window.setInterval(decrease, _frequency); + }).mouseup(function(e) { + if (!isRightClick(e)) window.clearInterval(decreaseInterval); + }).mouseout(function(e) { + if (!isRightClick(e)) window.clearInterval(decreaseInterval); + }); + + function isRightClick(e) { + var rightclick; if (!e) var e = window.event; if (e.which) rightclick = (e.which == 3); else if (e.button) rightclick = (e.button == 2); - return rightclick; - } - - function getScore() { - return parseInt(_scoreWrapper.html(), 10); - } - - function increase() { - score = getScore(); - score == options.max ? score = (options.loop ? options.min : score) : ++score; - _scoreWrapper.html(padLeft(score)); - return score; - } - - function decrease() { - score = getScore(); - score == options.min ? score = (options.loop ? options.max : score) : --score; - _scoreWrapper.html(padLeft(score)); - return score; - } - - function padLeft(val) { - if (val.toString().length >= options.digit) return String(val); - return padLeft("0" + val); - } - - }; - - /* Timepicker plugin - * Use timeboard to pick up any time. - */ - $.fn.timepicker = function(options) { - if (!this.length) return this; - - var debug = false, - _input = this, - _timepicker = null, - _timepickerPosition = null, - _hourpicker = null, - _minutepicker = null, - _secondpicker = null, - _hourScore = null, - _minuteScore = null, - _secondScore = null, - _timepickerShowing = false, - _mainWrapper = 'time-picker-wrap', - _timeboardWrapClass = 'time-board-wrap', - _hourWrapClass = 'hour-picker-wrap', - _minuteWrapClass = 'minute-picker-wrap', - _secondWrapClass = 'second-picker-wrap', - _suggestWrapClass = 'suggest-picker-wrap', - _timeSuggestWrapClass = 'time-suggest-wrap', - _buttonWrapClass = 'button-wrap', - _clearWrapClass = 'clear-wrap', + return rightclick; + } + + function getScore() { + return parseInt(_scoreWrap.html(), 10); + } + + function increase() { + score = getScore(); + score == options.max ? score = (options.loop ? options.min : score) : ++score; + _scoreWrap.html(padLeft(score)); + return score; + } + + function decrease() { + score = getScore(); + score == options.min ? score = (options.loop ? options.max : score) : --score; + _scoreWrap.html(padLeft(score)); + return score; + } + + function padLeft(val) { + if (val.toString().length >= options.digit) return String(val); + return padLeft("0" + val); + } + +}; + +/* Timepicker plugin + * Use timeboard to pick up any time. + */ +$.fn.timepicker = function(options) { + if (!this.length) return this; + + var debug = false, + _input = this, + _timepicker = null, + _timepickerPosition = null, + _hourpicker = null, + _minutepicker = null, + _secondpicker = null, + _hourScore = null, + _minuteScore = null, + _secondScore = null, + _timepickerShowing = false, + _mainClass = 'timepicker', + _inputClass = 'timepicker-input', + _mainWrap = 'time-picker-wrap', + _timeboardWrapClass = 'time-board-wrap', + _hourWrapClass = 'hour-picker-wrap', + _minuteWrapClass = 'minute-picker-wrap', + _secondWrapClass = 'second-picker-wrap', + _suggestWrapClass = 'suggest-picker-wrap', + _timeSuggestWrapClass = 'time-suggest-wrap', + _buttonWrapClass = 'button-wrap', + _clearWrapClass = 'clear-wrap', _clearText = 'Clear', // Display text for clear link - _closeWrapClass = 'close-wrap', + _closeWrapClass = 'close-wrap', _closeText = 'Close', // Display text for close link - _suggestTimeNames = { - 'Now': null, // Calculate when needed - '6 a.m.': [6, 0, 0], - 'Noon': [12, 0, 0], - '8 p.m.': [20, 0, 0], - 'Midnight': [0, 0, 0] - }; - - var _html = '<div id="' + _mainWrapper + '" class="hidden"><table><tbody><tr class="' - + _timeboardWrapClass + '"><td class="' + _hourWrapClass - + '"></td><td>:</td><td class="' + _minuteWrapClass - + '"></td><td>:</td><td class="' + _secondWrapClass - + '"></td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Now</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">6 a.m.</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Noon</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">8 p.m.</td></tr><tr class="' + _timeSuggestWrapClass - + '"><td colspan="5">Midnight</td></tr><tr class="' + _buttonWrapClass - + '"><td class="' + _clearWrapClass + '" colspan="2"><span>' + _clearText - + '</span></td><td></td><td class="' + _closeWrapClass - + '" colspan="2"><span>' + _closeText - + '</span></td></tr></tbody></table></div>'; - - /* Default options - options = $.extend({ }, options || {}); - */ - - this.focus(showTimepicker).click(showTimepicker).keydown(doKeyDown); - - function initialTimepicker() { - _input.after(_html); - _timepicker = $('#' + _mainWrapper); - _hourpicker = _timepicker.find('td.' + _hourWrapClass), - _minutepicker = _timepicker.find('td.' + _minuteWrapClass), - _secondpicker = _timepicker.find('td.' + _secondWrapClass); - _hourpicker.scoreboard({ 'min': 0, 'max': 23, 'init': 0, 'digit': 2 }); - _minutepicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); - _secondpicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); - _hourScore = _hourpicker.find('.score span'); - _minuteScore = _minutepicker.find('.score span'); - _secondScore = _secondpicker.find('.score span'); - - _timepicker.find('td.' + _clearWrapClass).click(doClear); - _timepicker.find('td.' + _closeWrapClass).click(doClose); - _timepicker.find('tr.' + _timeSuggestWrapClass + ' td').click(doTimeSuggest); + _suggestTimeNames = { + 'Now': null, // Calculate when needed + '6 a.m.': [6, 0, 0], + 'Noon': [12, 0, 0], + '8 p.m.': [20, 0, 0], + 'Midnight': [0, 0, 0] + }; + + var _html = '<div id="' + _mainWrap + '" class="' + _mainClass + + '" style="display:none;"><table><tbody><tr class="' + + _timeboardWrapClass + '"><td class="' + _hourWrapClass + + '"></td><td>:</td><td class="' + _minuteWrapClass + + '"></td><td>:</td><td class="' + _secondWrapClass + + '"></td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Now</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">6 a.m.</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Noon</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">8 p.m.</td></tr><tr class="' + _timeSuggestWrapClass + + '"><td colspan="5">Midnight</td></tr><tr class="' + _buttonWrapClass + + '"><td class="' + _clearWrapClass + '" colspan="2"><span>' + _clearText + + '</span></td><td></td><td class="' + _closeWrapClass + + '" colspan="2"><span>' + _closeText + + '</span></td></tr></tbody></table></div>'; + + /* Default options + */ + options = $.extend({ + showAnim: 'show', // name of jQuery animation for popup + duration: 'normal', // Duration of display/closure + defaultTime: '00:00:00' // Used when field is blank: 00:00:00 + }, options || {}); + + this.val(options.defaultTime); + this.focus(showTimepicker).click(showTimepicker).keydown(doKeyDown); + $(document.body).mousedown(checkExternalClick); + + function initialTimepicker() { + _input.after(_html); + _input.addClass(_inputClass); + _timepicker = $('#' + _mainWrap); + _hourpicker = _timepicker.find('td.' + _hourWrapClass), + _minutepicker = _timepicker.find('td.' + _minuteWrapClass), + _secondpicker = _timepicker.find('td.' + _secondWrapClass); + _hourpicker.scoreboard({ 'min': 0, 'max': 23, 'init': 0, 'digit': 2 }); + _minutepicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); + _secondpicker.scoreboard({ 'min': 0, 'max': 59, 'init': 0, 'digit': 2 }); + _hourScore = _hourpicker.find('.score span'); + _minuteScore = _minutepicker.find('.score span'); + _secondScore = _secondpicker.find('.score span'); + + _timepicker.find('td.' + _clearWrapClass).click(doClear); + _timepicker.find('td.' + _closeWrapClass).click(doClose); + _timepicker.find('tr.' + _timeSuggestWrapClass + ' td').click(doTimeSuggest); + + if (options.defaultTime) { + var time = options.defaultTime.split(':'); + setTime(time[0], time[1], time[2]); } - - function showTimepicker() { - if (!_timepickerShowing) { - var current = _input.val(); - if (current.match(/^[0-9]{1,2}:[0-9]{1,2}(:[0-9]{1,2})?$/)) { - current = current.split(':'); - setTime(current[0], current[1], current[2]); - } - if (!_timepicker) initialTimepicker(); - _timepicker.removeClass('hidden'); - setPosition(this); - _timepickerShowing = true; + } + + function showTimepicker() { + if (_timepicker == null) initialTimepicker(); + if (!_timepickerShowing) { + var current = _input.val(); + if (current.match(/^[0-9]{1,2}:[0-9]{1,2}(:[0-9]{1,2})?$/)) { + current = current.split(':'); + setTime(current[0], current[1], current[2]); } + setPosition(this); + switch (options.showAnim) { + case 'show': _timepicker.show(options.duration); + break; + case 'fade': _timepicker.fadeIn(options.duration); + break; + case 'slide': _timepicker.slideDown(options.duration); + break; + } + _timepickerShowing = true; + return; } + } - function hideTimepicker() { - if (_timepickerShowing) { - _timepicker.addClass('hidden'); - _input.focus(); - _timepickerShowing = false; + function hideTimepicker() { + if (_timepickerShowing) { + switch (options.showAnim) { + case 'show': _timepicker.hide(options.duration); + break; + case 'fade': _timepicker.fadeOut(options.duration); + break; + case 'slide': _timepicker.slideUp(options.duration); + break; } + _timepickerShowing = false; + return; } - - // Set position of timepicker - function setPosition(input) { - var _inputPosition = $(input).offset(); - _timepickerPosition = [_inputPosition.left, _inputPosition.top + input.offsetHeight]; - if ($.browser.opera) { // correction for Opera when scrolled - _timepickerPosition[0] -= document.documentElement.scrollLeft; + } + + function toggleTimepicker() { + if (_timepickerShowing) hideTimepicker(); + else showTimepicker(); + } + + // Set position of timepicker + function setPosition(input) { + var _inputPosition = $(input).offset(); + _timepickerPosition = [_inputPosition.left, _inputPosition.top + input.offsetHeight]; + if ($.browser.opera) { // correction for Opera when scrolled + _timepickerPosition[0] -= document.documentElement.scrollLeft; _timepickerPosition[1] -= document.documentElement.scrollTop; - } - _timepicker.css({ 'left': _timepickerPosition[0] + 'px', - 'top': _timepickerPosition[1] + 'px' }); } - - function doKeyDown(e) { - var handled = true; - if (_timepickerShowing) { - switch (e.keyCode) { - // Tab key - case 9: getTime(); - hideTimepicker(); - break; - // ESC key - case 27: hideTimepicker(); - break; - } - } else { - handled = false; + _timepicker.css({ 'left': _timepickerPosition[0] + 'px', + 'top': _timepickerPosition[1] + 'px' }); + } + + function doKeyDown(e) { + var handled = true; + if (_timepickerShowing) { + switch (e.keyCode) { + // Tab key + case 9: getTime(); + hideTimepicker(); + break; + // ESC key + case 27: hideTimepicker(); + break; } + } else { + handled = false; + } if (handled) { e.preventDefault(); - e.stopPropagation(); + e.stopPropagation(); } + } + + function doTimeSuggest(e) { + var suggest = $(this).html(); + if (suggest == 'Now') { + // If suggests "Now", calculate time immediately + var now = new Date(); + _suggestTimeNames[suggest] = [now.getHours(), now.getMinutes(), now.getSeconds()]; } - - function doTimeSuggest(e) { - var suggest = $(this).html(); - if (suggest == 'Now') { - // If suggests "Now", calculate time immediately - var now = new Date(); - _suggestTimeNames[suggest] = [now.getHours(), now.getMinutes(), now.getSeconds()]; - } - var time = _suggestTimeNames[suggest]; - setTime(time[0], time[1], time[2]); - return time; - } - - function doClear() { - // Clear time in the ``_input`` - _input.val(""); - hideTimepicker(); - } - - function doClose() { - // Get time on board and insert the time into ``_input`` - getTime(); + var time = _suggestTimeNames[suggest]; + setTime(time[0], time[1], time[2]); + return time; + } + + function doClear() { + // Clear time in the ``_input`` + _input.val(""); + hideTimepicker(); + return; + } + + function doClose() { + // Get time on board and insert the time into ``_input`` + getTime(); + hideTimepicker(); + return; + } + + function getTime() { + // Get time on board + var time = _hourScore.html() + ':' + _minuteScore.html() + ':' + _secondScore.html(); + _input.val(time); + return time; + } + + function setTime(hour, minute, second) { + // Set time on board + if (typeof hour == 'undefined') hour = 0; + if (typeof minute == 'undefined') minute = 0; + if (typeof second == 'undefined') second = 0; + _hourScore.html(padLeft(hour)); + _minuteScore.html(padLeft(minute)); + _secondScore.html(padLeft(second)); + return getTime(); + } + + function padLeft(val) { + if (val.toString().length >= 2) return String(val); + return padLeft("0" + val); + } + + function checkExternalClick(e) { + if (!_timepickerShowing) return; + var target = $(e.target); + if ((target.parents('#' + _mainWrap).length == 0) && + !target.hasClass(_inputClass) && + !target.hasClass(_mainClass)) hideTimepicker(); - } - - function getTime() { - // Get time on board - var time = _hourScore.html() + ':' + _minuteScore.html() + ':' + _secondScore.html(); - _input.val(time); - return time; - } - - function setTime(hour, minute, second) { - // Set time on board - if (typeof hour == 'undefined') hour = 0; - if (typeof minute == 'undefined') minute = 0; - if (typeof second == 'undefined') second = 0; - _hourScore.html(padLeft(hour)); - _minuteScore.html(padLeft(minute)); - _secondScore.html(padLeft(second)); - return getTime(); - } - - function padLeft(val) { - if (val.toString().length >= 2) return String(val); - return padLeft("0" + val); - } + } - }; +}; - })(jQuery); +})(jQuery); timepicker.js 4002df9bc4590fd6e18b0179c924270b74a6372e wu yuntao wyt.py@thonic.org http://github.com/wuyuntao/timepicker/commit/b6596969817843a444049b8c79e6fe45fa2cbdab b6596969817843a444049b8c79e6fe45fa2cbdab 2008-08-11T22:05:58-07:00 2008-08-11T22:05:58-07:00 Add effects e814932bcd0390677d4c2ef2030fb8ff93789a11 wu yuntao wyt.py@thonic.org