JS Tutorial
- Overview
- Documents
jQuery.ptTimeSelect is a jQuery plugin for usage on input fields that displays a popup widget allowing a user to define a time, which is written back to an input field.
INSTALL
jQuery.ptTimeSelect includes the following 2 files that must be deployed on the webserver and included in the display page:
- jquery.ptTimeSelect.css
- jquery.ptTimeSelect.js
Both of these files are included in the zip file under the src folder.
PREREQUISITES
jQuery.ptTimeSelect plugin has the following prerequisites:
- jQuery http://www.jquery.com
- jQuery UI Style Sheet (css). No need for full javacript libraryhttp://www.jqueryui.com
jQuery.ptTimeSelect plugin should be included in the head section of the html page, after the entries for jQuery and jQuery UI Style sheet as follows:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="jquery.ptTimeSelect.css" />
<script type="text/javascript" src="jquery.ptTimeSelect.js"></script>
</head>
USAGE
jQuery.ptTimeSelect is called agaist input fields to attach a Time Select widget to each matched element. Each element, when focused upon, will display a time selection popoup where the user can define a time.
EXAMPLE
<input name="time" value="" />
<script type="text/javascript">
$(document).ready(function(){
$('input[name="time"]').ptTimeSelect();
});
</script>
INPUT PARAMETERS
The plugin accepts only one input parameter; a javascript object with the list of options. All options are optional. See below for a list of supported options
$('input[name="time"]').ptTimeSelect({
hoursLabel: 'HRS'
});
OPTIONS
- containerClass - A class to be associated with the popup widget. Default is undefined
- containerWidth - Css width for the container. Default is "20em".
- hoursLabel - Label for the Hours. Default is "Hours"
- minutesLabel - Label for the Mintues container. Default is "Minutes"
- setButtonLabel - Label for the Set button. Deafult is "Set"
- popupImage - The html element (ex. img or text) to be appended next to each input field and that will display the time select widget upon click. Default is blank ""
- zIndex - Integer for the popup widget z-index. Default is 10
- onBeforeShow - Function to be called before the widget is made visible to the user. Function is passed 2 arguments: 1) the input field as a jquery object and 2) the popup widget as a jquery object. Default is undefined
- onClose - Function to be called after closing the popup widget. Function is passed 1 argument: the input field as a jquery object. Default is undefined
- onFocusDisplay - True or False indicating if popup is auto displayed upon focus of the input field. Default is true
Example
$('input[name="time"]')
.ptTimeSelect({
containerClass: undefined,
containerWidth: undefined,
hoursLabel: 'Hour',
minutesLabel: 'Minutes',
setButtonLabel: 'Set',
popupImage: undefined,
onFocusDisplay: true,
zIndex: 10,
onBeforeShow: undefined,
onClose: undefined
});
RETURNS
Function will return a jQuery object with the input selection, thus maintaining jQuery's chainable nature.
<input name="time" value="" style="display:none;" />
<script type="text/javascript">
$(document).ready(function(){
$('input[name="time"]')
.ptTimeSelect({
zIndex: 100,
onBeforeShow: function(input, widget){
// do something before the widget is made visible.
}
})
.show();
});
</script>
