view release on metacpan or  search on metacpan

doc/html/CustomButtons.html  view on Meta::CPAN

<li><a name="item_submit"></a><b>submit</b>
<p>submits containing &lt;form&gt; when clicked.</p>
</li>
<li><a name="item_reset"></a><b>reset</b>
<p>resets containing &lt;form&gt; when clicked.</p>
</li>
</ul>
<p>optional - default to 'button'</p>
</li>
<li><a name="item_style__i__hash___i_"></a><b>style <i>(hash)</i></b>
<p>hash containing style elements to be set to the inline style attribute of the button container element.</p>
<p>optional - defaulted to {}.</p>
</li>
<li><a name="item_label__i__string___i_"></a><b>label <i>(string)</i></b>
<p>label of the button.</p>
<p>optional - defaulted to 'GVA_SCRIPT_BUTTON'.</p>
</li>
</ul>

    </div>
  </div>
  <div class="TN_node" id="destroy">
    <h4 class="TN_label">destroy</h4>
    <div class="TN_content">
      <pre>  mybutton.destroy()</pre>

<p>This method removes the click handler attached to the button.
Call this method when the button is removed
from the DOM.</p>

    </div>
  </div>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="GvaScript_CustomButtons_ButtonNavigation">
    <h2 class="TN_label">GvaScript.CustomButtons.ButtonNavigation</h2>
    <div class="TN_content">
      <p>For adding support of keyboard navigation over a list of buttons.
Mostly used internally with GvaScript.CustomButtons.ActionsBar class.</p>
<p>The class searches for &lt;button&gt; or &lt;input type="button|submit|reset"&gt; elements that has a predefined classname 
and that are contained in a provided container.</p>
<p><i>This class is used implicitly by the ActionsBar class</i>.</p>
  <div class="TN_node" id="Usage">
    <h3 class="TN_label">Usage</h3>
    <div class="TN_content">
        <div class="TN_node" id="Javascript">
    <h4 class="TN_label">Javascript</h4>
    <div class="TN_content">
      <pre>  // container of the buttons we are looking for
  var container  = $('my_buttons_are_contained_here');
  
  // classname of the buttons we are looking for
  var className  = 'gva-btn-container';
  
  // initialize ButtonNavigation to activate keyboard map
  var mybuttonnavigator = new GvaScript.CustomButtons.ButtonNavigation(container, {
    selectFirstBtn  : true, 
    className       : className,
    preventListBlur : false,
    flashClassName  : 'flash', 
    flashDuration   : 100
  });</pre>


    </div>
  </div>
  <div class="TN_node" id="HTML">
    <h4 class="TN_label">HTML</h4>
    <div class="TN_content">
      <p><i>class does not produce any HTML</i></p>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="Methods">
    <h3 class="TN_label">Methods</h3>
    <div class="TN_content">
        <div class="TN_node" id="new">
    <h4 class="TN_label">new</h4>
    <div class="TN_content">
      <p>The <code>properties</code> hash has the following entries :</p>
<ul>
<li><a name="item_selectFirstBtn__i__boolean___i_"></a><b>selectFirstBtn <i>(boolean)</i></b>
<p>boolean indicating whether to give focus to the first button in the found list.</p>
<p>optional - defaulted to true</p>
</li>
<li><a name="item_className__i__string___i_"></a><b>className <i>(string)</i></b>
<p>classname to match with button elements that are a part of navigation</p>
<p>optional - defaulted to 'BN_button'</p>
</li>
<li><a name="item_preventListBlur__i__boolean___i_"></a><b>preventListBlur <i>(boolean)</i></b>
<p>boolean indicating whether a user can use the TAB and S_TAB keys to prevent 
navigation outside the button list.</p>
<p>optional - defaulted to false</p>
</li>
<li><a name="item_flashClassName__i__string___i_"></a><b>flashClassName <i>(string)</i></b>
<p>classname to give to the button when in flashing mode</p>
<p>optional - defaulted to 'flash'</p>
</li>
<li><a name="item_flashDuration__i__numeric___i_"></a><b>flashDuration <i>(numeric)</i></b>
<p>value in millis indicating how long to keep the flashClassName set on the button</p>
<p>optional - defaulted to 100</p>
</li>
</ul>

    </div>
  </div>
  <div class="TN_node" id="destroy">
    <h4 class="TN_label">destroy</h4>
    <div class="TN_content">
      <pre>  mybuttonnavigator.destroy()</pre>

<p>This method removes the different handlers attached on the buttons container.
Call this method when the buttons container is removed
from the DOM.</p>

    </div>
  </div>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="GvaScript_CustomButtons_ActionsBar">
    <h2 class="TN_label">GvaScript.CustomButtons.ActionsBar</h2>
    <div class="TN_content">
      <p>For rendering a list of Buttons and adding support of keyboard navigation</p>
  <div class="TN_node" id="Usage">
    <h3 class="TN_label">Usage</h3>
    <div class="TN_content">
        <div class="TN_node" id="Javascript">
    <h4 class="TN_label">Javascript</h4>
    <div class="TN_content">
      <pre>  var container = $('my_buttons_bar_will_display_here');
  var actionsbar_properties = {
    actions     : [],    // array of button_properties
    selectfirst : false  // focus on first button
  }
  
  // create a new buttons list and display next to each other in container
  var myactionsbar = new GvaScript.CustomButtons.ActionsBar(container, actionsbar_properties);</pre>


    </div>
  </div>
  <div class="TN_node" id="HTML">
    <h4 class="TN_label">HTML</h4>
    <div class="TN_content">
      <p>The list of buttons will be rendered one by one and the resulting HTML will be 
