view release on metacpan or  search on metacpan

lib/Alien/GvaScript/CustomButtons.pod  view on Meta::CPAN

Buttons in their different states (idle, focus and hover) are easily
styled using css classes.

=head1 GvaScript.CustomButtons.Button 

For rendering a Single Button

=head2 Usage

=head3 Javascript

  var container = $('my_button_will_display_here');
  var button_properties = {
    id        : 'btn_'+(new Date()).getTime(),
    callback  : Prototype.emptyFunction, // btnClickHandler
    condition : true,                    // boolean indicating whether to render button
    width     : 'auto',                  // string value including unit. ex: '100px', '5em' .. 
    type      : 'button',                // button|reset|submit
    style     : {borderWidth: '2px'}     // hash of inline style elemets to be set on the button container
    label     : 'GVA_SCRIPT_BUTTON'      // button label
  }
  
  // create a new button and display in container
  var mybutton = new GvaScript.CustomButtons.Buttons(container, button_properties);


=head3 HTML

The button will be rendered and resulting HTML will be placed in th designated container.

  <div id="my_button_will_display_here" style="border-width: 2px;">
    <span class="gva-btn-container">
      <span class="left"/>
      <span class="center">
          <button type="button" class="btn" style="width: auto;" id="btn_1227001526005">
              GVA_SCRIPT_BUTTON
          </button>
      </span>
      <span class="right"/>
    </span>
  </div>


=head2 Methods

=head3 new

  var mybutton = new GvaScript.CustomButtons.Buttons(container, properties);

The C<properties> hash describes the button behavior and display, with 
the following entries :

=over

=item id I<(string)>

unique identifier of the button - will be set to the <button> element.

optional - system will provide one if none provided.

=item tabindex I<(numeric)>

numeric value of the tabindex to set on the generated button element.

optional - button will not have tabindex attribute if none provided.

=item callback I<(function)>

onclick handler of the <button> element - will execute in the B<button context>.

optional - defaulted to empty function.

=item condition I<(boolean|function)>

boolean value B<or> a function that returns a boolean value indicating whether to render and display the button or not.
Note that if condition is false, the button will B<not> be a part of the DOM.

optional - defaulted to true.

=item width I<(string)>

string value to set on the style.width of the <button> element.
string value B<must> include the unit or else will be ignored.

optional - defaulted to 'auto'.

=item type I<(string)>

the I<type> attribute of the <button> element. could be one of the following:

=over

=item button

generic  behavior of the button.

=item submit

submits containing <form> when clicked.

=item reset

resets containing <form> when clicked.

=back

optional - default to 'button'

=item style I<(hash)>

hash containing style elements to be set to the inline style attribute of the button container element.

optional - defaulted to {}.

=item label I<(string)>

label of the button.

optional - defaulted to 'GVA_SCRIPT_BUTTON'.

=back


=head3 destroy