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. asp.net 后台使用js弹窗失效问题

    1.这些事件输出来前后都变成JS代码了,看到到这样的代码的了.会变成<script>alert('合同号XXX已存在')</script>首先后台调试一下看看Page.Clie ...

  2. 编写优美的GTest测试案例

    http://www.cnblogs.com/coderzh/archive/2010/01/09/beautiful-testcase.html 使用gtest也有很长一段时间了,这期间也积累了一些 ...

  3. 谈谈依赖注入DI

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  4. 网站优化指南之数据库缓存、CDN与云存储

    1 数据库缓存. 常见的做法是用内存做cache,把数据库里的内容提前取出读到内存里,用户再请求时,就不直接读数据库,而是读内存里的数据,从而缓解了数据库的压力. 过去比较常用的缓存软件是memcac ...

  5. 可重入与线程安全（Reentrancy and Thread-Safety）

    http://blog.csdn.net/zzwdkxx/article/details/49338067 http://blog.csdn.net/zzwdkxx/article/details/4 ...

  6. HDOJ(HDU) 2060 Snooker(英语很重要。。。)

    Problem Description background: Philip likes to play the QQ game of Snooker when he wants a relax, t ...

  7. cf590A Median Smoothing

    A. Median Smoothing time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. Matlab:回归分析(2)

    方法一:直接用多元二项式回归 %数据输入 x1 = [ ]; x2 = [ ]; %多元二项式回归函数 y = [ ]; X = [x1' x2']; Y = y'; rstool(X, Y, 'pu ...

  9. Ensures there will be no 'console is undefined' errors

    很早之前项目中遇到过这种bug, 当时没有多留意,只是暂时把笔记留了下来,今天整理笔记的时候,看到了,故先整理在此,具体用法下次遇到再好好理解理解.如果有筒子遇到过,麻烦留言说一下,先谢谢啦. //E ...

  10. 史上最全maven pom.xml详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...