用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先创建了一个树形结构图,方便查看整体结构。又在右侧以类型为组建立各个标签(按需修改),支持标签排序、添加、修改等。
<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先创建了一个树形结构图,方便查看整体结构。又在右侧以类型为组建立各个标签(按需修改),支持标签排序、添加、修改等。
相关文章推荐
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 神器推荐:应用之星,零代码就能制作炫酷的H5页面
- jQuery炫酷3D旋转幻灯片特效插件
- YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法
- 【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)
- 神器推荐:应用之星,零代码就能制作炫酷的H5页面
- 关于UEditor插件的使用以及UEditor数据回显问题,数据库存储标签代码前台页面如何解析问题小结
- 在NebBean中配置常用插件-调试/预览页面/打开项目文件夹/JS代码提示
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
- 在NebBean中配置常用插件-调试/预览页面/打开项目文件夹/JS代码提示
- DTCMS插件的制作实例电子资源管理(二)Admin后台页面编写
- php代码替换页面中的html标签[magicliu]
- 如何在aspx页面中得到aspx.cs后台代码中的值
- DataList嵌套DataList 子DataList访问父DataList数据(1. 页面绑定后台代码实现 纯代码)
- 在新窗口中打开页面 的asp.net后台代码
- 分页的页面代码和后台代码
- Jsp/Java代码分离.实现页面真正的代码分离 实现框架代码,jxui:page标签
- DataList嵌套DataList(页面绑定后台代码使用ItemDataBound事件实现 纯代码)
- 用定制标签库和配置文件实现对JSP页面元素的访问控制
- js+vml创建3D页面效果代码