A simple go back button widget

You are viewing revision #1 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#2) »

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: <br/>

  1. Back is the text that the button will show. <br/>
  2. name will be the name of the button <br/>
  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:

    '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][original]. [original]: http://www.cristiantala.cl/crear-un-widget-en-yii-boton-volver/

2 1
Viewed: 25 977 times
Version: Unknown (update)
Category: How-tos
Written by: CTala
Last updated by: bennouna
Created on: Oct 4, 2012
Last updated: 5 years ago
Update Article


View all history

Related Articles