A simple go back button widget Follow @yiiframework

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.

Total 5 comments

#11191

samilo at 2012/12/24 04:03pm

I'ts Cool

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

#10357

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

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

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

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.

Please login to leave your comment.

A simple go back button widget Follow @yiiframework

Total 5 comments

Leave a comment

Yii Supporters