用tagcloud插件制作的超炫酷“云标签”（3D旋转和平铺），附前后台代码及标签配置页面

HTML:（下方有图）

<link type="text/css" rel="stylesheet" href="__PUBLIC__/vendors_no/tagcloud/css/tagcloud.css">
<script src="__PUBLIC__/vendors_no/tagcloud/js/tagcloud.js"></script>
<script src="__PUBLIC__/vendors_no/tagcloud/js/tagcloud.min.js"></script>

<div class="col-lg-3 tab-content" style="margin-top:40px;min-height:860px;">
      <div style="border:1px solid #ddd;margin-bottom:30px;">
        <button title="3D旋转" id="style_whirl" type="button" data-type="jplist-grid-view" class="jplist-view jplist-grid-view btn btn-default"><i class="fa fa-th"></i></button>
        <button title="平铺" id="style_tile" type="button" data-type="jplist-thumbs-view" class="jplist-view jplist-thumbs-view btn btn-default"><i class="fa fa-reorder"></i></button>
        <div class="tagcloud">
          <a class="text-primary" href="">全部工单</a> //为全面考虑加一个《全部XX》的标签
          <volist name="tags" id="vo">
            <a class="text-primary" href="">{$vo}</a> //后台查询所有标签，这里可以利用a标签写点击事件
          </volist>
        </div>
        <div style="height:240px;padding:20px;overflow:auto;" class="tagtile">
         <a class="btn btn-outlined btn-primary btn-xs mrm mas" href="">全部工单</a>
         <wbr>
         <volist name="tags" id="vo">
           <wbr>
           <a class="btn btn-outlined btn-primary btn-xs mrm mas" href="">{$vo}</a>
           </wbr>
         </volist>
         </wbr>
 </div>
</div>
<div>

JS:

var tagstyle = {$tagstyle};
tagcloud({
    fontsize: 14,       //基本字体大小
    radius: 80,         //滚动半径
    mspeed: "slow",     //滚动最大速度
    ispeed: "slow",     //滚动初速度
    direction: 135,     //初始滚动方向
    keep: true          //鼠标移出组件后是否继续随鼠标滚动
});

$("#style_whirl").click(function(){ //样式切换
  $(".tagcloud").fadeIn();
  $(".tagtile").hide();
})
$("#style_tile").click(function(){
  tagstyle = 2;
  $(".tagcloud").hide();
  $(".tagtile").fadeIn();
})


if(tagstyle == 1){ 判断页面刚进入的样式
  $(".tagtile").hide();
}else if(tagstyle == 2){
  $(".tagcloud").hide();
}

后台查询太简单，略去。

下面再附上标签配置页面图，我这个页面是利用bootstrap先创建了一个树形结构图，方便查看整体结构。又在右侧以类型为组建立各个标签（按需修改），支持标签排序、添加、修改等。