javascript打印功能

我正在做图像缩放和平移MODAL。javascript打印功能

所有工作正常，我们使用这个平面图。我想要给查看器添加一个打印按钮（相同样式）。

参见例如：http://test.dpetroff.ru/jquery.iviewer/test/

需要它旁边的[200％]键出现。

有什么建议吗？

JS的是在这里：http://test.dpetroff.ru/jquery.iviewer/jquery.iviewer.js

我的html代码：

var $ = jQuery; 
      $(document).ready(function(){ 
        $("#viewer").iviewer(
         { 
         src: "images/floorplan.gif", 
         update_on_resize: false, 
         zoom: 200, 
         initCallback: function() 
         { 
          var object = this; 
          $("#in").click(function(){ object.zoom_by(1);}); 
          $("#out").click(function(){ object.zoom_by(-1);}); 
          $("#fit").click(function(){ object.fit();}); 
          $("#orig").click(function(){ object.set_zoom(100); }); 
          $("#update").click(function(){ object.update_container_info();}); 
            console.log(this.img_object.display_width); //works* 
              console.log(object.img_object.display_width); //getting undefined.* 

         }, 
         onFinishLoad: function() 
         { 
       $("#viewer").data('viewer').setCoords(-500,-500); 
          //this.setCoords(-0, -500); 
         } 

//      onMouseMove: function(object, coords) { }, 
//      onStartDrag: function(object, coords) { return false; }, //this image will not be dragged 
//      onDrag: function(object, coords) { } 
        });

UPDATE：
确定这是不是100％不知道为什么。

下面是HTML

<div class="wrapper"> 
     <div id="viewer" class="viewer"></div> 
     <div class="iviewer_zoom_print iviewer_common iviewer_button2"><a href="javascript:window.print()">PRINT</a></div> 
    </div>

这里是CSS：

.iviewer_zoom_print { 
left: 170px; 
font: 1em/28px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; 
color: #ec008c; 
background-color: #fff; 
text-align: center; 
text-decoration:none 
width: 60px;

链接CSS

.iviewer_zoom_print a:link { text-decoration:none !important;color:#ec008c !important;}

这是预览。 enter image description here

好的问题我有，这个代码是完成这个最好的方法吗？如何更好地定位打印按钮。 JS必须启用，因为它的模式窗口，所以非js打印功能不是真正的先决条件。

我还需要点击打印按钮打印整个图像。目前它只能打印。

任何帮助表示赞赏。

来源

2011-04-28 422

好吧我已经通过嵌套div insode查看器来解决对齐问题。现在需要更好地对打印功能进行排序 – 422 2011-04-29 00:52:07

添加另一个DIV与类iviewer_button像现有的iviewer_zoom_fit iviewer_common用于适合图像。这将调用打印功能。
喜欢的东西<div class="iviewer_print iviewer_common iviewer_button"></div>

对于打印的实现看样和文档here

来源

2011-04-28 23:01:14

如果你在一个体面的DOM检查一下生成的HTML，你会看到，沿着底部的按钮，只是绝对定位<div>元素。该按钮有三个CSS类：

iviewer_zoom_X其中X是有问题的项目。
iviewer_common
iviewer_button

的iviewer_zoom_X类用于设置定位，这样你就可以用适当的bottom和left值添加iviewer_zoom_print类，然后只需追加<div>与这些类观众：

iviewer_zoom_print
iviewer_common
iviewer_button

和单击处理程序绑定到它。

来源

2011-04-28 23:03:15

并非真的100％，我有点明白你的意思。我应该只是单独添加一个DIV类，并绝对定位按钮（使用CSS），然后将Ron Harlevs不显眼的jQuery打印功能附加到按钮上？ – 422 2011-04-28 23:11:26

@ 422：是的，就是这么多。定位CSS将会放入'iviewer_zoom_print'（与其他按钮相匹配），然后你就像其他的动作一样绑定一个动作;然后看到Ron Harlev的打印功能。 – 2011-04-28 23:23:06

argghh我明白了，我只是不能在blinkin做lolol。 – 422 2011-04-28 23:35:44

我不认为我可以帮你打印功能（可能会把所有这些放到iframe中？），但前面的评论是正确的 - 你需要创建一个带有iviewer_common，iviewer_button和你自己的iview的div（iviewer_print ）。 iviewer_common设置默认对齐方式和边框，并且需要您的类来设置按钮内的左侧位置和颜色。

来源

2011-04-29 05:42:52 can3p

javascript打印功能

回答

相关问题