jQuery.ptTimeSelect

A jQuery Plugin

Download

jQuery.ptTimeSelect

Required

www.jquery.com
Dimensions plugin

Support

Via the Help Forum at SourceForge. Click here to post your question/problem.

Usage

To use this plug in, call the ptTimeSelect() method to add the link next to each matched element.

$('').ptTimeSelect({opt});

PARAMS

{opt} - {OBJECT} (Optional) Object with custom options for the selected elements.

The following options can be defined inside an object and passed as the first argument to the method above:

bgcolor	The background color for the popup. NOTE... This value will be ignored if a cntr_class is set.
border_color	The color to be associated with elements that display a border. NOTE... This value will be ignored if a cntr_class is set.
labels	Object ({}) with the label definitions below.
labels.x	The value to be used inside of the popup close link. This can also be an image (<img>). Default is [Close]
labels.popup_link	The text to be used inside of the link created next to the imput field. This can also be an image (<img>). Default is [T]
labels.set_time	The text to be used inside of the link at the bottom of the popup, that sets the time defined back to the input field. This value can also be an image. Default is SET
cntr_width	The width of the entire container that holds the time definition element.
cntr_class	Class to be associated with the entire container of the popup area. This is a <div> element that contains a table and the set button. When this class is set the bgcolor, border_color and cntr_width are ignored.

Demo

Example 1

Default call with no params defined. [view source]



$('#sample1>input').ptTimeSelect();

Example 2

Call with customized colors. [view source]



$('#sample2>input').ptTimeSelect({
	labels: {
		x: '[X]',
		popup_link: '[Pick Time]',
		set_time: 'Set New Time'
	},
	bgcolor: '#fff',
	border_color: '#ff0000'
});

Example 3

Call with customized class by the name of timeCntr. To view the definition of this class, do a view source on this page. [view source]



$('#sample3>input').ptTimeSelect({
	labels: {
		x: '[close this]',
		popup_link: '[Time]',
		set_time: 'save it'
	},
	cntr_class: 'timeCntr'
});

ptTimeSelect is a jQuery plugin that provides a UI for a user to define and set a time on a user form. It requires jQuery (obviously) as well as the dimmention.js plugin (available from jQuery as well).