Yii 1.1: jui

jQuery UI widget wrappers
26 followers

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

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
 
$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 $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')); ?>
    <p>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.</p>
    <?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
$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
$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

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_JS_PARAMETERS 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.

Total 16 comments

#16533 report it
JbalTero at 2014/03/03 05:16am
Where's Jquery Menu?

Is there any wrapper for Menu ? http://jqueryui.com/menu/

#13079 report it
Nurbek at 2013/05/02 02:19pm
there is a shit bug, which took a lot of my time and energy.

there is a shit bug, which took a lot of my time and energy. Thebug is so: When you use the ActiveForm with ajax validation, and at the same time when you use any element from jui of this package, it brokes the ajax validation, exactly not brokes, but make hidden the error messages which come from the controller, they comes and are pasted to the page, but error div is hidden, the reason of this is THE EXTENDED TOGGLE FUNCTION which is in the jquery-ui-1.7.1.custom.min.js file. the body of this function is so: toggle:function(){if(!arguments[0]||(arguments[0].constructor==Number||(/(slow|normal|fast)/).test(arguments[0]))||(arguments[0].constructor==Function)){return this.__toggle.apply(this,arguments)}else{return this.effect.apply(this,c(arguments,"toggle"))}} I think it is a populated problem, even in the google, stackoverflow, there are so problems, but without a solution. I cant find the solving in the internet. I think you must figure out the reason. Thanks.

#2724 report it
Maurizio Domba Cerin at 2011/02/01 08:18am
re: obsolete

If you use the new version... than you don't need this extension... but... there are still many users that use older version of Yii... so this extension can be useful to them...

#2722 report it
ignition25 at 2011/02/01 12:21am
Obselete?

Is there any reason to use this now that we can use CJuiWidget since Yii 1.1?

#597 report it
Giordano at 2010/04/14 04:18am
Thanks!

Just used the datePicker, thanks for saving me time!

Picker is rendered very small, but I guess I'll just generate a new stylesheet on the jQuery site.

#1045 report it
touya at 2009/12/26 08:14am
Thanks very much!

I'm not very good at javascript,but with this tool , I can do my job better than before!

#1136 report it
jerry2801 at 2009/11/30 10:16pm
good job!

thank for share!

#1377 report it
breakeneck at 2009/08/19 04:36am
re:Css problem

It has a variable "fontSize" that you can add to datepicker init code

<?php
$this->widget('application.extensions.jui.EDatePicker',
  array(
  /* ... */
  'fontSize'=>'0.8em',
  /* ... */
?>

#1378 report it
breakeneck at 2009/08/19 04:12am
Css problem

I'm using default yii user interface, but when I add a datepicker, his size is a half of normal. It's very small. How can I easily resolve this ploblem?

#1412 report it
romanoza at 2009/08/08 01:51pm
datePicker bug

in EDatePicker.php on 512 you need to check minDate and maxDate separatly, because it can be used separatly:

  if (is_string($this->maxDate) && $this->maxDate !== '') {
     $options['maxDate'] = "'" . $this->maxDate . "'";
  }

  if (is_string($this->minDate) && $this->minDate !== '') {
     $options['minDate'] = "'" . $this->minDate . "'";
  }
#1426 report it
murugan at 2009/08/05 04:39am
Well done

Nice work I want to avoid typing date on datepicker even for integer, how to change it, it already avoids alphabets and accepts date in dd-mm-yyyy format, give idea Thank you

#1540 report it
revo110 at 2009/06/30 08:14am
Wonderful!

Wonderful! Thanks!

#1664 report it
MetaYii at 2009/05/17 10:31am
Please report bugs in the forum

Hi, thanks for all your reviews. For reporting bugs, please use this thread on the forum system:

#1701 report it
byron at 2009/05/04 09:58pm
:-)

Very, very, very nice.

#1733 report it
aha1973 at 2009/04/24 05:22am
Good job

Thanx

#1859 report it
shaan at 2009/02/19 05:52am
Nice Extension

Extension helps me to create the feature i want to do. Help me to make my work easy. I like it.

Leave a comment

Please to leave your comment.

Create extension