Yii 1.1: A simple go back button widget

6 followers

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:

  1. Back is the text that the button will show.
  2. name will be the name of the button
  3. class just in case that you want to do it pretty :).
  4. styles that you want to use. In my case I will change the width.
  5. 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 :

  1. application.ext.data.EBackButtonWidget is the path to our widget.
  2. 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.

Total 7 comments

#17587 report it
CTala at 2014/07/04 09:36am
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.

#17580 report it
Rohit Suthar at 2014/07/04 08:07am
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'));
#11191 report it
samilo at 2012/12/24 04:03pm
I'ts Cool

Thank you , it's help me to learn basic widget structure

#10357 report it
jpablo at 2012/10/22 07:20pm
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)

#10343 report it
CTala at 2012/10/21 01:08pm
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 !

#10342 report it
bryglen at 2012/10/21 12:14pm
widget not useful

its not advisable to create this in a widget, just a waste. just used onclick='history.go(-1); return false'

#10203 report it
rosoft2001 at 2012/10/10 09:20pm
return false;

for CHtml::link I used

'onclick' => "history.go(-1);return false;"

otherwise the page is just reloading.

Leave a comment

Please to leave your comment.

Write new article