This is a beta release, since jQuery UI has not yet reached 1.6 (currently is in rc5) and neither the API nor the documentation is finished, according to the developers of that library. This extension replace the juidatepicker and juislider extensions, which are now deprecated for various reasons.
http://www.yiiframew…m/extension/jui
Feel free to test it and post your comments, constructive critics, suggestions and bug reports in this thread.
Quote
This is really great, thanks MetaYii.
According to the jQuery UI Development & Planning Wiki we can look forward to the final release of ui-1.6 (hopefully) today. 
Well, very clean class/interface design.
I love the way, a juiwidget checks if a option is valid.
A Suggestion for the $validThemes array in EJqueryUiTheme would be to build it dynamiclly, by
reading the themes dir upon construction. So it would pretty easy to install a new theme, by just
dropping its folder into the theme-directory. And it would only be the same effort, to uninstall
unneeded themes without having them still in the $validThemes array. This could be important,
if you have to work with a "designer", who should definitly not modify some php-code in a base class.
Another suggestion, especially for extensions that ship with that many files, would be to implement
a kind of file dependencies-check, which verifies the availability of the extension´s needed resource files.
interface IJqueryUiWidget
{
function checkDependencies();
function publishAssets();
function registerClientScripts();
}
in a EJqueryUiWidget derivered Class:
private $_dependencies = array(
'hoverIntent.js',
'bgiframe.js',
'supersubs.js',
'superfish.js',
'superfish.css',
'superfish-vertical.css',
'superfish-navbar.css'
);
public function checkDependencies()
{
foreach($this->_dependencies as $dependency)
{
if(!file_exists($this->_jsFolder.$dependency) &&
!file_exists($this->_cssFolder.$dependency))
{
throw new CException(Yii::t('ESuperfish', '{c}: Missing a required file. ({r})',
array('{c}'=>get_class($this),'{r}'=>$dependency)));
}
}
}
Already a great base to implement new jquery-ui-based extensions!
with kind regards
ironic
Quote
Quote
This is really great, thanks MetaYii.
According to the jQuery UI Development & Planning Wiki we can look forward to the final release of ui-1.6 (hopefully) today.
I hope so. Currently I’m having problems with the dialog widget. Richard (a developer from jQuery) posted an example which works, but with my js code doesn’t, being the same code… weird… I have hit a wall here 
Quote
Thanks.
Quote
I thought about doing it this way, but I guess it would cost too much, since it involves I/O operations each time the directory is scanned (that's once a widget is loaded), which under high loads would be a bad thing. I'd need to profile this, thou.
Quote
Hmm it could be done so in a future version. The current beta version loads everything in a big js file (created by checking all the checkboxes in the jquery ui download page), so all what is needed is already there. Some ppl could thing this is bad, because if he/she needs just a simple date picker, it would be too much to load everything. Well, the file is just 100k when minified, and you could use gzip server side. Anyway, I'm planning to have two modes, a "full" one loading everything, and a "simple" one, loading just the files required by each widget… once jQuery UI 1.6 is released.
Updated: beta 3
Today, I needed the jQuery UI Accordion in a project.
So I decided to implement it, on the base classes written by
MetaYii and it didnt even took 15 minutes to get it running.
Demos: http://jqueryui.com/demos/accordion/
Download: http://www.yiiframew…22.0;attach=130
Installation: unpack the zip file to protected/extensions and make sure you installed MetaYii´s jui package…
Usage:
<?php
$this->widget('application.extensions.jui.EAccordion',
array(
'name'=>'accordion',
'theme'=>'redmond',
'compression'=>'packed',
'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") */
)
)
);
?>
This might save you some time…
have fun, greets ironic
Hi ironic, great news! may I add your extension to the jui extension?
Quote
Sure.
Updated: added ironic's accordion widget wrapper, fixed problem with buttons in the dialog wrapper (please see the example), updated to jQuery UI 1.6rc6 (warning: packed version doesn't work!)
how can I use EDatePicker to fill a field in a form ?
i use the widget to import the js to header ,then bind the id of input to a DatePicker
the input field is
<?php
$this->widget('application.extensions.jui.EDatePicker',array(
'name'=>'cp',
'language'=>'zh_CN',
'mode'=>'imagebutton',
//'options'=>array('function'=>'$("#Receivefile_time4receive").datepicker()'),
'fontSize'=>'1em',
));
?>
<script type="text/javascript">
$(function() {
$("#Receivefile_time4receive").datepicker();
});
</script>
<div class="simple">
<?php echo CHtml::activeLabelEx($receivefile,'time4receive'); ?>
<?php echo CHtml::activeTextField($receivefile,'time4receive'); ?>
</div>
Quote
Hi zzsczz,
the datepicker widget creates the html-element for you. You dont need to create and bind it.
<?php
echo CHtml::activeLabelEx($receivefile,'time4receive');
// this creates a datepicker from a model
$this->widget('application.extensions.jui.EDatePicker',array(
'model'=>$receivefile,
'attribute'=>'time4receive',
'language'=>'zh_CN',
'theme'=>'redmond',
'compression'=>'none',
'mode'=>'imagebutton'
));
?>
have fun, cheers ironic
Hi all,
I'm trying to use Accordion and it seems to work fine, but I noticed the window does not open smoothly when the content within the panel wraps past the length of the panel. It's fine if you have a long list as long as the text doesn't wrap.
Is there a way around this?
R
Hi all,
I'm trying to use the Slider widget, but it doesn't seem to do anything when I change the options. The slider appears with 3 little slider buttons, but that is it. I'm not sure what I'm doing wrong. I have the Accordion working so it doesn't seem to be a general problem.
Any help or examples would be appreciated.
R
Quote
Did you pass the IDs of the text inputs which will host the values? Could you post your code?
Thanks for your quick reply. That was an obvious one… I must of deleted the text fields by accident.
I can move the sliders and the number in the text fields change accordingly. But if I reduce the number of handlers to 2, should there not be only 2 sliders? I still see 3.
Also, can the slider be changed to vertical from horizontal?
Here's my code:
$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'),
'numberOfHandlers'=>2,
'range'=>true,
'htmlOptions'=>array('style'=>'width:200px;height:10px;')
)
);
Thanks,
R
[tt]'value'=>array(-10.0,0.0,10.0)[/tt] must be [tt]'value'=>array(-10.0,10.0)[/tt] or something like that (two values)
As for the orientation, I did it placing the widget inside a tall/narrow div.
I misunderstood what the value is used for. Jquery is new to me. Thanks for your help. That did the trick for the number of sliders.
I tried controlling the slider width inside a div using css, but it stays the same size. I also looked inside the theme and tried from there but no luck. Is there a trick to this?
R
Quote
Hmm, AFAIK, the jQuery UI developers were changing the way to change the orientation, but I'm not sure. What I did once was something like:
<div style="width:20px; height:100px;"> <!-- widget here ---> </div>
I think I needed some sleep last night because this was more obvious than I thought. The orientation is controlled with the 'htmlOptions'=>array('style'=>'width:10px;height:200px;') rather than a separate div.
Setting a 200 high by 10 wide will give you a vertical slider.
Thanks for you help on this one.
BTW… great job with this extension!
R
Hi again, hopefully this will be the last question.
First off all, great job with this extension!
I'm using the Accordion and want to embed php within a panel. I can't seem to figure out how to give it the string. Is it possible? More so, I actually want to embed the slider within a panel and wondering if it is possible. The slider is all encapsulated within a php script so I figure is should be possible if it accepts php.
Here's the code I've tried… note content in "panel 3"…'Panel 3'=>'<?php echo "hello world"; ?>',:
'panels'=>array(
'Panel 1'=>'Panel 1',
'Panel 2'=>'<p>Panel 2<ul><li>item 1</li><li>item 2</li></ul></p>',
'Panel 3'=>'<?php echo "hello world"; ?>',
'Panel 4'=>'<i>Panel 4</i>',
Thanks,
R