Yii Framework Forum: [EXTENSION] jQuery UI widgets - Yii Framework Forum

Jump to content

  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] jQuery UI widgets Rate Topic: ***** 2 Votes

#1 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 22 January 2009 - 07:53 PM

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.

0

#2 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 24 January 2009 - 03:13 AM

Quote

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 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
0

#3 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 24 January 2009 - 02:30 PM

Quote

Quote

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

Well, very clean class/interface design.


Thanks.

Quote

A Suggestion for the $validThemes array in EJqueryUiTheme would be to build it dynamiclly, by reading the themes dir upon construction.


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

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.


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

#4 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 26 January 2009 - 09:02 PM

Updated: beta 3
0

#5 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 12 February 2009 - 07:14 AM

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

Attached File(s)


0

#6 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 12 February 2009 - 09:20 AM

Hi ironic, great news! may I add your extension to the jui extension?
0

#7 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 12 February 2009 - 09:45 AM

Quote

Hi ironic, great news! may I add your extension to the jui extension?


Sure. :)
0

#8 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 12 February 2009 - 12:02 PM

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!)
0

#9 User is offline   zzsczz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 16-February 09

Posted 18 February 2009 - 10:10 AM

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>




0

#10 User is offline   ironic 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 32
  • Joined: 09-January 09
  • Location:Germany

Posted 19 February 2009 - 04:03 AM

Quote

how can I  use EDatePicker  to  fill a field in a form ?


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
0

#11 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 21 February 2009 - 04:57 PM

Beta 5 fixes a bug reported by horizons. Please upgrade if you use EDialog.
0

#12 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 27 February 2009 - 05:00 PM

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



0

#13 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 27 February 2009 - 05:04 PM

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
0

#14 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 27 February 2009 - 05:06 PM

Quote

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.


Did you pass the IDs of the text inputs which will host the values? Could you post your code?
0

#15 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 27 February 2009 - 05:22 PM

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

0

#16 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 27 February 2009 - 05:37 PM

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


0

#17 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 27 February 2009 - 07:52 PM

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
0

#18 User is offline   MetaYii 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 393
  • Joined: 07-October 08
  • Location:The Matrix

Posted 27 February 2009 - 10:14 PM

Quote

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?


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>

0

#19 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 28 February 2009 - 09:40 AM

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
0

#20 User is offline   rpaulpen 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 136
  • Joined: 01-December 08

Posted 01 March 2009 - 09:59 AM

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

0

Share this topic:


  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

  1. Yahoo