Jquery插件jqprint-0.3.js实现dayi

1、首先引用Jquery和jqprint-0.3.js(依赖于Jquery的)

<script language="javascript" src="jquery-1.4.4.min.js">

</script> <script language="javascript" src="jquery.jqprint-0.3.js"></script>

2、Hmtl代码

  1. <div id="print-area">
  2. <table>
  3. <tr>
  4. <td>test</td>
  5. <td>test</td>
  6. <td>test</td>
  7. <td>test</td>
  8. <td>test</td>
  9. </tr>
  10. <tr>
  11. <td>test</td>
  12. <td>test</td>
  13. <td>test</td>
  14. <td>test</td>
  15. <td>test</td>
  16. </tr>
  17. <tr>
  18. <td>test</td>
  19. <td>test</td>
  20. <td>test</td>
  21. <td>test</td>
  22. <td>test</td>
  23. </tr>
  24. <tr>
  25. <td>test</td>
  26. <td>test</td>
  27. <td>test</td>
  28. <td>test</td>
  29. <td>test</td>
  30. </tr>
  31. <tr>
  32. <td>test</td>
  33. <td>test</td>
  34. <td>test</td>
  35. <td>test</td>
  36. <td>test</td>
  37. </tr>
  38. </table>
  39. </div>
  40. <input type="button" onclick=" print()" value="打印">

3、JavaScript代码

  1. <script language="javascript">
  2. function print(){
  3. $("#print-area").jqprint({
  4. debug: false,
  5. importCSS: true,
  6. printContainer: true,
  7. operaSupport: false
  8. });
  9. }
  10. </script>

4、属性

  • debug: false, //如果是true则可以显示iframe查看效果(iframe默认高和宽都很小,可以再源码中调大),默认是false
  • importCSS: true, //true表示引进原来的页面的css,默认是true。(如果是true,先会找$("link[media=print]"),若没有会去找$("link")中的css文件)
  • printContainer: true, //表示如果原来选择的对象必须被纳入打印(注意:设置为false可能会打破你的CSS规则)。
  • operaSupport: false //表示如果插件也必须支持歌opera浏览器,在这种情况下,它提供了建立一个临时的打印选项卡。默认是true

5、特殊打印样式

如果在打印时需要独特的css样式,除了可以直接写在style属性内还可以通过

  <link href="printStyle.css" rel="stylesheet"type="text/css" media="print">

  来引用外部css文件中的样式。这样的好处是该样式只会在打印时才应用。

时间: 2024-12-06 10:43:26

Jquery插件jqprint-0.3.js实现dayi的相关文章

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

html select美化模拟jquery插件select2.js

代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder, 可以设置禁用状态disabled,并且设置非常简单,如:$(".js-example-disabled").prop("disabled",

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快. 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可

16款创建CSS3动画的jQuery插件

jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的网站创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果,使得页面向下滚动时网页内容能有一种滑入的动效. 在线演示:http://wow.techbrood.com/fiddle/7 2. CSS3 Animate it 这个插件效果和Smoove类似. 3. WaitMe WaitMe 是用于创建加载CSS3动画的 jQuery 插件. 4. Stroll.j

盘点十个超炫的jQuery插件

“DevExpress 14.2新版发布会”即将推出.心动不如行动,赶快报名吧!我们期待与您相约. 今天小编为大家搜罗了十个超酷的jQuery插件,这可以使你的网站界面更加友好.jQuery创造了令人难以置信的Web应用程序,而这些插件则将简化开发者的开发过程.来一起看看里面有没有你喜欢的插件呢?希望能对大家的开发起到帮助!让我们一起来看看吧! ScrollNav ScrollNav是一个比较小的jQuery插件,它能抓住页面的现有内容并将其划分成逻辑部分,同时来建立一个可定制的滚动导航栏.是一

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

jquery插件--ajaxfileupload.js上传文件原理分析

英文注解应该是原作者写的吧~说实话,有些if判断里的东西我也没太弄明白,但是大致思路还是OK的. jQuery.extend({ createUploadIframe: function (id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //create frame var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id var iframeHtml = '<iframe id="' + f

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

介绍一款jQuery插件:Fullpage.js

演示地址:http://www.dowebok.com/demo/2014/77/ 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支

如何将Js代码封装成Jquery插件

很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特效 HTML代码如下: <div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-