web打印实现代码,改善用户体验的五款jQuery插件分享

1.菜单栏 清爽美观的菜单栏既能够向用户提供充分的吸引人的内容,又能让网站得体大方。

为了叙述每一篇的重点,其示例代码都是最精简的,比如选择器只能传HTMLElement和id。

在IE9中打印没有问题,但IE6、7、8都会出现前几页空白的情况(只显示列头信息),找了很久,才发现是ui-jqgrid-bdiv样式类(在ui.jqgrid.css内)中的overflow引起的,在打印之前将其删除,打印之后将其恢复即可。
打印时的CSS样式如下:

Cool Animated Menu
图片 1

这篇我们增强下选择器,依据2/8原则,这里仅实现最常用的几种。

复制代码 代码如下:

演示|下载

1, 通过id获取,该元素是唯一的
$(‘#id’)

<style type=”text/css” media=”print”>
#accordion h3, #vcol, div.loading, div.ui-tabs-hide,ul.ui-tabs-nav li,
td.HeaderRight { display:none }
.ui-jqgrid-titlebar, .ui-jqgrid-title{ display:none }
.ui-jqgrid-bdiv_self{position: relative; margin: 0em; padding:0;
text-align:left;}
#pager{display:none; z-index:-1;}
</style>

2. tab 一个非常cool的tab既能够节省空间又能第一时间吸引用户眼球,这是提高用户体验的重要手段。

2, 通过className获取
$(‘.cls’) 获取文档中所有className为cls的元素
$(‘.cls’, el)
$(‘.cls’, ‘#id’)
$(‘span.cls’) 获取文档中所有className为cls的span元素
$(‘span.cls’, el) 获取指定元素中className为cls的元素, el为HTMLElement
(不推荐)
$(‘span.cls’, ‘#id’) 获取指定id的元素中className为cls的元素

打印代码:

Feature List
图片 2

3, 通过tagName获取
$(‘span’) 获取文档中所有的span元素
$(‘span’, el) 获取指定元素中的span元素, el为HTMLElement (不推荐)
$(‘span’, ‘#id’) 获取指定id的元素中的span元素

复制代码 代码如下:

演示|下载

4, 通过attribute获取
$(‘[name]’) 获取文档中具有属性name的元素
$(‘[name]’, el)
$(‘[name]’, ‘#id’)
$(‘[name=uname]’) 获取文档中所有属性name=uname的元素
$(‘[name=uname]’, el)
$(‘[name=uname]’, ‘#id’)
$(‘input[name=uname]’) 获取文档中所有属性name=uname的input元素
$(‘input[name=uname]’, el)
$(‘input[name=uname]’, ‘#id’)

$(“#btnPrint”).live(“click”, function () {
window.focus();
window.print();
return false;
});
var GridHeight;
function window.onbeforeprint() {
//打印前事件 var jqgridObj=jQuery(“#jqgridlist”);
GridHeight = jqgridObj.jqGrid(‘getGridParam’, ‘height’);//获取高度
jqgridObj.jqGrid(‘setGridHeight’,
‘100%’);//将其高度设置成100%,主要是为了jqgrid 中有Scroll条时
能把该scroll条内内容都打印出来 $(“#gview_jqgridlist
.ui-jqgrid-bdiv”).removeClass().addClass(“ui-jqgrid-bdiv_self”);//去除掉overflow属性}
function window.onafterprint() {//打印后事件 //放开隐藏的元素
$(“#gview_jqgridlist
.ui-jqgrid-bdiv_self”).removeClass().addClass(“ui-jqgrid-bdiv”);//恢复overflow属性,否则会导致jqgrid中scroll条消失
jQuery(“#jqgridlist”).jqGrid(‘setGridHeight’,
GridHeight);//设置成打印前的高度}

发表评论

电子邮件地址不会被公开。 必填项已用*标注