Google文档查看插件(jquery)
来源:互联网 发布:淘宝网三轮车雨蓬 编辑:程序博客网 时间:2024/05/17 07:54
原文来自: http://www.jawish.org/blog/archives/394-Google-Docs-Viewer-plugin-for-jQuery.html
Google Docs Viewer plugin for jQuery
Here's a little jQuery plugin I wrote recently that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.
The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.
Usage
1. Add jQuery and the gDocsViewer plugin to the page.
1.
<
head
>
2.
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
></
script
>
3.
<
script
type
=
"text/javascript"
src
=
"jquery.gdocsviewer.min.js"
></
script
>
4.
</
head
>
2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"
1.
<
a
href
=
"urltofile.pdf"
class
=
"embed"
>Download file</
a
>
1.
<
a
href
=
"urltofile.pdf"
id
=
"embedURL"
>Download file</
a
>
3. Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
1.
$(
'a.embed'
).gdocsViewer();
1.
$(
'#embedURL'
).gdocsViewer();
Customization
The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
1.
$(
'a.embed'
).gdocsViewer({ width: 400, height: 500 });
The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.
Demo
- Check out the live demonstration
License
This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.Download
- jquery.gdocsviewer.v1.0.zip (v1.0, 2.2KB)- Google文档查看插件(jquery)
- 如何查看Google官方文档
- jquery插件 ajaxForm文档
- jquery-fancybox查看大图插件
- Jquery form 插件原文档
- JQuery DataTables插件中文文档
- jQuery EasyUI 插件-macmenu文档
- 插件帮助文档 --- jquery---JCarouselLite
- jQuery-gcxSpringside 插件使用文档
- Google浏览器如何离线查看Android文档
- 查看google官方的API文档
- jquery 仿google 下拉表单 插件
- 23 个最棒的 jQuery Google 地图插件
- 查看图片----jquery插件viewer用法
- jQuery formvalidator插件 API帮助文档
- jQuery formvalidator插件 API帮助文档
- jQuery图表插件Flot中文文档
- jquery图标插件flot官方英文文档
- HeapAlloc, GlobalAlloc, LocalAlloc, VirtualAlloc, malloc, new的异同
- linux高級管理RAID原理基础和软件RAID的实现
- 宽带中国2013启动:三大运营商立下军令状
- 查看类属性
- dd
- Google文档查看插件(jquery)
- C#多线程编程实例实战
- 手把手教你做iOS推送
- 检测非正常断开的TCP连接
- Android通过有线USB上网卡上网
- android sqlite 数据库读写
- 设计模式之结构型模式
- 用javascript编写的打字小游戏
- POJ 1703(Find them, Catch them)