1. Documentation
2. Change Log

JUI is a collection of wrappers which encapsulate the functionality of various jQuery UI widgets.

Working widgets are: datepicker, slider, dialog, tabs, progress bar and accordion

The jQuery UI version used is 1.7.1, which work with jQuery 1.3, which is included with Yii since 1.0.2.

This extension obsoletes both juidatepicker and juislider. Notice that the javascript APIs might have changed (specially the slider) in jquery ui 1.7.x.

README ¶

Please use the forum if you want to post support requests, problems and so on. Don't use the comments section for those things.

FAQ ¶

• Is this extension obsolete?

If you'll be using just basic things (like an ocassional datepicker in some form), yes, Yii 1.1 incorporates some jQuery UI widgets. But this extension goes beyond that, even providing a framework for other jQuery based extensions.

File MD5 checksums: ¶

• b1e09b9ee8d2557f2b34efc8ec3d7526 jui-2.4.2.tar.bz2
• 010b4ec9d4276586f3b7eb235b4b03ec jui-2.4.2.zip

Resources ¶

• Join discussion
• Report a bug

Documentation ¶

Requirements ¶

• Yii 1.0 or above

Installation ¶

• Extract the release file under protected/extensions

Usage ¶

See the following code examples:

Including the libraries (standalone option) ¶

<?php
$this->widget('application.extensions.jui.EJqueryUiInclude', array('theme'=>'humanity'));
?>

Datepicker ¶

<?
$this->widget('application.extensions.jui.EDatePicker',
              array(
                    'name'=>'cp',
                    'language'=>'es',
                    'mode'=>'imagebutton',
                    'theme'=>'dotluv',
                    'value'=>date('Y-m-d'),
                    'options'=>array('beforeShowDay'=>'$.datepicker.noWeekends'),
                    'htmlOptions'=>array('size'=>10)
                   )
             );

$this->widget('application.extensions.jui.EDatePicker',
              array(
                    'name'=>'dp',
                    'language'=>'es',
                    'mode'=>'button',
                    'theme'=>'cupertino',
                    'value'=>date('Y-m-d'),
                    'htmlOptions'=>array('size'=>10)
                   )
             );
?>

Slider ¶

<? echo CHtml::textField('x1'); ?><br />
<? echo CHtml::textField('x2'); ?><br />
<? echo CHtml::textField('x3'); ?><br />
<?
$this->widget('application.extensions.jui.ESlider',
              array(                    
                    'name'=>'slider',
                    'theme'=>'cupertino',
                    'enabled'=>true,
                    'minValue'=>-10.0,
                    'maxValue'=>10.0,
                    'value'=>array(-10.0,0.0,10.0),
                    'linkedElements'=>array('x1','x2','x3'),
                    'numberOfHandlers'=>3,
                    'range'=>false,
                    'htmlOptions'=>array('style'=>'width:200px;height:10px;')
                   )
             );
?>

<table>
<tr>
<td>
<? echo CHtml::textfield('x4'); ?>
</td>
<td>
<?
$this->widget('application.extensions.jui.ESlider',
              array(
                    'name'=>'slider1',
                    'theme'=>'dotluv',
                    'enabled'=>true,
                    'minValue'=>-20.0,
                    'maxValue'=>20.0,
                    'value'=>10.0,
                    'linkedElements'=>array('x4'),
                    'htmlOptions'=>array('style'=>'width:250px;height:10px;')
                   )
             );
?>
</td>
</tr>
</table>

Dialog ¶

<? $this->beginWidget('application.extensions.jui.EDialog', 
    array('name'=>'dialogo', 
          'theme'=>'base', 
          'compression'=>'packed', 
          'htmlOptions'=>array('title'=>'Hello dialog'))); ?>
<p>Hello world</p>
<? $this->endWidget('application.extensions.jui.EDialog'); ?>

