We all know that widgets are really useful. We can use the almost everywhere we want, and we can use the same code a lot of times ( Almost OOP ).
In this case we are going to create a really useful and simple widget. A GoBack button.
Why a widget ? Simple, we can extend the variables and make it as complex as we want, but will not be this case ;). We are going to pass just 1 variable if we need it.
Under your ext folder or widget folder ( mine under protected/ext/data ) create the following widget:
class EBackButtonWidget extends CWidget {
public $width = "150px";
public function run() {
echo CHtml::button('Back', array(
'name' => 'btnBack',
'class' => 'uibutton loading confirm',
'style' => 'width:'.$this->width.';',
'onclick' => "history.go(-1)",
)
);
}
}
Where:
- Back is the text that the button will show.
- name will be the name of the button
- class just in case that you want to do it pretty :).
- styles that you want to use. In my case I will change the width.
- onclick will execute our JS. In this case to go back 1 page.
To call this widget we simple:
<?
$this->widget('application.ext.data.EBackButtonWidget',
array(
'width' => "100%",
));
?>
Where :
- application.ext.data.EBackButtonWidget is the path to our widget.
- width will be the width param that we give to the widget.
And that is it !!
Here's a very readable link in spanish to the original [tutorial][original]. [original]: http://www.cristiantala.cl/crear-un-widget-en-yii-boton-volver/
return false;
for CHtml::link I used
'onclick' => "history.go(-1);return false;"
otherwise the page is just reloading.
widget not useful
its not advisable to create this in a widget, just a waste. just used onclick='history.go(-1); return false'
Bryglet
The all idea of a widget is use it whenever and wherever you want it. If you prefer to code it each time, just do it.
This is a simple widget that you can extend to make it better if you like, if you dont, so sad ;).
I just dont like the idea of copy & paste each time that I need something. In my case I use something more complex for the go back button, but is not the idea to show everything in this how to.
Have a nice day !
Kind of overkill?
It's a nice idea to have a common design and behavior for a Back Button, but the common design should be done with a simple CSS class, and the common behavior is just
'onclick' => "history.go(-1);return false;".
Anything else seems bloatted code to me. But I can be wrong, of course. I'd like to know in which scenarios a back button will need further added functionality (not design, because design should be CSS based)
I'ts Cool
Thank you , it's help me to learn basic widget structure
Not required widget
Not required to create any widget for back button, just need to write single line of code..
echo CHtml::button('Back',array('name' => 'btnBack','onclick'=>'js:history.go(-1);returnFalse;','class'=>'uibutton loading confirm'));
Thank you ...
@Rohit, this is for the ones like me that at the beginning did not understand the basic concepts of a widget. But thank you for the destructive Feedback.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.