pax.widget.button

This is a button widget, that can render buttons, for use in other widgets

Author

Mikkel Bergmann, http://www.pointful.com

Summary
pax.widget.buttonThis is a button widget, that can render buttons, for use in other widgets
Functions
pax.widget.button.initRenders a button into the given target

Functions

pax.widget.button.init

pax.widget.button.init = function(target,
args)

Renders a button into the given target

Parameters

targetan element to render the button into
argsarguments for the grid widget
  • id - Optional ID of our new button
  • width - Width of the button, eg: ‘70px’
  • height - Height of the button
  • content - Stuff in the button (if not specified, we use the contents of the target)
  • showChrome - Do we show a nice button chrome surround, or just the contents?
  • inline - Do we want the button to be displayed inline, or as table-layout?
  • func - Click function
  • baseClass - The default base class name, for applying style class on hover, and click, your class will need to be named baseClass + ‘_pButtonHover’, and baseClass + ‘_pButtonClick’

Returns

Button widget object

Example

<span id='widget.button.init.example1'></span>
[:.
    pax.widget.button.init( pax.$('widget.button.init.example1'), {
        id: 'myButton',
        content: 'Hello!',
        func: function(e){ alert('Hi!') }
    } );
:]

Example

<span id='widget.button.init.example1.but1' style='float:left'></span>
<span id='widget.button.init.example1.but2' style='float:left'></span>
<span id='widget.button.init.example1.but3' style='float:left'></span>
<span id='widget.button.init.example1.but4' style='float:left'></span>
[:.
    pax.widget.button.init( pax.$('widget.button.init.example1.but1'), {
        func: function(e) { alert( 'you clicked button 1.' ); },
        content: '<img src="/pax/resource/img/arrow_left_full.gif">',
        width: '18px'
    } );
    pax.widget.button.init( pax.$('widget.button.init.example1.but2'), {
        func: function(e) { alert( 'you clicked button 2.' ); },
        content: '<img src="/pax/resource/img/arrow_left.gif">',
        width: '18px'
    } );
    pax.widget.button.init( pax.$('widget.button.init.example1.but3'), {
        func: function(e) { alert( 'you clicked button 3.' ); },
        content: '<img src="/pax/resource/img/arrow_right.gif">',
        width: '18px'
    } );
    pax.widget.button.init( pax.$('widget.button.init.example1.but4'), {
        func: function(e) { alert( 'you clicked button 4.' ); },
        content: '<img src="/pax/resource/img/arrow_right_full.gif">',
        width: '18px'
    } );
:]

This example shows some built-in image buttons

TODO: Make it autodetect ‘button’ and ‘input type=”button”’, and render accordingly.

pax.widget.button.init = function(target,
args)
Renders a button into the given target
Close