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打印功能

回答

相關問題