1.1.1 摘要

现在，许多网站都提供在线图片和图书阅读的功能，这种方式比下载后阅读来的直观和人性化，要实现该功能涉及到点击处理和图片动态加载。

在接下来的博文中，我们将通过Javascript方式实现在线阅读这一功能。

1.1.2 正文

Index页面

首先，我们创建index.html页面，它包含三个div元素分别是content、controls和doccontainer，其中controls用来显示翻页控件（前/后翻），而doccontainer用于显示图片，具体定义如下：

<!doctype html>
<html lang="en-US">
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>Online Document Viewer Demo</title><meta name="author" content="JK_Rush"><link rel="stylesheet" type="text/css" media="all" href="css/style.css"><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/jquery.onlinedocview.js"></script><script type="text/javascript">$(document).ready(function () {$("#controls").viewer();});</script>
</head>
<body><div><div id="Div1"><h1>Online Document Viewer Demo</h1><div id="controls"><div id="backpage" class="ios-arrow-left">Back</div><div id="forwardpage" class="ios-arrow-right">Forward</div></div><div id="doccontainer"><img src="img/1.jpg" data-page="1" title="click for next page"></div></div><!-- END #content --></div><!-- END # -->
</body>

图1 index页面

上面，我们定义了index.html页面，引用了jQuery库文件，在controls元素中包含backpage和forwardpage控件元素，它用于表示前或后翻页的操作；而doccontainer中img的元素用于显示文档，每当用户点击前或后翻页就会加载相应的内容到img元素中。

Javascript

接下来，我们需要实现在线文档的翻页功能和内容的动态加载，我们定义jQuery插件方法viewer()，当用户点击#backpage和#forwardpage控件元素时实现向前或后翻页并且动态地加载相应的文档，具体定义如下：

