README

jQCloud小部件是一个基于 jQCloud 定制的脚本，它用于制作像云朵形状的词云和标签云。

jQCloud截图

安装

首选的安装方法是使用 composer。

运行以下命令：

php composer.phar require coderius/yii2-jqcloud2-widget "@dev"

或者将以下内容添加到您应用程序的 composer.json 文件的 require 部分中：

"coderius/yii2-jqcloud2-widget" : "@dev"

基本用法。

在视图中

use coderius\jqcloud2;

<?= \coderius\jqcloud2\jQCloud::widget([
    'tagOptions' => [
        'style' => 'width:100%; height: 350px; border: 1px solid #ccc;',
    ],
    
    'wordsOptions' => [
        ['text'=>"Lorem",'weight' => 13, 'link' =>"#"],
        ['text'=>"Ipsum",'weight' => 10.5, 'html' => ['title' => "My Title", "class" => "custom-class"], 'link' => ['href' => "https://jqueryjs.cn/", 'target' => "_blank"]],
        [
            'text'=>"Dolor",
            'weight' => 9.4, 
            'handlers' => [
                'click' => new \yii\web\JsExpression("
                    function() {
                        alert('You clicked the word !');
                    }
                "),
            ]
        ],
        ['text'=>"Sit",'weight' => 8],
        ['text'=>"Amet",'weight' => 6.2],
        ['text'=>"Consectetur",'weight' => 5],
        ['text'=>"Adipiscing",'weight' => 5],
        ['text'=>"Elit",'weight' => 5],
        ['text'=>"Nam et", 'weight' => 5]
            
    ],
   
]); ?>

高级用法。

在视图中

use coderius\jqcloud2;

<?= \coderius\jqcloud2\jQCloud::widget([
    'tagOptions' => [
        'style' => 'width:100%; height: 350px; border: 1px solid #ccc;',
//        'id' => 'myid',
        ],
    
    'wordsOptions' => [
        ['text'=>"Lorem",'weight' => 13, 'link' =>"#"],
        ['text'=>"Ipsum",'weight' => 10.5, 'html' => ['title' => "My Title", "class" => "custom-class"], 'link' => ['href' => "https://jqueryjs.cn/", 'target' => "_blank"]],
        [
            'text'=>"Dolor",
            'weight' => 9.4, 
            'handlers' => [
                'click' => new \yii\web\JsExpression("
                    function() {
                        alert('You clicked the word !');
                    }
                "),
            ]
        ],
        ['text'=>"Sit",'weight' => 8],
        ['text'=>"Amet",'weight' => 6.2],
        ['text'=>"Consectetur",'weight' => 5],
        ['text'=>"Adipiscing",'weight' => 5],
        ['text'=>"Elit",'weight' => 5],
        ['text'=>"Nam et", 'weight' => 5]
            
    ],
    'cloudOptions' => [
        'delay' => 50,
        'autoResize' => true,
//        'colors' => ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffeda0", "#ffffcc"],
        'fontSize' => [
            'from' => 0.1,
            'to' => 0.02
        ]
    ],
    'methods' =>    function($containerId, $words){
                        return new \yii\web\JsExpression("
                            var arr = arr || $words;
                            $('#update-demo').on('click', function(e) {
                                e.preventDefault();
                                arr.splice(0, 1);
                                $('#{$containerId}').jQCloud('update', arr);
                            });
                            
//                            $('#{$containerId}').jQCloud('destroy');

                        ");
                    } 
   
    
]); ?>

帮助我们改进这个扩展。

如果您认为这个扩展对您有用，请点击以下链接 设置星标。

有关选项的更多信息，请查看： jQuery 插件网站

关于在本小部件中使用的插件的引用，请查看 github 仓库。