jquery. ptTimeSelect.js
Index

jquery. ptTimeSelect.js

jQuery plug in for displaying a popup that allows a user to define a time and set that time back to a form’s input field.

AUTHOR

Paul T.

DEPENDECIES

LICENSE

Copyright © 2007 Paul T.  (purtuga.com) Dual licensed under the:

INSTALLATION

This file jquery.ptTimeSelect.js is the only one required.  To install, simply copy it to the same directory as jquery.js and include it in the html pages requiring it’s functionality.

USAGE

Usage of this plugin is via the $(ele).ptTimeSelect() method. all others are internal to this plugin.

The default apperance can be controled by changing the value in jQuery.ptTimeSelect.html

LAST UPDATED

  • $Date: 2007/05/17 16:59:53 $
  • $Author: paulinho4u $
  • $Revision: 1.3 $
Summary
jquery. ptTimeSelect.js
jQuery plug in for displaying a popup that allows a user to define a time and set that time back to a form’s input field.
Functions
jQuery. ptTimeSelectInit()
Internal method.
Variables
jQuery. ptTimeSelect
Object that will store the static functions of ptTimeSelect()
Properties
jQuery. ptTimeSelect. _counter
Counter that insure that each element added to DOM has an unique id asociated with it.
jQuery. ptTimeSelect. _eleOpt
Object that maintains the options passed in for the element being built.
jQuery. ptTimeSelect. _curEle
property that holds the current input element.
jQuery. ptTimeSelect.html
Property holds the html options used in the generated code which is added to DOM.
Functions
jQuery. ptTimeSelect. getLabel()
Returns a label requested by caller.
jQuery. ptTimeSelect. getOpt()
Retrieves and returns options set by the user or the defaults
jQuery. ptTimeSelect. setHr(h)
Sets the hour selected by the user on the popup.
jQuery. ptTimeSelect. setMin(m)
Sets the minutes selected by the user on the popup.
jQuery. ptTimeSelect. setTime()
Takes the time defined by the user and sets it to the input element that the popup is currently opened for (as stored in jQuery.ptTimeSelect._curEle)
jQuery. ptTimeSelect. openCntr()
Displays the time definition area on the page, right below the input field.
jQuery. ptTimeSelect. closeCntr()
Closes (hides it) the popup container.
$(ele).ptTimeSelect()
PUBLIC METHOD.
HTML INSETED INTO DOM
Below is the html added to DOM for the time definition element.
Time Definition Popup
Matched Input Fields

Functions

jQuery. ptTimeSelectInit()

jQuery.ptTimeSelectInit = function ()

Internal method.  Called when page is initalized to add the time selection area to the DOM.

PARAMS

none.

RETURNS

nothing.

Variables

jQuery. ptTimeSelect

jQuery.ptTimeSelect

Object that will store the static functions of ptTimeSelect()

Properties

jQuery. ptTimeSelect. _counter

Counter that insure that each element added to DOM has an unique id asociated with it.

jQuery. ptTimeSelect. _eleOpt

Object that maintains the options passed in for the element being built.  Options are keept assicated with the unique id of the element created.

jQuery. ptTimeSelect. _curEle

property that holds the current input element.  It is set once the time selection popup is displayed to the user.

jQuery. ptTimeSelect.html

Property holds the html options used in the generated code which is added to DOM.  Any of these values can be overriden by either defining them directly (ex. jQuery.ptTimeSelect.html.bgcolor: ‘black’;) or [PREFERABLY] via the $(ele).ptTimeSelect() method.  The list of parameters that can be used to control the html are:

bgcolorThe background color for the popup.  NOTE...  This value will be ignored if a cntr_class is set.
border_colorThe color to be associated with elements that display a border NOTE...  This value will be ignored if a cntr_class is set.
labelsObject ({}) with the label definitions below.
labels.xThe value to be used inside of the popup close link.  This can also be an image (<img>).  Default is [Close]
labels.popup_linkThe 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_timeThe 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_widthThe width of the entire container that holds the time definition element.
cntr_classClass to be associated with the entire container of the popup area.  This is a <div> element that contains a table and the set button.  See the

Functions

jQuery. ptTimeSelect. getLabel()

Returns a label requested by caller.

PARAMS

lbl[string] Required.  Label token
uId[string] Optional.  Unique id of current timeDate instance.

RETURNS

  • [string] Label requested.

jQuery. ptTimeSelect. getOpt()

Retrieves and returns options set by the user or the defaults

PARAMS

oNameOptions name.
uIdUnique id of the element being processed.

RETURN

none

jQuery. ptTimeSelect. setHr(h)

Sets the hour selected by the user on the popup.

PARAMS

h[int] interger indicating the hour.  This value is the same as the text value displayed on the popup under the hour.  This value can also be the words AM or PM.

RETURN

none

jQuery. ptTimeSelect. setMin(m)

Sets the minutes selected by the user on the popup.

PARAMS

m[int] interger indicating the minutes.  This value is the same as the text value displayed on the popup under the minutes.

RETURN

none

jQuery. ptTimeSelect. setTime()

