OpenSeadragon简介：学习OpenSeadragon之一（一个显示多层图片的开源JS库）

一、工具条toolbar设置

OpenSeadragon为我们提供了现成的工具条toolBar，工具条上有按钮，可以默认实现放大、缩小、全屏、返回默认大小等功能，

toolBar默认出现在View里的左上角，我们也可以通过设置，让toolbar在View之外的地方显示：

我们只需要在HTML中创建一个div，并且在创建OpenSeadragon时设置toolbar的值为div的id即可。

 ...

 <div id="toolbarDiv" style="width:200px; height:30px;"></div>

 ...

 <script type="text/javascript">

 OpenSeadragon({

         ...

     toolbar: "toolbarDiv", //设置toolbar的值为所对应的div的id

         ...

 });

 </script>

二、自定义按钮风格

toolbar里的按钮是库里自带的，我们也可以把它们改变成任何我们想要的形式，例如<a>标签、按钮<button>等等。

只需要设置按钮的值为对应元素的id即可，例如：

 var openSeadragon = OpenSeadragon({

     ...

     zoomInButton:   "zoom-in",         //放大

     zoomOutButton:  "zoom-out",        //缩小

     homeButton:     "home",            //恢复默认

     fullPageButton: "full-page",       //全屏

     nextButton:     "next",            //下一张图片

     previousButton: "previous",        //前一张图片

     ...

 });

在HTML中相应的元素就会具有相应按钮的功能。

翻页的时候会触发翻页事件，可以设置该事件的处理程序以显示当前页面：

结合上面的知识，我们就能做出截图上展示的效果了。

附上这个demo的完整代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>OpenSeadragon_Demo10</title>

     <script src="openseadragon.min.js"></script>

 </head>

 <body>

     <div id="toolbarDiv" style="width:800px; height:30px;">

         <div style='float:right;'>

             <a href="" id="zoom-in">放大</a>

             <a href="" id="zoom-out">缩小</a>

             <a href="" id="home">返回默认</a>

             <a href="" id="full-page">全屏</a>

         </div>

         <div style="float:left; width:280px;">

             <button id="previous">前一张图</button>

             <button id="next">下一张图</button>

             <div id="pageDiv" style="float:right;">第1张图/共2张</div>

         </div>

     </div>

     <div id="openSeadragon1" style="width:800px; height:600px; border:1px solid blue"></div>

 </body>

 <script type="text/javascript">

 var openSeadragon = OpenSeadragon({

     id:  "openSeadragon1",

     prefixUrl: "./images/", //库图片位置

     //图片来源

     tileSources: [{

         Image: {

             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",

             Url: "./ggg_files/",

             Overlap: "1",

             TileSize: "256",

             Format : "jpg",

             Size:{

                 Height: "1080",

                 Width:  "1920"

             },

         },

     },{

         Image: {

             xmlns:  "http://schemas.microsoft.com/deepzoom/2009",

             Url: "./aaa_files/",

             Overlap: "1",

             TileSize: "256",

             Format : "jpg",

             Size:{

                 Height: "1600",

                 Width:  "2560"

             },

         },

     }],

     zoomInButton:   "zoom-in",      //放大

     zoomOutButton:  "zoom-out",   //缩小

     homeButton:     "home",       //恢复默认

     fullPageButton: "full-page",  //全屏

     nextButton:     "next",       //下一张图片

     previousButton: "previous",   //前一张图片

 });

 //翻页的时候改变页码的显示

 //参数说明："page"：页码改变的事件

 //            function (data){...}: 该事件发生调用的函数

 openSeadragon.addHandler("page", function (data){

     document.getElementById("pageDiv").innerHTML ="第"+( data.page + 1 )+"张图/共2张";

 });

 </script>

 </html>

官方demo参考地址:http://openseadragon.github.io/examples/ui-toolbar/

　　　　　　　　   http://openseadragon.github.io/examples/ui-binding-custom-buttons/

