修改HTMLViewer的Toolbar button的尺寸

登录

本帖最后由 Lenka.Guo 于 2016-3-24 12:25 编辑

功能介绍：
有用户反映，使用HTMLViewer 时，报表浏览器上面的工具栏太小了，能否放大？或是移除之后，添加新的button代替。
于是就有今天的这篇帖子。通过修改css 样式来修改Toolbar button的大小，所有的报表浏览器中的CSS类，都可以通过在浏览器中按F12 获取。

开发环境：
VS2012+ActiveReports 10 SP1+.Net4.5
实现步骤：

在调整“.arvToolBar” 大小时，需要先调整大小距离，否则会导致Viewer布局错乱（但有用户反映，说不加也可以，加了会影响性能，这个看个人需求吧）。

1. 在页面中添加<script>脚本，代码如下（调整Sidebar-panel和main-panel容器的Top距离,调整.arvToolBar容器的高度）：
<script type="text/javascript" language="javascript">
      $(document).ready(function () {
         $("#viewer-layout-toolbar-panel").css('height', '120px');
         $("#viewer-layout-sidebar-panel").css('top', '55px');
         $("#viewer-layout-main-panel").css('top', '55px');
      });
</script>

2. 添加<style>,修改.arvToolBar的属性，记得添加!important 标志，否则css会由于优先级不够，被覆盖。
<style type="text/css">
      .arvToolBar button{
         height:100px !important;
         width:80px !important;
         background-position: center 0 !important;
      }

</style>

3. 修改按钮图表，可通过点击F12,将鼠标置于按钮上方，来查看按钮的类名称，获取名称后，修改 background-image 属性；

   .btnNext
      {
         background-image:url();
      }

附件：（使用ActiveReports10 SP1开发，如果版本与您的版本不一致，需要使用“工具”->转换成ActiveReports 10,必要时需要手动修改WebConfig文件中的版本号和页面的版本号）

		自动登录	找回密码
密码			立即注册

修改HTMLViewer的Toolbar button的尺寸

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