您的位置:首页 > 编程语言

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

2016-11-29 13:46 507 查看
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>
//为全面考虑加一个《[b]全部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>[/b]

[b]JS:[/b]

[b]var tagstyle = {$tagstyle};

tagcloud({

    fontsize: 14,       //基本字体大小

    radius: 80,         //滚动半径

    mspeed: "slow",     //滚动最大速度

    ispeed: "slow",     //滚动初速度

    direction: 135,     //初始滚动方向

    keep: true          //鼠标移出组件后是否继续随鼠标滚动

});
[/b]

[b]$("#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();

}
[/b]

后台查询太简单,略去。








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




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息