corethink功能模块探索开发(十八)前台页面插入jit前端数据可视化库
2016-04-14 21:08
531 查看
效果图:
1.静态文件放入View目录中
在View目录下新建Public目录,在Public目录下新建js、css目录。
把jit的资源放入对应目录中
2.在html中引入jit
Application/Equip/View/Index/index.html
<extend name="$_home_public_layout"/>
<block name="style">
<!-- CSS Files -->
<link type="text/css" href="Application/Equip/View/Public/css/base.css" rel="stylesheet" />
<link type="text/css" href="Application/Equip/View/Public/css/Treemap.css" rel="stylesheet" />
</block>
<block name="script">
<!--[if IE]><script language="javascript" type="text/javascript" src="bzunc/Application/Equip/View//Public/js/excanvas.js"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/jit.js"></script>
<!-- Example File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/example1.js"></script>
<script language="javascript" type="text/javascript">
$(window).load(function(){
init();
});
</script>
</block>
<block name="main">
<div id="container">
<div id="left-container">
<div class="text">
<h4>
Animated Squarified, SliceAndDice and Strip TreeMaps
</h4>
In this example a static JSON tree is loaded into a Squarified Treemap.<br /><br />
<b>Left click</b> to set a node as root for the visualization.<br /><br />
<b>Right click</b> to set the parent node as root for the visualization.<br /><br />
You can <b>choose a different tiling algorithm</b> below:
</div>
<div id="id-list">
<table>
<tr>
<td>
<label for="r-sq">Squarified </label>
</td>
<td>
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
</td>
</tr>
<tr>
<td>
<label for="r-st">Strip </label>
</td>
<td>
<input type="radio" id="r-st" name="layout" value="top" />
</td>
<tr>
<td>
<label for="r-sd">SliceAndDice </label>
</td>
<td>
<input type="radio" id="r-sd" name="layout" value="bottom" />
</td>
</tr>
</table>
</div>
<a id="back" href="#" class="theme button white">Go to Parent</a>
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
</div>
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="right-container">
<div id="inner-details"></div>
</div>
<div id="log"></div>
</div>
</block>完成了。
此处静态文件的路径填写并没有处理的很好。
1.静态文件放入View目录中
在View目录下新建Public目录,在Public目录下新建js、css目录。
把jit的资源放入对应目录中
2.在html中引入jit
Application/Equip/View/Index/index.html
<extend name="$_home_public_layout"/>
<block name="style">
<!-- CSS Files -->
<link type="text/css" href="Application/Equip/View/Public/css/base.css" rel="stylesheet" />
<link type="text/css" href="Application/Equip/View/Public/css/Treemap.css" rel="stylesheet" />
</block>
<block name="script">
<!--[if IE]><script language="javascript" type="text/javascript" src="bzunc/Application/Equip/View//Public/js/excanvas.js"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/jit.js"></script>
<!-- Example File -->
<script language="javascript" type="text/javascript" src="/bzunc/Application/Equip/View/Public/js/example1.js"></script>
<script language="javascript" type="text/javascript">
$(window).load(function(){
init();
});
</script>
</block>
<block name="main">
<div id="container">
<div id="left-container">
<div class="text">
<h4>
Animated Squarified, SliceAndDice and Strip TreeMaps
</h4>
In this example a static JSON tree is loaded into a Squarified Treemap.<br /><br />
<b>Left click</b> to set a node as root for the visualization.<br /><br />
<b>Right click</b> to set the parent node as root for the visualization.<br /><br />
You can <b>choose a different tiling algorithm</b> below:
</div>
<div id="id-list">
<table>
<tr>
<td>
<label for="r-sq">Squarified </label>
</td>
<td>
<input type="radio" id="r-sq" name="layout" checked="checked" value="left" />
</td>
</tr>
<tr>
<td>
<label for="r-st">Strip </label>
</td>
<td>
<input type="radio" id="r-st" name="layout" value="top" />
</td>
<tr>
<td>
<label for="r-sd">SliceAndDice </label>
</td>
<td>
<input type="radio" id="r-sd" name="layout" value="bottom" />
</td>
</tr>
</table>
</div>
<a id="back" href="#" class="theme button white">Go to Parent</a>
<div style="text-align:center;"><a href="example1.js">See the Example Code</a></div>
</div>
<div id="center-container">
<div id="infovis"></div>
</div>
<div id="right-container">
<div id="inner-details"></div>
</div>
<div id="log"></div>
</div>
</block>完成了。
此处静态文件的路径填写并没有处理的很好。
相关文章推荐
- corethink功能模块探索开发(一)根据已有模块推测目录结构
- corethink功能模块探索开发(二)让这个模块可安装
- corethink功能模块探索开发(三)让这个模块可见
- corethink功能模块探索开发(四)让这个模块跑起来
- corethink功能模块探索开发(五)开启这个模块的配置
- corethink功能模块探索开发(七)模块数据库脚本
- corethink功能模块探索开发(八)净化后台首页的系统信息
- corethink功能模块探索开发(十)前台显示公告列表
- corethink功能模块探索开发(十一)后台查询数据列表
- corethink功能模块探索开发(十二)后台添加自定义按钮
- CoreThink开发(十三)增加页面加载动画
- CoreThink开发(十二)更改默认出错异常页防止暴露敏感数据
- CoreThink开发(十一)首页控制器判断移动设备还是PC并做相应处理
- CoreThink基础模块结构、主题,开源地址
- CoreThink主题开发(九)使用H-ui开发博客主题之用户个人主页
- JavaScript的console.log()
- h264图像数据的读入以及fenc的传递
- HTML/XHTML
- hdu1203 I NEED A OFFER! 01背包
- 前端