Takes the time defined by the user and sets it to the input element that the popup is currently opened for (as stored in jQuery.ptTimeSelect._curEle)

PARAMS

none.

RETURN

none

jQuery. ptTimeSelect. openCntr()

Displays the time definition area on the page, right below the input field.  Also sets the custom colors/css on the displayed area to what ever the input element options were set with.

PARAMS

uIdSTRING.  Id of the element for whom the area will be displayed.  This ID was created when the ptTimeSelect() method was called.

RETURN

nothing.

jQuery. ptTimeSelect. closeCntr()

Closes (hides it) the popup container.

PARAMS

none.

RETURN

none

$(ele).ptTimeSelect()

PUBLIC METHOD.  Displays an html popup that allows the user to define a time, which will then be written to the form element.  Each element matched will be wrapped with html code that will display a link next to the field that allows the user to view the popup area for defining the time.  This is the only method that is expected to be used externally for implementation into a web page.

PARAMS

{OBJECT}(Optional) An object in the same structure as the jQuery.ptTimeSelect.html global element.  Example:
{   bgcolor: '#fff',
    labels: {
        x: '[Close Window]',
        popup_link: '[Define Time]',
        setTime: 'Save Time'
    }
}

RETURNS

  • {object} jQuery

EXAMPLE

  • Example below will wrap an input box with id of ‘fooTime’ with a link that when click, will allow the user to define a time.
$('#fooTime').ptTimeSelect();

HTML INSETED INTO DOM

Below is the html added to DOM for the time definition element.  Use this when attempting to build CSS rules for controlling the appearance of the popup.

Summary
Time Definition Popup
Matched Input Fields

Time Definition Popup

<div style="border: 2px solid rgb(221, 219, 203);
              padding: 5px;
              overflow: visible;
              display: block;
              z-index: 10;
              left: 529px;
              top: 394px;
              position: absolute;
              width: 200px;
              background-color: rgb(235, 234, 227);
              height: 215px;"
      id="ptTimeSelectCntr" class="">
  <div style="padding: 2px;
              text-align: right;
              font-size: smaller;
              font-weight: bold;"
      id="ptTimeSelectCloseCntr">
    <a onclick="jQuery.ptTimeSelect.closeCntr();" href="javascript:%20void(0);">[Close]</a>
  </div>
  <table width="100%" cellspacing="0" cellpadding="2" border="1" id="ptTimeSelectTbl"
          style="border: 1px solid rgb(221, 219, 203); border-collapse: collapse;">
    <tbody>
      <tr valign="top" align="center">
        <td align="center" style="font-weight: bold; font-size: larger;" colspan="7">
          <div align="center" style="width: 100%;" id="ptTimeSelectUserTime">
            <span id="ptTimeSelectUserSelHr">12</span> :
            <span id="ptTimeSelectUserSelMin">00</span>
            <span id="ptTimeSelectUserSelAmPm">PM</span>
          </div>
        </td>
      </tr>
      <tr valign="top" align="center" style="font-weight: bold;">
        <th style="" colspan="4" id="ptTimeSelectHrLabel">Hour</th>
        <th style="" colspan="3" id="ptTimeSelectMinLabel">Minutes</th>
      </tr>
      <tr valign="top" align="center">
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">1</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">5</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">9</a></td>
        <td valign="middle" align="center" rowspan="2">
          <a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">AM</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">00</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">20</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">40</a></td>
      </tr>
      <tr valign="top" align="center">
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">2</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">6</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">10</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">05</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">25</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">45</a></td>
      </tr>
      <tr valign="top" align="center">
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">3</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">7</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">11</a></td>
        <td valign="middle" align="center" rowspan="2">
          <a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">PM</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">10</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">30</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">50</a></td>
      </tr>
      <tr valign="top" align="center">
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">4</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">8</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectHr" style="display: block;">12</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">15</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">35</a></td>
        <td><a href="javascript:%20void(0);" class="ptTimeSelectMin" style="display: block;">55</a></td>
      </tr>
    </tbody>
  </table><br>
  <div align="right" style="margin: 5px; text-align: right; font-weight: bold;" id="ptTimeSelectSetButton">
    <a onclick="jQuery.ptTimeSelect.setTime()" style="border: 1px solid rgb(221, 219, 203); padding: 5px;" href="javascript:%20void(0);">SET</a>
  </div><!--[if lte IE 6.5]>
      <iframe style="display:block; position:absolute;top: 0;left:0;z-index:-1;
              filter:Alpha(Opacity='0');width:3000px;height:3000px"></iframe><![endif]-->
</div>

Matched Input Fields

<div id="ptTimeSelect_1" style="display: inline;">
    <input name="s1Time2"/><a onclick="jQuery.ptTimeSelect.openCntr('ptTimeSelect_1');" href="javascript:void(0);">[T]</a>
</div>
Generated by Natural Docs
jQuery.ptTimeSelectInit = function ()
Internal method.
jQuery.ptTimeSelect
Object that will store the static functions of ptTimeSelect()
jQuery plug in for displaying a popup that allows a user to define a time and set that time back to a form’s input field.
PUBLIC METHOD.
Property holds the html options used in the generated code which is added to DOM.