1.1.1 摘要

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

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

1.1.2 正文

Index页面

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

  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.     <title>Online Document Viewer Demo</title>
  6.     <meta name="author" content="JK_Rush">
  7.     <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
  8.     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  9.     <script type="text/javascript" src="js/jquery.onlinedocview.js"></script>
  10.     <script type="text/javascript">
  11.         $(document).ready(function () {
  12.                 $("#controls").viewer();
  13.         });
  14.     </script>
  15. </head>
  16. <body>
  17.     <div>
  18.         <div id="Div1">
  19.             <h1>Online Document Viewer Demo</h1>
  20.             <div id="controls">
  21.                 <div id="backpage" class="ios-arrow-left">Back</div>
  22.                 <div id="forwardpage" class="ios-arrow-right">Forward</div>
  23.             </div>
  24.             <div id="doccontainer">
  25.                 <img src="img/1.jpg" data-page="1" title="click for next page"></div>
  26.         </div><!-- END #content -->
  27.     </div><!-- END # -->
  28. </body>

 

图1 index页面

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

Javascript

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

  1. /*****
  2. * The viewer function, when user click #forwardpage, #backpage or image directly,
  3. * load the corrosponding image.
  4. ******/
  5. $.fn.viewer = function(options) {
  6.     'use strict';
  7.  
  8.     var opts = $.extend(true, {}, $.fn.viewer.defaults, options);
  9.  
  10.     var $docImage = $('#doccontainer > img');
  11.  
  12.     // Implements the image click function.
  13.     $docImage.on('click', function(e) {
  14.         e.preventDefault();
  15.         var currentId = $(this).attr('data-page'),
  16.         // Gets next page id.
  17.                 nextImgId = parseInt(currentId) + 1,
  18.                 nextImgSrc = opts.imgDirectory;
  19.  
  20.         if (currentId == opts.lastDocNum) {
  21.             // If the last page, then do nothing
  22.             return false;
  23.         }
  24.  
  25.         nextImgSrc += getFile(nextImgId);
  26.         $(this).attr('data-page', nextImgId);
  27.         $(this).attr('src', nextImgSrc);
  28.     })
  29.  
  30.     // Implements #forwardpage and #backpage control click function.
  31.     $('#controls > #forwardpage, #controls > #backpage').on('click', function(e) {
  32.         e.preventDefault();
  33.  
  34.         var currentId = $docImage.attr('data-page'),
  35.                 nextImgSrc = opts.imgDirectory;
  36.  
  37.         if ($(this).attr('id') == 'backpage') {
  38.             var nextImgId = parseInt(currentId) - 1;
  39.         } else if ($(this).attr('id') == 'forwardpage') {
  40.             var nextImgId = parseInt(currentId) + 1;
  41.         }
  42.  
  43.         if ((currentId == opts.lastDocNum && $(this).attr('id') == 'forwardPage') ||
  44.                 (currentId == 1 && $(this).attr('id') == 'backpage')) {
  45.             // If the last page or the first page, then do nothing.
  46.             return false;
  47.         }
  48.  
  49.         // Loads corresponding image file.
  50.         nextImgSrc += getFile(nextImgId);
  51.         $docImage.attr('data-page', nextImgId);
  52.         $docImage.attr('src', nextImgSrc);
  53.  
  54.     })
  55.  
  56.     // Constructs the image file name.
  57.     function getFile(n) {
  58.         return n + '.' + opts.fileType;
  59.     }
  60.  
  61. };

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