appended sequentially into the designated container.</p>
<pre>  &lt;div id="my_buttons_bar_will_display_here" class="gva-actionsbar"&gt;
    &lt;span id="btn_1236083609358" class="gva-btn-container"&gt;
      &lt;span class="left"/&gt;
      &lt;span class="center"&gt;
        &lt;button class="btn" style="width: auto;" type="button"&gt;Modifier&lt;/button&gt;
      &lt;/span&gt;
      &lt;span class="right"/&gt;
    &lt;/span&gt;
    &lt;span id="btn_1236083609358" class="gva-btn-container"&gt;
      &lt;span class="left"/&gt;
      &lt;span class="center"&gt;
        &lt;button class="btn" style="width: auto;" type="button"&gt;Modifier&lt;/button&gt;
      &lt;/span&gt;
      &lt;span class="right"/&gt;
    &lt;/span&gt;
  &lt;/div&gt;</pre>


    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="Methodes">
    <h3 class="TN_label">Methodes</h3>
    <div class="TN_content">
        <div class="TN_node" id="new">
    <h4 class="TN_label">new</h4>
    <div class="TN_content">
      <p>The <code>properties</code> hash has the following entries :</p>
<ul>
<li><a name="item_actions__i_array__i_"></a><b>actions <i>array</i></b>
<p>list of button_properties describing a Button.</p>
<p>required.</p>
</li>
<li><a name="item_selectfirst__i_boolean__i_"></a><b>selectfirst <i>boolean</i></b>
<p>boolean indicating whether to give focus to the first button in the list when the actionsbar finished rendering.</p>
<p>optional - defaulted to false.</p>
</li>
</ul>
<p>ActionsBar implicitly initializes ButtonNavigation object with following properties</p>
<pre>  new GvaScript.CustomButtons.ButtonNavigation(this.container, {
    selectFirstBtn : this.options.selectfirst, 
    className      : 'gva-btn-container'
  });</pre>


    </div>
  </div>
  <div class="TN_node" id="destroy">
    <h4 class="TN_label">destroy</h4>
    <div class="TN_content">
      <pre>  myactionsbar.destory();</pre>

<p>This method removes the different handlers attached on the 
buttons and their container.
Call this method when the buttons container is removed
from the DOM.</p>

    </div>
  </div>

    </div>
  </div>

    </div>
  </div>
  <div class="TN_node" id="CSS">
    <h2 class="TN_label">CSS</h2>
    <div class="TN_content">
      <p>Example CSS stylesheet for styling buttons.</p>
<p>By default, css classnames are prefixed by 'gva'.</p>
<p>This can be overloaded by a global js variable: CSS_PREFIX
if declared before the inclusion of this Library</p>
<p>Notice the <b>btn-focus</b>, <b>btn-hover</b> and <b>flash</b> classnames that are used to style
the buttons in their different states.</p>
<pre>    /* IE fix: to the ridiculously wide buttons in IE */
    .gva-btn-container .btn {width:1pt;overflow:visible;}
    /* END: IE specific */
    
    .gva-actionsbar {background-color:#E8E8E8;border:1px solid #8c8c8c;border-width:1px 0px;height:25px;padding:4px 0 1px;}
    .gva-btn-container {display:inline;}
    .gva-btn-container .btn {margin:0 3px;font-size:12px;cursor:pointer;}
    .gva-btn-container .btn {
        font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
        background:none;
        border:none;
        cursor:pointer;
        padding:1px 2px;
        color:#000;
        background-color:transparent !important;
    }
    .gva-btn-container .btn {float:left;}
    .gva-btn-container.btn-focus .btn {color:#aa0000;}
    .gva-btn-container span {display:block;float:left;height:21px;}
    .gva-btn-container span.left {background:transparent url(btn_sprite.gif) no-repeat scroll 0 0;padding:0 1px 0 2px;margin-left:4px;}
    .gva-btn-container span.center {background:transparent url(btn_sprite.gif) repeat-x scroll 0 -42px;padding:0 2px}
    .gva-btn-container span.right {background:transparent url(btn_sprite.gif) no-repeat scroll 0 -21px;padding:0 1px 0 2px;}
    .gva-btn-container.btn-hover span.left {background-position:0 -63px;}
    .gva-btn-container.btn-hover span.center {background-position:0 -105px;}
    .gva-btn-container.btn-hover span.right {background-position:0 -84px;}
    .gva-btn-container.btn-focus span.left {background-position:0 -63px;}
    .gva-btn-container.btn-focus span.center {background-position:0 -126px;}