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

HTML:（下方有图）

     

       
       
       

          全部工单 //为全面考虑加一个《全部XX》的标签
         
            {$vo} //后台查询所有标签，这里可以利用a标签写点击事件
         
       

       

         全部工单
         
         
           
           {$vo}
           
         
         
 

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先创建了一个树形结构图，方便查看整体结构。又在右侧以类型为组建立各个标签（按需修改），支持标签排序、添加、修改等。