CHtml::ajaxButton theme/skin

Yii 1.1 General Discussion
1

Hey guys,

So, I’ve been playing around with Yii for a while now, and, hopefully, I will see the benefits of the time I’ve put in later, when I’ve reach a certain point… I have a feeling things will be done faster later on… :)

Anyway, I noticed that zii.widgets.jui.CJuiButton is using jquery themes, which is all nice and dandy. However, it looks odd, when I add a CJuiButton next to a CHtml::ajaxButton! So, what I’m wondering here is, how can I change the CHtml::ajaxButton to match the CJuiButton easiest? Is setting a class enough? If so, what?

Basically, I just want to be able to match these buttons somehow, so it doesn’t look odd.

Thanks,

Chillance

2

I think you could extend CJuiButton and create your own button. I’ve never done this but I think it is possible. So, you can create a new class, extends CJuiButton, and put it con components folder. And just call ext.components.CJuiButton instead of zii.widgets.jui.CJuiButton

3

How will that help me with the CHtml::ajaxButton? From what I can tell, the CHtml::ajaxButton button isn’t skinned/themed at all per default… looks like some default kind of button rendered straight from the browser…

4

[color="#006400"]/* moved to Yii 1.1 Help Forum */[/color]

5

Sorry … you can extend CHtml class =).

6

That’s the big problem with jQuery UI - either use it, or not.

You could instead turn it off and use another theme library. Which works ‘globally’ across widgets, forms, elements.

7

You don’t happen to have anything there ready? ;) This can’t be the first time someone thought of this. Would be nice to extend the CHtml class to theme just like CJuiButton does…

8

How do I do this?

Also, I just noticed that maybe I should extend the CJuiButton class, as that uses CHtml:: internally! Would be an awesome solution, however there are a few bumps on the road inheriting from it as it throws an exception when it’s not any of the defined ones… I can catch it though, but it’s not a nice solution. Works for now though I guess…

9

One way I discovered:

Use the Yii RegisterClientScript:

Yii::app()->clientScript->registerScript(‘YourScriptName’,"

$( ‘input:button’, ‘.yourClassName’ ).button();

",CClientScript::POS_READY);

And then call the AjaxButton in a container with your classname:

<div class="yourClassName">

&lt;? PHP echo CHtml::ajaxButton(


    label,


    url,


    ajaxOptions,


    htmlOptions,


);

?>

</div>

Then your Button ist styled using the JQuery UI.

Greetings

Slow.Fox

10

Neat! Waay easier than my solution, although I did learn some more Yii doing my new class… :)

Thanks for the info!