9

我在当前的项目中制作了一个简单的小部件。简单地说，它为所有 jui 主题创建了一个选择选项列表，并允许用户更改主题并通过 cookie 保存它。

这个小部件需要两个 javascript 文件， -它们在 run() 中注册- 其中一个是 jquery cookies 插件。我问的是如何保存这个小部件及其 js 文件的完整性，以便在其他 Yii2 项目中轻松重用，而无需手动复制所有需要的 js 文件？

<?php
namespace common\libs;

use yii;
use yii\base\Widget;
use yii\web\View;
use yii\web\JqueryAsset;
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * Description of JuiThemeSelectWidget
 *
 * @author Said Bakr
 */
class JuiThemeSelectWidget extends Widget
{
  private $list;
  private $script;
  private static $juiThemeSelectId = 'JuiThemesList';
  public $themeListId;
  public $label;
  public function init() {
    parent::init();
    if ($this->themeListId)   self::$juiThemeSelectId = $this->themeListId;
    $this->list = $this->createSelectList($this->getThemesList());
    $this->makeScript();
  }
  public static function getThemesList()
  {
    $themesPath =  dirname(Yii::$app->basePath).DIRECTORY_SEPARATOR."vendor".DIRECTORY_SEPARATOR."bower".DIRECTORY_SEPARATOR."jquery-ui".DIRECTORY_SEPARATOR."themes";
    $output = [];
    foreach (scandir($themesPath) as $item){
      if (is_dir($themesPath.DIRECTORY_SEPARATOR.$item) && ($item != '.' && $item !='..')) $output[] = $item;
    }
    return $output;
  }

  public static function createSelectList($items)
  { 
    $juiThemeSelectId = self::$juiThemeSelectId;    
    $output = '';
    $output .= "<select id=\"$juiThemeSelectId\">"."\n";
    foreach ($items as $item){
      $output .= "<option value='$item'>$item</option>\n";
    }
    $output .= "</select>\n";
    return $output;
  }

  /**
   * Making the client-side script for the list   */

  private  function makeScript()
  {

    $t = self::$juiThemeSelectId;
    $this->script = <<<EOD

<script>
    var juiThemeSelectId = "$t"   
</script>           
EOD;

  }
  public function run() {
    parent::run();
    $this->getView()->registerJsFile('/myjs/jquery.cookie.js', ['depends' => [JqueryAsset::className()]]);
    $this->getView()->registerJsFile('/myjs/JuiThemeSelect.js', ['depends' => [JqueryAsset::className()]]);
    return "$this->label $this->list \n $this->script";
  }
}
4

2 回答 2

11

最后我找到了解决方案。它依赖于Yii2 Extensions和AssetBundles。故事很简单，只需将一个文件夹中的所有文件放在一个默认的 Yii2 文件夹中，例如：common、vendor。-顺便说一下，vendor 在基本和高级 yii2 应用程序的模板中都可以找到-。

除了所有文件，即对于我的情况，小部件类 php 文件和 javascripts 文件，您必须创建 YourWidgetNameAsset php 类文件。事实上，解决方案的万能钥匙就在那个类中。

我的情况

我有一个名为JuiThemeSelectWidget的小部件，我将它放在一个名为 directory 的文件夹saidbakr中，vendor这样我们就有了vendor\saidbakr命名空间。该文件夹包含以下四个文件：

  1. JuiThemeSelectWidget.php
  2. JuiThemeSelectAsset.php
  3. JuiThemeSelect.js
  4. jquery.cookie.js

文件号 3 取决于文件号 4 用于创建 cookie 以保存最后用户的选择。

现在让我们看看文件号 2 的代码JuiThemeSelectAsset.php：

<?php
namespace vendor\saidbakr;
use yii\web\AssetBundle;

/*
 * It is free for use and modify with one simple rule:
 * regarding credits for the author either it modified or not
 * Author: Said Bakr. said_fox@yahoo.com
 * http://2index.net
 */

/**
 * Description of Kabb
 *
 * @author Said
 */
class JuiThemeSelectAsset extends AssetBundle
{
  public $sourcePath = '@vendor/saidbakr';

    public $autoGenerate = true;
    /**
     * @inheritdoc
     */
    public $js = ['jquery.cookie.js','JuiThemeSelect.js'];
    public $depends = [
        'yii\jui\JuiAsset',
    ];
}

在这里，我们为小部件定义了 AssetBundle，类似于官方源代码中的描述。

现在我们将看一下小部件类本身的标头及其run()方法：

<?php
namespace vendor\saidbakr;

use yii;
use yii\base\Widget;
//use yii\web\View;
//use yii\web\JqueryAsset;
class JuiThemeSelectWidget extends Widget
{
  // ...... Class code....

public function run() {
    parent::run();
    JuiThemeSelectAsset::register($this->getView());    
    return "$this->label $this->list \n $this->script";
  }
}

很明显，我们使用了此链接中描述的资产包，但在这里我们使用$this->getView()了而不是$this因为该方法不是从视图中调用的。

我已经压缩了名为 Yii2 Extension 的文件夹并将saidbakr其上传到此位置或签出此GitHub 存储库，以检查我做了什么，其名称为Yii2 Extension。只需将压缩包的内容解压缩到 vendor 文件夹下的名为 saidbakr的文件夹中，因此文件结构必须是 `vendor\saidbakr(上面列表中的四个文件)，并在您的视图中使用小部件，如下所示：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\jui\DatePicker;
use vendor\saidbakr\JuiThemeSelectWidget;
?>
<div>
<?= JuiThemeSelectWidget::widget(['label' => 'Select New JUI Theme', 'themeListId' => 'fox']) ;?>
<div class="profile-form">
</div> 
<h2>Testing Elements for the JUI</h2>
<form>
<select id="sel">
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
</select>
</form>
<?php $this->registerJs("$('#sel').selectmenu();") ;?>
于 2015-01-25T23:21:17.863 回答
1

在 yii2 中添加 Widget 在根目录中创建 components 文件夹。然后创建 php 文件。在该文件中使用命名空间组件（命名空间 app\components）。包括小部件（使用 app\base\widget）。创建扩展 Widget 类命名空间 app\components 的类；使用 yii\base\Widget；创建一个包含从小部件调用的视图文件的视图文件夹。

于 2015-09-19T17:54:16.350 回答