Skip to content

rocketmobile/ptTimeSelect

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ptTimeSelect

jQuery.ptTimeSelect Reloaded for Responsiveness

Originally From: http://sourceforge.net/projects/pttimeselect/

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

###http://webstandardcss.github.io/ptTimeSelect

<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>

DOCUMENTATION

Documentation can be found in the <doc> directory of the archive file
downloaded, including installation and usage.

EXAMPLES

Examples can be found in the <example> directory of the archive file
downloaded. They are in html format. An internext connection is need
in order to use jQuery and jQuery UI Style sheet from Google's CDN.

About

jQuery.ptTimeSelect Reloaded for Responsiveness

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 89.1%
  • CSS 10.9%