<?
$this->beginWidget('application.extensions.jui.EDialog',
   array(
      'name' => 'myDialog',
      'theme' => 'base',
      'htmlOptions'=>array('title'=>'Hello dialog'),
      'options' => array(
         'autoOpen'=>true,
         'show'=>'scale',
      ),
      'buttons' => array(
         "Ok" => 'function(){$(this).dialog("close");}',
         "Cancel" => 'function(){alert("cancel");}'
      ) 
   )
);
?>
<p>Farawell, World :(</p>
<? $this->endWidget('application.extensions.jui.EDialog'); ?>

Accordion ¶

"Classic" mode:

<?php
$this->widget('application.extensions.jui.EAccordion',
   array(
      'name'=>'accordion',
      'theme'=>'redmond',
      'panels'=>array(
         'Panel 1'=>'Panel 1 Content',
         'Panel 2'=>'<p>Panel 2 Content<ul><li>list item 1</li><li>list item 2</li></ul></p>',
         'Panel 3'=>'<b>Panel 3 Content</b>',
         'Panel 4'=>'<i>Panel 4 Content</i>',
      ),
      'options'=>array(
         'active'=>false,
         'autoHeight'=>false,
         'alwaysOpen'=>false
         /* 'icons'=>array("header"=>"ui-icon-plus", "headerSelected"=>"ui-icon-minus") */
      )
   )
);
?>

"Panel" mode: ~ `php <?php

$this->beginWidget('application.extensions.jui.EAccordion',

               array(
                     'name'=>'accordion2',
                     'useEasing'=>true,
                     'options'=>array(
                                      'active'=>false,
                                      'autoHeight'=>false,
                                      'alwaysOpen'=>false,
                                     )
                    )
              );

?> <?php $this->beginWidget('application.extensions.jui.EAccordionPanel', array('name'=>'p1', 'title'=>'Panel 1')); ?>

  <p>
	Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
	ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
	amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
	odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
	</p>

<?php $this->endWidget('application.extensions.jui.EAccordionPanel'); ?> <?php $this->beginWidget('application.extensions.jui.EAccordionPanel', array('name'=>'p2', 'title'=>'Panel 2')); ?>

	<p>
	Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
	purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
	velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
	suscipit faucibus urna.
	</p>

<?php $this->endWidget('application.extensions.jui.EAccordionPanel'); ?> <?php $this->beginWidget('application.extensions.jui.EAccordionPanel', array('name'=>'p3', 'title'=>'Panel 3')); ?>

  <p>
	Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
	Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
	ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
	lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
	</p>
	<ul>
		<li>List item one</li>
		<li>List item two</li>
		<li>List item three</li>
	</ul>

<?php $this->endWidget('application.extensions.jui.EAccordionPanel'); ?> <?php $this->endWidget('application.extensions.jui.EAccordion'); ?> `~

Tabs ¶

Normal mode: ~ `php <?php $this->beginWidget('application.extensions.jui.ETabs', array('name'=>'tabpanel1')); ?> <?php $this->beginWidget('application.extensions.jui.ETab', array('name'=>'tab1', 'title'=>'Tab 1')); ?>

   <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

<?php $this->endWidget('application.extensions.jui.ETab'); ?>

<?php $this->beginWidget('application.extensions.jui.ETab', array('name'=>'tab2', 'title'=>'Tab 2')); ?>

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

<?php $this->endWidget('application.extensions.jui.ETab'); ?>
<?php $this->beginWidget('application.extensions.jui.ETab', array('name'=>'tab3', 'title'=>'Tab 3')); ?>
	<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
	<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
<?php $this->endWidget('application.extensions.jui.ETab'); ?>

<?php $this->endWidget('application.extensions.jui.ETabs'); ?> `~ Ajax mode: ~ `php <?php $this->widget('application.extensions.jui.ETabs',

          array(
                'name'=>'tabpanel2',
                'ajaxTabs'=>array(
                                  array('title'=>'Hangman', 'url'=>'http://localhost/yii-svn/demos/hangman'),
                                  array('title'=>'Hello World', 'url'=>'http://localhost/yii-svn/demos/helloworld'),
                                  array('title'=>'Blog', 'url'=>'http://localhost/yii-svn/demos/blog'),
                                 )
               )
         );

?> `~

Progress bar ¶

~ `php <?php $this->widget('application.extensions.jui.EProgressBar',

array(
	'name' => 'myProgressBar',
	'theme' => 'redmond',
	'callbacks' => array(
		'change' => 'function(event, ui) { 
var value = $("#myProgressBar").progressbar("option", "value");
(value >= 100)
? $("#progressBarLabel").text(value+" % complete.")
: $("#progressBarLabel").text(value+" %"); 

}',

	),
)

);

echo CHtml::button('Start process',

array(
	'id'    => 'startButton',
	'class' => 'ui-state-default ui-corner-all',
	'style' => 'margin:10px 0px 0px 0px;padding:5px;',
)

);

$buttonScript = '$("#startButton").click(

function() {
	$(this).attr("disabled", "true").addClass("ui-state-disabled").blur();
	var progress = 0, thread = setInterval(
	function() {
		progress += 1;
		$("#myProgressBar").progressbar("option", "value", progress);
		if(progress >= 100) clearInterval(thread);
	}, 100);
}

); $("#startButton").hover(

function() { $(this).addClass("ui-state-hover"); },
function() { $(this).removeClass("ui-state-hover"); }

); ';

Yii::app()->clientScript->registerScript('button', $buttonScript, CClientScript::POS_READY); ?> `~

Release FAQ ¶

• Why did you merge the jui* extensions into this one?

Because they both share the jQuery UI library, and the themes from the theme roller. They also share common code on the PHP side.

• Why only one theme is applied to all the jQuery UI widgets?

Because with the default CSS files created by theme roller it is not possible to change this behavior, and making a generic extension with the changes suggested by the jQuery UI developers to provide different themes for each widget is not possible. If you need to apply a different theme to each widget, you need to modify the CSS files to include a selector and extend the extension class to apply this new CSS and the class selector to the widget... and you'll end up with an inconsistent interface :)

• Why do you include the whole jQuery UI library or CSS theme instead of just the datepicker code (for instance)?

Because the widgets might share common code, the file is not so big when minified, and you can use caching and gzip on the server side, and the number of HTTP connections is reduced. You can extend the extension class to change this behavior.

• I found a bug in the jQuery UI widget. Can you fix it?

Please report the bug to the jQuery/jQuery UI teams. They should fix the problem better and faster, and then make a general release with the fix included, which I'd include in future versions of the extension. I don't intend to make a fork of jQuery UI, but use the official releases.

• Do you work "for" jQuery/jQuery UI?

No, I don't work on that project. I'm not an expert in jQuery either, I'm just another user. So, I might not be able to answer your questions related to jQuery or jQuery UI. Sorry about that.

Change Log ¶

20090810 2.4.2 ¶

• Bug fix release (thanks to romanoza and jjmf for reporting in the forum)

20090516 2.4.1 ¶

• Fixed bug reported by tthai1980

20090429 2.4 (being baazarish today) ¶

• Added the EJqueryUiInclude class, which includes the jQuery UI libraries and themes in a standalone way, so you can, for instance, use effects without the need of adding the javascript libraries manually.
• Improved singleton for storing configuration. If you miss to set the theme or compression with the first widget you include in your view, the default values will be used.

20090429 2.3.2 ¶

• Fixed problem when a theme is missing (reported by robrob)

20090427 2.3.1 ¶

• Fixed copy&paste bugs.
• Fixed the API (validOptions and validCallbacks). Please check your scripts, since the jQuery UI team removed some options and introduced some more.
• Changed the singleton to store general configuration instead of just the theme. Currently the singleton stores: theme and compression (since they must be shared among the widgets)

20090417 2.3 ¶

• Updated to jQuery UI 1.7.1
• Re-included missing files for i18n

20090411 2.2 ¶

• Implemented the Progress bar wrapper (ironic)
• Implemented EAccordionPanel.

20090323 2.1 ¶

• Implemented the Tabs wrapper.

20090314 2.0 ¶

• Updated the bundled jQuery UI package to 1.7 final and finally.
• Warning: the "base" theme doesn't exist anymore, please set the theme to smoothness or something else.
• Assets paths have changed, please delete the corresponding asset and rerun your application.
• Updated to the newest accordion class by ironic.

20090221 beta 5 ¶

• Fixed bug with EDialog (overlay type must be array). Thanks to horizons for the report.

20090212 beta 4 ¶

• Added accordion widget (ironic)
• Upgraded to jQuery UI 1.6 rc6 (warning, packed version is not working!) (MetaYii)
• Fixed buttons in the dialog widget. Now there's a buttons configuration parameter which defines the buttons' callbacks. Thanks to ironic for the report.

20090126 ¶

• beta 3: Added optional checking of javascript options, you can turn it off by defining _CHECK_JSPARAMETERS false This has a plus, you can check which are the valid options and callbacks directly in the PHP code (will try to maintain it updated). Default theme is "base" now.

January 25, 2009 ¶

• beta 2: The dialog widget is working, needs to be polished. You can choose which compression will be used by the js file (minified, packed or none) Theme management has changed: you no longer need to place your themes in the themes directory, you should set the useBundledStyleSheet parameter to false so you can use your own style sheet, placing it wherever you want, and registering it in the view.

January 22, 2009 ¶

• Initial release.