学习OpenSeadragon之五(工具条toolbar与自定义按钮)的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序教程(四)--添加一个工具条toolbar

    工具条例子 样本如下: 这里我们使用的是dhtmlxToolbar 组件. 添加工具栏到布局中: 1.使用attachToolbar() 方法初始化页面 添加代码到index.html中 dhtmlx ...

  2. 创建工具条ToolBar

    /***ToolBar***/ QToolBar * tlb_ImageOpen; QToolBar * tlb_VideoOpen; QToolBar * tlb_AudioOpen; void M ...

  3. 如何往IE工具条添加按钮（转载)

    如何往IE工具条添加按钮 问题提出:金山词霸.网络蚂蚁等软件安装后会向IE的工具条添加自己的按钮.按下按钮后还会作出相应的动作,这种功能是如何实现的呢?读完本文,您也可以将自己应用程序的按钮添加到IE ...

  4. [iOS微博项目 - 4.5] - 每条微博的底部工具条

    github: https://github.com/hellovoidworld/HVWWeibo A.每条微博的底部工具条 1.需求 每条微博底部都有一个工具条 显示3个按钮:评论.转发.赞 按钮 ...

  5. IE浏览器弹出的文件下载工具条实现自动另存为

    IE浏览器中如果有一个文件可以下载,用鼠标点击一下文件的超链接,会在IE浏览器下方出现一个工具条,工具条上主要有“打开” “保存”两个按钮. 如果点击“保存”按钮,会把附件保存到系统的“下载”或“Do ...

  6. [ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan ------------------ ...

  7. 自定义ALV控件的工具条按钮

    *&---------------------------------------------------------------------* *& Report YTEST028 ...

  8. 雷林鹏分享：jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

    jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框 您可以创建一个带有工具栏(toolbar)和按钮(button)的对话框(dialog),可以从 HTML 标记创建.这个教程描述 ...

  9. QT学习之路--菜单、工具条、状态栏

    下面一些是 Menu Bar,用于显示菜单;再下面一点事 Toolbar areas,用于显示工具条,Status Bar,就是状态栏. Qt 提供了一个 QStatusBar 类来实现状态栏. Qt ...

随机推荐

  1. Ant快速入门(四)-----Ant的任务(Task)

    到目前为止,我们已经掌握了Ant生成文件的基本结构,以及<project.../>,<target.../>,<property.../>等元素的配置方式.而< ...

  2. 多线程+fork 引发的bug查找

    1. 问题描述 某个server SA是一个多线程服务器,主线程会调用fork,再exec生成工作进程SB. 实际上,SA的主线程fork出了一个子线程,但没有执行exec. # ps ajxf | ...

  3. POJ2524 Ubiquitous Religions(并查集)

    题目链接. 分析: 给定 n 个点和 m 条无项边,求连通分量的数量.用并查集很简单. #include <iostream> #include <cstdio> #inclu ...

  4. 「Poetize10」封印一击

    描述 Description Nescafe由n种元素组成(编号为1~n), 第i种元素有一个封印区间[ai,bi].当封印力度E小于ai时,该元素将获得ai的封印能量:当封印力度E在ai到bi之间时 ...

  5. 【转】JAVA字符串格式化-String.format()的使用

    原文网址:http://blog.csdn.net/lonely_fireworks/article/details/7962171 常规类型的格式化 String类的format()方法用于创建格式 ...

  6. DLL入门浅析(4)——从DLL中导出类

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/20/90663.html 前面介绍了怎么从DLL中导出函数和变量,实际上导出类的方法也是大同小 ...

  7. 高性能web系统的架构和系统优化

    07年毕业一直都在软件公司,14年来到一个互联网公司,给我的感受,区别主要在于: 软件公司需求相对稳定,能够按照计划按部就班的去实施,互联网公司需求相对来说不稳定,上线比较着急,大部分都是小迭代更新, ...

  8. php开启错误提示

    1.在php.ini文件里加上下面两句 display_errors = Onerror_reporting = E_ALL | E_STRICT 2.在Apache的 httpd.conf文件里加上 ...

  9. Java容器详解

    线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.在Java中,容器的类型主要有:List.Set ...

  10. MVCC的一种实现方案

    源信息来源:http://my.oschina.net/juliashine/blog/111624 -- 简单描述: 一个data-server,通过mvcc来实现事务的一致性,已支持更高的吞吐和更 ...