CJuiTabs Help Needed

Yii 1.1 General Discussion
1

Hi All,

I am a newbie with Yii Framework and I need help.

I would like to know how to use a different theme in CJuiTabs.

I know there are parameters like theme, themeUrl and skin, but i do not know how to use them and where to place the themes downloaded from jQuery Ui website

Here is my code

$this->widget(‘zii.widgets.jui.CJuiTabs’, array(

    'tabs'=>$courseArr,


    'options'=>array(


        'collapsible'=>true,


    ),


    'htmlOptions'=>array('id'=>'tabs'),


    )


);

Thanking you for your help in advance.

Regards,

Wenceslaus D’silva

2

Can No One Help Me on This???

3

is there no one who can help me on this????

4

I don’t think there’s a Yii solution to this yet. Besides trying out the jQuery UI ‘skin’ property you can store the themes in a web accessible directory and add a scriptMap config




'clientScript'=>array( 

  'scriptMap'=>array( 

    'jquery-ui.min.js'=>'...', 

    'jquery-ui.css'=>'...', 

  ), 

),

Edit: I may have mixed up Yii’s CWidget property ‘skin’ with a possible jQuery UI option which doesn’t seem to exist. Actually a property declared in CJuiWidget. Declared in CWidget.

/Tommy

5

Thanks buddy I shall try this and get back to you with the result so if it works it might help others, cheers

6

Here is the Solution to change themes for CJuiTabs:-

$this->widget(‘zii.widgets.jui.CJuiTabs’, array(

    //basic params


    //for the theme


    'themeUrl'=>Yii::app()->baseUrl.'/protected/extensions/jui/jquery/css',//url of your themes for JUI


    'theme'=>'redmond', //theme name the above url should have a folder named by the theme name specified here eg. /protected/extensions/jui/jquery/css/redmond/


    'cssFile'=>'jquery-ui-1.7.1.custom.css' // the css file in the theme folder


));

to see the folder structure of the themes please refer to framework/zii/vendors/jui/css in your Yii folder

Hope this helps others… Cheers. Let me know if you have any queries or suggestions

7

Which version of the framework do you use?

BTW When I looked into this previously I downloaded the 1.7.2/1.8 themes. Then selected one to use and configured scriptMap accordingly. No time wasted.

Next thing would be to check out how your approach can be applied to CWidgetFactory presumably in a generic way, that is to CJuiWidget.

I think that jui theme switching/widget skin should be a part of Yii themes.

/Tommy

8

Side note:

Please post your questions to the General section of the forum. Here is the place to share tipps, snippets and tutorials with others.

9

I’ve tried this out now.

As suggested by Wenceslaus D’silva:




$this->widget('zii.widgets.jui.CJuiTabs', array(

  ...

  'themeUrl'=>'/css/jquery-ui-1.8/themes',

  'theme'=>'redmond',

  ...

);

My suggestion

how to switch jui theme together with Yii theme:

1. Prepare a skin file mywebapp/protected/views/skins/CJuiTabs.php. I chose to name the skin ‘yiitheme’ since it will be controlled by the Yii theme currently selected. Save in the directory mywebapp/themes/some-yii-theme/views/skins and select an appropriate jui theme, in this example ‘redmond’.




<?php

return array(

  'default'=>array(

  ),

  'yiitheme'=>array(

    'themeUrl'=>'/css/jquery-ui-1.8/themes',

    'theme'=>'redmond',

  ),

);

?>

2. In configuration add a widget factory, set enableSkin to true and select the skin ‘theme’ for the jui widgets:




'components'=>array(

  ...

  'widgetFactory'=>array(

    'class'=>'CWidgetFactory',

    'enableSkin'=>true,

    'widgets' => array(

      'CJuiTabs' => array(

        'skin'=>'yiitheme',

      ),

      'CJui...' => array(

        'skin'=>'yiitheme',

      ),

      ...

    ),

  ),

  ...

),

An inherited common configuration (from CJuiWidget) seems not to be possible.

3. Now select a Yii theme and jui widgets should change jui theme too whats selected in the corresponding skin files, in my example mywebapp/themes/some-yii-theme/views/skins/CJuiTab.php, …




return array(

  'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',

  'name'=>'My Web Application',

  'theme'=>'some-yii-theme',

  ...

);

Edit:

I noticed that Qiang checked in an enhancement for release 1.1.5, enabling us to also add widget view files to the Yii themes. This looks really good.

Edit2: skin name ‘theme’ changed to ‘yiitheme’ to reduce confusion

/Tommy

10

Hi Tommy & Mike,

Sorry Mike I will post my other requests in the General Category.

Tommy, yes we can do what you are saying and thanks for the explanation and suggestion, it does make sense putting it like a skin and placing them in themes.

I really appreciate the help, sorry for the delayed reply.

Regards,

Wenceslaus D’silva

11

Not tested yet, but I added a possible solution for switching skin in one place, still adhering to the individual widget properties defined in each skin.

See this thread.

/Tommy