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. 转：Hprose for php(一)——快速入门

    文章来自于:http://blog.csdn.net/half1/article/details/21095665 本文参考了Hprose官方的用户手册,Hprose官网:http://www.hpr ...

  2. 监测div 元素 变动

    $(div_fc_even).bind('DOMCharacterDataModified ', function(event) { } 试了很多..只有这个有效..下面这些测试了下 ,无反应 //D ...

  3. segv & mini coredump

    1. mini coredump    a. segv      http://zh.scribd.com/doc/3726406/Crash-N-Burn-Writing-Linux-applica ...

  4. SCLButton

    import UIKit let kSuccessTitle = "Congratulations" let kErrorTitle = "Connection erro ...

  5. Python 命令行非阻塞输入

    很久很久以前,系windows平台下,用C语言写过一款贪食蛇游戏,cmd界面,用kbhit()函数实现非阻塞输入.系windows平台下用python依然可以调用msvcrt.khbit实现非阻塞监听 ...

  6. 强联通 HDU 1269

    第一道强联通的题目纪念一下! 主要是模版 tarjan算法 #include <iostream> #include <cstdlib> #include <cstdio ...

  7. 源代码管理工具TFS2013安装与使用

    最近公司新开发一个项目要用微软的TFS2013进行项目的源代码管理,以前只是用过SVN,从来没有用过TFS,所以在网上百度.谷歌了好一阵子来查看怎么安装和配置,还好花了一天时间总算是初步的搞定了,下面 ...

  8. 【转】Contrary to the answers here, you DON'T need to worry about encoding!

    For those goals, I honestly do not understand why people keep telling you that you need the encoding ...

  9. 使用 FreeMarker 替换 JSP 的 10 个理由

    你还在使用 Java 服务器页面(俗称JSP)吗?我曾经也是,但是几年前我抛弃了它们,并且再也没有用过JSP了.JSP 是个很好的概念,但是它却剥夺了 web 开发的乐趣. 对我而言,这些都是小事,比 ...

  10. Js菜鸟学习

    (一) 1 代码如下: //页面中写入html内容 document.write("<h1>Hello World!</h1>") 2 代码如下: //为了 ...