/*****
* The viewer function, when user click #forwardpage, #backpage or image directly,
* load the corrosponding image.
******/
$.fn.viewer = function(options) {'use strict';var opts = $.extend(true, {}, $.fn.viewer.defaults, options);var $docImage = $('#doccontainer > img');// Implements the image click function.$docImage.on('click', function(e) {e.preventDefault();var currentId = $(this).attr('data-page'),// Gets next page id.nextImgId = parseInt(currentId) + 1,nextImgSrc = opts.imgDirectory;if (currentId == opts.lastDocNum) {// If the last page, then do nothingreturn false;}nextImgSrc += getFile(nextImgId);$(this).attr('data-page', nextImgId);$(this).attr('src', nextImgSrc);})// Implements #forwardpage and #backpage control click function.$('#controls > #forwardpage, #controls > #backpage').on('click', function(e) {e.preventDefault();var currentId = $docImage.attr('data-page'),nextImgSrc = opts.imgDirectory;if ($(this).attr('id') == 'backpage') {var nextImgId = parseInt(currentId) - 1;} else if ($(this).attr('id') == 'forwardpage') {var nextImgId = parseInt(currentId) + 1;}if ((currentId == opts.lastDocNum && $(this).attr('id') == 'forwardPage') ||(currentId == 1 && $(this).attr('id') == 'backpage')) {// If the last page or the first page, then do nothing.return false;}// Loads corresponding image file.nextImgSrc += getFile(nextImgId);$docImage.attr('data-page', nextImgId);$docImage.attr('src', nextImgSrc);})// Constructs the image file name.function getFile(n) {return n + '.' + opts.fileType;}};

上面，我们定义了jQuery方法viewer()，我们实现了#forwardpage、#backpage和#doccontainer的点击事件处理方法，当用户点击#forwardpage、#backpage或#doccontainer动态地加载相应的文档，我们通过修改img元素的src属性来动态加载文档，并且通过data-page属性保存当前文档的页码。

CSS样式

最后，我们给#forwardpage和#backpage控件元素添加CSS样式，具体化定义如下：

/*Back and Forward button style*/
.ios-arrow-left {cursor:pointer;display : block; position:absolute;z-index : 0;left:50px;top:50px;    height:30px;width:auto;padding: 0 10px 0 6px;background-repeat:repeat-x;background-size : 100% 30px;background-position :0;background-image : -webkit-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.3) 100%);border-radius: 5px;border-bottom: 1px solid rgba(255,255,255,0.4);box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,0 1px 2px rgba(0,0,0,0.8)inset;font-family : HelveticaNeue;font-weight: 400;font-size : 12px;line-height : 30px;text-align:center;color:#fff;text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
}
.ios-arrow-left:before{position:absolute;content : ' ';left:-8px;top:3.5px;height : 24px;width: 24px;z-index : 1;background-repeat:repeat-x;background-size : 20px 20px;background-position :-1px -0.5px;background-image :  -webkit-gradient(linear, left bottom, right top, from(rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,0)), color-stop(0.5, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.3))); -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);border-top-right-radius : 10px;border-top-left-radius :0px;border-bottom-right-radius : 0px;border-bottom-left-radius : 10px;border-left : 1.5px solid rgba(255,255,255,0.4);box-shadow :  1px 1px 1px rgba(0,0,0,0.4) inset,-1px 1px 1px rgba(0,0,0,0.5) inset;-webkit-mask-image : -webkit-gradient(linear, left top, right bottom,from(#000000), color-stop(0.4,#000000), color-stop(0.5, transparent), to(transparent));
}.ios-arrow-right {cursor:pointer;display : block; position:absolute;z-index : 0;right:50px;top:50px;    height:30px;width:auto;padding: 0 6px 0 10px;background-repeat:repeat-x;background-size : 100% 30px;background-position :0;background-image : -webkit-linear-gradient(bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.3) 100%);border-radius: 5px;border-bottom: 1px solid rgba(255,255,255,0.4);box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,0 1px 2px rgba(0,0,0,0.8)inset;font-family : HelveticaNeue;font-weight: 400;font-size : 12px;line-height : 30px;text-align:center;color:#fff;text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
}
.ios-arrow-right:after{position:absolute;content : ' ';right:-7.5px;top:3px;height : 24px;width: 24px;z-index : 1;background-repeat:repeat-x;background-size : 20px 20px;background-position :-1px -0.5px;background-image :  -webkit-gradient(linear, left bottom, right top, from(rgba(255,255,255,0.3)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.5, rgba(0,0,0,0)), to(rgba(0,0,0,0))); -webkit-transform : rotate(135deg) skew(-10deg, -10deg);border-top-right-radius : 10px;border-top-left-radius :0px;border-bottom-right-radius : 0px;border-bottom-left-radius : 10px;border-top : 1.5px solid rgba(255,255,255,0.4);box-shadow :  1px 1px 1px rgba(0,0,0,0.5) inset,-1px 1px 1px rgba(0,0,0,0.4) inset;-webkit-mask-image : -webkit-gradient(linear, left top, right bottom,from(#000000), color-stop(0.4,#000000), color-stop(0.5, transparent), to(transparent));
}.ios-arrow-right,
.ios-arrow-right:after,
.ios-arrow-left,
.ios-arrow-left:before {background-color: rgba(33,33,33,1);/*normalcolor*/
}.ios-arrow-right:hover,
.ios-arrow-right:hover:after,
.ios-arrow-left:hover,
.ios-arrow-left:hover:before {background-color: rgba(0,0,0,1);/*hovercolor*/
}/*************************************************

图2在线文档

现在，我们已经实现了在线查看文档的功能了，由于我们使用Javascript动态地加载文档内容，所以无需刷新页面，我们只需替换相应的文档链接地址就好了，这样不但减少了Http请求的次数减轻了网站的负载，而且无刷新用户体验更好。

1.1.3 总结

本文我们通过一个在线文档查看程序，介绍了通过jQuery实现动态加载数据的功能，通过使用jQuery动态加载数据无需刷新页面，只需替换相应的文档链接地址就好了，并且减少了网站的Http请求次数，减轻网络负载和加载延迟。

参考

[1] http://designshack.net/articles/javascript/coding-an-ajax-style-paged-document-viewer-with-jquery/

Demo

jQuery实现在线文档相关推荐

java毕业设计在线文档管理系统Mybatis+系统+数据库+调试部署
java毕业设计在线文档管理系统Mybatis+系统+数据库+调试部署 java毕业设计在线文档管理系统Mybatis+系统+数据库+调试部署本源码技术栈: 项目架构:B/S架构开发语言:Java ...
java基于springboot+vue的在线文档管理系统 nodejs 前后端分离
随着社会的发展,社会的各行各业都在利用信息化时代的优势.计算机的优势和普及使得各种信息系统的开发成为必需. 在线文档管理系统,主要的模块包括查看首页.个人中心.公告信息管理.部门信息管理.岗位管理.员 ...
计算机毕业设计Java在线文档管理系统（源码+系统+mysql数据库+Lw文档）
计算机毕业设计Java在线文档管理系统(源码+系统+mysql数据库+Lw文档) 计算机毕业设计Java在线文档管理系统(源码+系统+mysql数据库+Lw文档) 本源码技术栈: 项目架构:B/S架构 ...
WPS本地镜像化在线文档操作以及样例
一个客户项目有引进在线文档操作需求,让我这边做一个demo调研下,给我的对接文档里有相关方法的说明,照着对接即可.但在真正对接过程中还是踩过不少坑,这儿对之前的对接工作做个记录. 按照习惯先来一个效果 ...
飞书在线文档美誉度国内最佳！一起来围观~
云时代下,文档当然也要与时俱进,面对市面上诸多"云文档"平台,有木有眼花缭乱, 来吧,给你一双慧眼,了解一下飞书在线文档! 飞书文档虽然进入市场时间不长,其独特的云空间功能,受到众 ...
在线文档预览方案-office web apps续篇
上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...
在线文档预览方案-office web apps
原文:在线文档预览方案-office web apps 最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现 ...
[转载]在线文档预览方案-Office Web Apps
最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...
showdoc windows 搭建_Windows 搭建在线文档工具showdoc工具
ShowDoc是什么每当接手一个他人开发好的模块或者项目,看着那些没有写注释的代码,我们都无比抓狂.文档呢?!文档呢?!Show me the doc !! 程序员都很希望别人能写技术文档,而自己却 ...

jQuery实现在线文档