mega

jQuery.ptTimeSelect Information & Tutorials…

 
jQuery.ptTimeSelect thumb 300x170
jQuery.ptTimeSelect thumb 300x170
jQuery.ptTimeSelect thumb 300x170

 
Overview
 

 
 
 
 
 
 
 
 
 
 
criteria 1
00


 


Bottom Line

ABOUT jQuery.ptTimeSelect v0.8.0   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. AUTHOR Paul Tavares, http://www.purtuga.com http://pttimeselect.sourceforge.net LICENSE Copyright (c) 2007-2012 Paul T. http://www.purtuga.com Licensed under the same terms as jQuery: MIT – http://www.opensource.org/licenses/mit-license.php GPL – http://www.opensource.org/licenses/gpl-license.php […]

0
Posted February 6, 2014 by Bandish Patel

 
Full Article
 
 

jQuery.ptTimeSelect thumb 300x170

ABOUT

jQuery.ptTimeSelect v0.8.0

Download Hear : 

jQuery.ptTimeSelect-0.8.zip

 

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.

AUTHOR

Paul Tavares, http://www.purtuga.com

http://pttimeselect.sourceforge.net

LICENSE

Copyright (c) 2007-2012 Paul T. http://www.purtuga.com

Licensed under the same terms as jQuery:

User can pick whichever one applies best for their project and does not have to contact me.

CHANGE LOG

Version 0.8

INSTALL

jQuery.ptTimeSelect includes the following 2 files that must be deployed on the webserver and included in the display page:

  1. jquery.ptTimeSelect.css
  2. 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.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>

_BUILD_INCLUDE_DOCUMENTATION_

© Copyright by Paul


Bandish Patel

 


0 Comments



Be the first to comment!


Leave a Response


(required)

Powered By Indic IME