Jump 2 Link ¶

1. 1.Usage
2. 2. How to create this widget by yourself?**
3. 3. Read More

1.Usage ¶

Usage:
    use app\components\jump2link;
    echo jump2link::widget(['message' => 'Jump to baidu?',
                            'jump2link' => 'http://www.baidu.com']);
    echo jump2link::widget(['message' => 'Jump 2 about page?',
                            'jump2link' => ['site/about']]);
    echo jump2link::widget(['message' => 'Another Jump 2 about page?',
                            'id' => 'myClickId',
                            'htmlOptions' => ['class' => 'btn btn-success btn-xs',],
                            'jump2link' => ['site/about']]);

2. How to create this widget by yourself?** ¶

a. create jump2link.php in your app/components folder, contents as below:

<?php
/**
 * Created by PhpStorm.
 * User: Scott_Huang
 * Date: 2015-12-15
 * Time: 12:52 PM
 */

namespace app\components;

use yii\base\Widget;
use yii\helpers\Html;
use yii\web\View;


/**
 Usage:
    use app\components\jump2link;
    echo jump2link::widget(['message' => 'Jump to baidu?',
                            'jump2link' => 'http://www.baidu.com']);
    echo jump2link::widget(['message' => 'Jump 2 about page?',
                            'jump2link' => ['site/about']]);
    echo jump2link::widget(['message' => 'Another Jump 2 about page?',
                            'id' => 'myClickId',
                            'htmlOptions' => ['class' => 'btn btn-success btn-xs',],
                            'jump2link' => ['site/about']]);
 */

/**
 * An widget to generate a link/button which can jump to new link once get user confirmation. Or else, no action.
 * by Scott Huang
 *
 * @author Scott Huang <Scott_Huang@qq.com>
 * @version 0.1
 * @Xiamen China
 */
class jump2link extends Widget
{
    /**
     * @var string , show info for user to confirm
     */
    public $message;

    /**
     * @var string or array
     * such as: http://www.baidu.com
     * or: ['site/about','param1'=>'xxx']
     */
    public $jump2link = '#';

    public $data = array();
    /**
     * @var array $htmlOption the HTML tag attributes configuration
     * such as: ['class'=>'btn btn-info']
     * or ['id'=>'myJump2Link','class'=>'btn btn-info']
     */
    public $htmlOptions = ['class' => 'btn btn-info'];

    public function init()
    {
        parent::init();
        if ($this->message === null) {
            $this->message = 'Please confirm jump to new link?';
        }
    }

    public function run()
    {
        $id = $this->getId();
        if (!isset($this->htmlOptions['id'])) {
            $this->htmlOptions['id'] = $id;
        }

        echo Html::a($this->message, $this->jump2link, $this->htmlOptions);
//        echo '<div ' . Html::renderTagAttributes($this->htmlOptions) . '></div>';
        $this->registerClientScript($this->message, $this->jump2link, $this->htmlOptions['id']);
    }

    /**
     * Registers required scripts
     */
    public function registerClientScript($message, $jump2link, $clickId)
    {
        $jump2link = is_array($jump2link)?'#':$jump2link;
        $script = <<<JS
        (function() {
            var $, confirmBeforeJump;

  confirmBeforeJump = function(message) {
      var answer;
      if (message == null) {
          message = "Ready for Coffee?";
      }
      answer = confirm(message);
      //"Your answer is " + answer;
      if (answer === true) {
          window.location.href = "{$jump2link}";
          return true;
      } else {
          return false;
      }
  };

  $ = jQuery;

  $(function() {
      return $("#{$clickId}").click(function() {
          return confirmBeforeJump("{$message}");
      });
  });
}).call(this);
JS;
        $view = $this->getView();
        $view->registerJs($script, View::POS_READY, $clickId);
    }

}

b.The key javascript code at above registerClientScript function

I write it with coffee script like below, and then compile to generate normal JS, replace some link/msg with var.
You can find coffee script ore easy and simple:)
Anyway, you can ignore below details if still like normal JS:)

confirmBeforeJump = (message = "Ready for Coffee?") ->
  answer = confirm message
  if(answer == true)
    window.location.href="http://www.baidu.com";
    return true;
  else
    return false;

$ = jQuery
$ ->
  $("#myClick").click ->
    confirmBeforeJump("Confom jump to Baidu?")

3. Read More ¶

I just put this small widget in components folder. However, in case the widget is big, you can put it in vendor folder. You can read below article for how to create a widget and upload into github=>packagist and install by composer.

Google Chart