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. Web Service相关工具的配置

    近期在学习Web Service Testing,使用到了soapUI这个工具,但是在学习之前,需要搭建Web Service环境,其中有关数据库的连接问题花费了我好多时间,主要还是自己对于很多配置不 ...

  2. 关于cmd的东西

    为了督促自己,就从简单的开始学起,希望用博客来纪念我的成长 1)输入 CMD 回车.进入DOS提示符状态下.输入cd\ 回车 表示进入 c:\> 也到了C盘根目录下 2)d: 回车 是进入D盘当 ...

  3. 关于如何在C语言中嵌入汇编命令

    转载自:http://www.keil.com/support/docs/2308.htm C51: GETTING INLINE ASSEMBLY TO WORK Information in th ...

  4. Android网络传输中必用的两个加密算法:MD5 和 RSA

    MD5和RSA是网络传输中最常用的两个算法,了解这两个算法原理后就能大致知道加密是怎么一回事了.但这两种算法使用环境有差异,刚好互补. 一.MD5算法 首先MD5是不可逆的,只能加密而不能解密.比如明 ...

  5. BZOJ1677: [Usaco2005 Jan]Sumsets 求和

    1677: [Usaco2005 Jan]Sumsets 求和 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 570  Solved: 310[Submi ...

  6. Delphi 多线程 “尚未调用CoInitialize错误”的解决方法

    在Delphi  多线程中出现“尚未调用CoInitialize错误”的解决方法 解决方法如下: function  TMyThread.ExecTimer: Boolean;begin  Resul ...

  7. 创建一个Android工程

    Creating an Android Project 原文演示了怎么通过Android Studio和命令行两种方式来创建一个Android工程. 原文链接:http://developer.and ...

  8. Navicat的快捷键

    1.ctrl+q 打开查询窗口 2.ctrl+/ 注释sql语句 3.ctrl+shift +/ 解除注释 4.ctrl+r 运行查询窗口的sql语句 5.ctrl+shift+r 只运行选中的sql ...

  9. SOFTWARE_INTRODUCE_02

    几款网页数据抓取软件 近年来,随着国内大数据战略越来越清晰,数据抓取和信息采集系列产品迎来了巨大的发展机遇,采集产品数量也出现迅猛增长.然而与产品种类快速增长相反的是,信息采集技术相对薄弱.市场竞争激 ...

  10. View Controller 生命周期的各个方法的用法

    (void)awakeFromNib; 这个方法用的时候,outlet还没有连接起来,是view Controller刚从storyboard建的时候,没有完全建好,不过可能有一些事情要在这个方法里面 ...