Pxxo_Widget_Javascript_YUI

This widget can be used to enable "Yahoo! User Interface" (YUI) library in your code.

This widget is a decorator, to know more about it (how to use it), please read the decorators documentation.

• Install it

First of all, decorate your widget:

...
        $this->addDecorator('Pxxo_Widget_Javascript_YUI',
                            array('modules' => array("layout",
                                                     "tabview",
                                                     "animation",
                                                     "container",
                                                     "button",
                                                     "editor"),
                                  'client_on_success' => 'MyBuildGUI();'));
...

Then in your template define the hooks (html) needed by your code. Thanks to these hooks you will be able to connect YUI widgets to it. In this example we prepare a HTML structure that will display a TABVIEW:

<div id="<?php echo $ClassID; ?>">
 
  <div id="demo" class="yui-navset">
      <ul class="yui-nav">
          <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
          <li><a href="#tab2"><em>Tab Two Label</em></a></li>
          <li><a href="#tab3"><em>Tab Three Label</em></a></li>
      </ul>            
      <div class="yui-content">
          <div><p>Tab One Content</p></div>
          <div><p>Tab Two Content</p></div>
          <div><p>Tab Three Content</p></div>
      </div>
  </div>
 
</div>

Then in a javascript template, define your function that will be executed when YUI is ready. In this example we connect a YUI tabview to our html structure and we add dynamically (with javascript) a new tab to this tabview:

function MyBuildGUI() {
  var myTabs = new YAHOO.widget.TabView("demo");
  myTabs.addTab( new YAHOO.widget.Tab({
        label: 'My dynamic tab',
        content: '<p>this tab is created using javascript function</p>'
  }));
}