sk8090 发表于 2016-3-21 12:41:40

WEB 按钮大小调整

本帖最后由 Lenka.Guo 于 2016-3-22 17:07 编辑

请问.arvToolBar中样式标志如何获取？

Lenka.Guo 发表于 2016-3-21 17:21:11

抱歉回复晚了，我会跟您的描述，验证方法之后给您回复

sk8090 发表于 2016-3-22 15:54:53

Lenka.Guo 发表于 2016-3-21 17:21
抱歉回复晚了，我会跟您的描述，验证方法之后给您回复

谢谢！

Lenka.Guo 发表于 2016-3-22 17:02:58

本帖最后由 Lenka.Guo 于 2016-3-22 17:07 编辑

您好，
经过验证，在调整“.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文件中的版本号和页面的版本号）




sk8090 发表于 2016-3-22 21:57:01

谢谢！

sk8090 发表于 2016-3-23 01:06:47

您好！ 经测试所有相应样式后面保留 “!important”即可！其他javascript代码取消，否则影响数据加载。

Lenka.Guo 发表于 2016-3-23 09:15:36

不客气~~~:lol
页: [1]
查看完整版本: WEB 按钮大小调整