CSS样式

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

  1. /*Back and Forward button style*/
  2. .ios-arrow-left {
  3.     cursor:pointer;
  4.     display : block;
  5.     position:absolute;
  6.     z-index : 0;
  7.     left:50px;
  8.     top:50px;
  9.     height:30px;
  10.     width:auto;
  11.     padding: 0 10px 0 6px;
  12.     background-repeat:repeat-x;
  13.     background-size : 100% 30px;
  14.     background-position :0;
  15.     background-image : -webkit-linear-gradient(
  16.         bottom,
  17.         rgba(0,0,0,0) 0%,
  18.         rgba(0,0,0,0) 50%,
  19.         rgba(255,255,255,0.1) 50%,
  20.         rgba(255,255,255,0.3) 100%
  21.         );
  22.     border-radius: 5px;
  23.     border-bottom: 1px solid rgba(255,255,255,0.4);
  24.     box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,
  25.                 0 1px 2px rgba(0,0,0,0.8)inset;
  26.     font-family : HelveticaNeue;
  27.     font-weight: 400;
  28.     font-size : 12px;
  29.     line-height : 30px;
  30.     text-align:center;
  31.     color:#fff;
  32.     text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
  33. }
  34. .ios-arrow-left:before{
  35.     position:absolute;
  36.     content : ' ';
  37.     left:-8px;
  38.     top:3.5px;
  39.     height : 24px;
  40.     width: 24px;
  41.     z-index : 1;
  42.     background-repeat:repeat-x;
  43.     background-size : 20px 20px;
  44.     background-position :-1px -0.5px;
  45.     background-image :
  46.         -webkit-gradient(linear, left bottom, right top,
  47.             from(rgba(0,0,0,0)),
  48.             color-stop(0.5, rgba(0,0,0,0)),
  49.             color-stop(0.5, rgba(255,255,255,0.1)),
  50.             to(rgba(255,255,255,0.3)));
  51.     -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
  52.     border-top-right-radius : 10px;
  53.     border-top-left-radius :0px;
  54.     border-bottom-right-radius : 0px;
  55.     border-bottom-left-radius : 10px;
  56.     border-left : 1.5px solid rgba(255,255,255,0.4);
  57.     box-shadow :  1px 1px 1px rgba(0,0,0,0.4) inset,
  58.         -1px 1px 1px rgba(0,0,0,0.5) inset;
  59.     -webkit-mask-image :
  60.         -webkit-gradient(linear, left top, right bottom,
  61.             from(#000000),
  62.             color-stop(0.4,#000000),
  63.             color-stop(0.5, transparent),
  64.             to(transparent));
  65. }
  66.  
  67. .ios-arrow-right {
  68.     cursor:pointer;
  69.     display : block;
  70.     position:absolute;
  71.     z-index : 0;
  72.     right:50px;
  73.     top:50px;
  74.     height:30px;
  75.     width:auto;
  76.     padding: 0 6px 0 10px;
  77.     background-repeat:repeat-x;
  78.     background-size : 100% 30px;
  79.     background-position :0;
  80.     background-image : -webkit-linear-gradient(
  81.         bottom,
  82.         rgba(0,0,0,0) 0%,
  83.         rgba(0,0,0,0) 50%,
  84.         rgba(255,255,255,0.1) 50%,
  85.         rgba(255,255,255,0.3) 100%
  86.         );
  87.     border-radius: 5px;
  88.     border-bottom: 1px solid rgba(255,255,255,0.4);
  89.     box-shadow :0 -1px 1px rgba(0,0,0,0.2)inset,
  90.                 0 1px 2px rgba(0,0,0,0.8)inset;
  91.     font-family : HelveticaNeue;
  92.     font-weight: 400;
  93.     font-size : 12px;
  94.     line-height : 30px;
  95.     text-align:center;
  96.     color:#fff;
  97.     text-shadow : 0px -1px 0px rgba(0,0,0,0.8);
  98. }
  99. .ios-arrow-right:after{
  100.     position:absolute;
  101.     content : ' ';
  102.     right:-7.5px;
  103.     top:3px;
  104.     height : 24px;
  105.     width: 24px;
  106.     z-index : 1;
  107.     background-repeat:repeat-x;
  108.     background-size : 20px 20px;
  109.     background-position :-1px -0.5px;
  110.     background-image :
  111.         -webkit-gradient(linear, left bottom, right top,
  112.             from(rgba(255,255,255,0.3)),
  113.              color-stop(0.5, rgba(255,255,255,0.1)),
  114.            color-stop(0.5, rgba(0,0,0,0)),
  115.             to(rgba(0,0,0,0)));
  116.     -webkit-transform : rotate(135deg) skew(-10deg, -10deg);
  117.     border-top-right-radius : 10px;
  118.     border-top-left-radius :0px;
  119.     border-bottom-right-radius : 0px;
  120.     border-bottom-left-radius : 10px;
  121.     border-top : 1.5px solid rgba(255,255,255,0.4);
  122.     box-shadow :  1px 1px 1px rgba(0,0,0,0.5) inset,
  123.         -1px 1px 1px rgba(0,0,0,0.4) inset;
  124.     -webkit-mask-image :
  125.         -webkit-gradient(linear, left top, right bottom,
  126.             from(#000000),
  127.             color-stop(0.4,#000000),
  128.             color-stop(0.5, transparent),
  129.             to(transparent));
  130. }
  131.  
  132. .ios-arrow-right,
  133. .ios-arrow-right:after,
  134. .ios-arrow-left,
  135. .ios-arrow-left:before {
  136.     background-color: rgba(33,33,33,1);/*normalcolor*/
  137. }
  138.  
  139. .ios-arrow-right:hover,
  140. .ios-arrow-right:hover:after,
  141. .ios-arrow-left:hover,
  142. .ios-arrow-left:hover:before {
  143.     background-color: rgba(0,0,0,1);/*hovercolor*/
  144. }
  145.  
  146. /*************************************************

图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实现在线文档的更多相关文章

  1. Mergely – 免费的在线文档对比和合并工具

    任何类型的文件(无论是否代码),我们可能要比较不同的版本,看发生了什么变化. 有些编辑器都有这个内置功能,其中一些则没有. Mergely 是一个免费使用的 Web 应用程序,帮你你迅速作出文档的差异 ...

  2. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  3. 在线文档预览方案-office web apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  4. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  5. jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  6. 在线文档转换API word,excel,ppt等在线文件转pdf、png

    在线文档转换API提供word,excel,ppt等在线文件转pdf.png等,文档:https://www.juhe.cn/docs/api/id/259 接口地址:http://v.juhe.cn ...

  7. java实现在线文档浏览

    目前发现两种方法: 1.http://dxx23.iteye.com/blog/1947083 FlexPaper+SWFTools ,java实现在线文档浏览 2.webOffice

  8. apidoc快速生成在线文档，apidoc生成静态文件的生成规则以及原理分析

    在老大的指引下,需要将系统的json文件格式转换成apidoc的json格式,也就是json格式的重组,但是这个apidoc的生成格式是不固定的,因为apidoc有自己一套的生成规则,我需要研究一下是 ...

  9. JEECG 新版在线文档WIKI正式发布

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhangdaiscott/article/details/80 JEECG 新版在线文档WIKI正式 ...

随机推荐

  1. 蓝牙BLE实用教程

    蓝牙BLE实用教程 Bluetooth BLE 欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 设置 里的修改模板来改变新建文章的内容. 1.蓝牙BLE常见问答 Q: Smart Re ...

  2. Win7 64位命令行编译cuda及设置Windows显卡响应时间

    在开始菜单中找到Visual Studio 2013 >> Visual Studio Tools 选择86或64版本的VC命令提示符环境,我用的 VS2013 x86 Native To ...

  3. word中公式居中、编号居右方法

    1.输入公式和序号如“Z=X+Y(1)”,不需要在二者之间加括号:2.双击横标尺的空白位置,弹出“制表符”对话框,点击“全部清除”:3.观察标尺长度,如图中所示位置(如24):4.输入标尺长度的一半( ...

  4. AJAX--XMLHttpRequest Object 知识整理

    1.创建XMLHttpRequest对象 variable = new XMLHttpRequest() variable = new ActiveXObject('Microsoft.XMLHTTP ...

  5. JAVA设计模式--工厂方法模式

    工厂方法设计模式 抽象工厂角色: 这是工厂方法模式的核心,它与应用程序无关.是具体工厂角色必须实现的接口或者必须继承的父类.在java中它由抽象类或者接口来实现.具体工厂角色:它含有和具体业务逻辑有关 ...

  6. cs程序添加初始化加载

    this.Name = "mysirst"; this.Text = "车辆窗体程序"; this.Load += new System.EventHandle ...

  7. 如果你觉得我的博客对你有帮助，请帮忙加点我所在团队博客访问量http://home.cnblogs.com/u/newbe/

    RT http://home.cnblogs.com/u/newbe/ 跪谢~

  8. 运维自动化工具---Puppet

    案例环境:-----------------------------------------------------------------主机  操作系统   IP地址  主要软件--------- ...

  9. [转]Git - 重写历史

    转自http://git-scm.com/book/zh/Git-%E5%B7%A5%E5%85%B7-%E9%87%8D%E5%86%99%E5%8E%86%E5%8F%B2    重写历史 很多时 ...

  10. iBatis简单介绍

    1.       Ibatis是开源软件组织Apache推出的一种轻量级的对象关系映射(ORM)框架,和Hibernate.Toplink等在java编程的对象持久化方面深受开发人员欢迎. 对象关系映 ...