历史版本7 :JS实现自定义工具栏高度 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
有的时候我们想自定义工具栏的高度，比如修改为40px如下图：
2. 思路编辑
可以利用填报页面设置中“加载结束”事件，利用js控制工具栏的高度。
3. 操作步骤编辑
根据预览模式，比如修改填报预览下的工具栏高度，点击模板>模板web属性>填报预览设置，选择为该模板单独设置，然后添加加载结束事件，如下图：
具体js如下：
//x-toolbar是工具栏所在的div class样式
$(".x-toolbar").css({
"height":"40px",
"background-size":"100% 110%",
"border-bottom":"solid 1px #d0d0d0",
"border-top":"solid 1px #d0d0d0"
})
$(".x-toolbar table").attr("style","height:40px")
//窗口改变大小重新设置工具栏高度
$(window).resize(function() {
$(".x-toolbar").css({
"height":"40px",
"background-size":"100% 110%",
"border-bottom":"solid 1px #d0d0d0",
"border-top":"solid 1px #d0d0d0"
})
});
4. 预览效果编辑
4.1 PC端预览效果
保存模板，选择填报预览，实现效果如上。
注：经过测试，移动端暂不支持该效果。
5. 已完成模板编辑
模板效果在线查看请点击：JS实现自定义工具栏高度.cpt
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\08-JS实现自定义工具栏高度.cpt