自定义缩放按钮

顶( )

最后更新日期：

有人发表评论 (点击查看)

问题描述
示例

放大和缩小控件,自定义缩放，放大按钮，缩小按钮，放大控件，缩小控件。

1. 问题描述

一般情况下我们将网页中的一部分潜入了一张FR做的报表，图表数据比较密集，我们希望能够进行缩放，从而更加清楚地查看报表，就需要定义报表的缩放。

缩放可放大和缩小报表页面，Web页面调用,效果如下;

注：也可以直接在模板工具栏中添加缩放按钮。

2. 示例

我们使用模板FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Bubble.cpt来作为内嵌iframe。

首先定义javascript代码触发放大缩小的功能，代码如下：

其次在body里面直接调用js里面定义好的方法，代码如下：

完整代码如下

<html>  
 <head>  
  <title>FineReport Demo</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
 </head> 
<script type="text/javascript">      
   function afterload(){      
   document.getElementById('reportFrame').contentWindow.contentPane.scale('-');      
   fuzhi();      
   }      
   function afterload2(){      
   document.getElementById('reportFrame').contentWindow.contentPane.scale('+');      
   fuzhi();      
   }      
   function fuzhi()      
   {      
       var contentPane = document.getElementById("reportFrame").contentWindow.contentPane;      
       var zoom = contentPane.zoom * 100 +"%";       
       document.getElementById("zoom").value = zoom;  //将新的显示百分比赋给zoom文本框    
   }      
</script>  
 <body>  
 <iframe id="reportFrame" width="900" height="500" src="/WebReport/ReportServer?reportlet=/doc/Advanced/Chart/Bubble.cpt"></iframe>  
<body onload="fuzhi()">    
        <div id="toolbar">    
            <input type="button" onclick="afterload();" value="-"></input>    
            <input id="zoom" type="text" readonly="true" style="width: 80px">    
            <input type="button" onclick="afterload2();" value="+"></input>    
        </div> 
 </body>  
</html>

已完成示例请参照%FR_HOME%\WebReport\page_demo\zoom.html

在线查看示例效果请点击模板效果在线查看

文明发言，用心评论

		应用此篇文章，您: 不费力研究了一会琢磨了好久

查看全部条>>	<<只显示5条