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. 直接引用windows命名空间

    再逛博客的时候,看见一段这样代码.获取系统密码的 static void DumpCredentials(Windows.Security.Credentials.PasswordCredential ...

  2. [Android] 输入系统（一）

    Android输入系统是人与机器交互最主要的手段.我们通过按键或者触碰屏幕,会先经由linux产生中断,进行统一的处理过后,转换成Android能识别的事件信息,然后Android的输入系统去获取事件 ...

  3. C#程序设计基础——数据类型

    C#是强类型语言,因此每个变量和对象都必须具有声明类型.数据类型可描述为内置数据类型(如int或char),用户定义数据类型(如class或interface).数据类型还可以定义为值类型(用于存储值 ...

  4. 移動電源ic的概述

    移動電源ic壹種集供電和充電功能於壹體的便攜式充電器,可以給手機等數碼設備隨時隨地充電或待機供電.壹般由鋰電芯或者幹電池作為儲電單元.區別於產品內部配置的電池,也叫外掛電池.壹般配備多種電源轉接頭, ...

  5. ajax提交数据问题

    加入traditional:true属性 traditional 类型:Boolean 如果你想要用传统的方式来序列化数据,那么就设置为 true.请参考工具分类下面的 jQuery.param 方法 ...

  6. Git详解之一 Git起步

    起步 本章介绍开始使用 Git 前的相关知识.我们会先了解一些版本控制工具的历史背景,然后试着让 Git 在你的系统上跑起来,直到最后配置好,可以正常开始开发工作.读完本章,你就会明白为什么 Git ...

  7. js获取当前页面的url中id

    function UrlSearch() { var name, value; var str = location.href; //获取到整个地址 var num = str.indexOf(&qu ...

  8. Mac 下tomcat的安装配置

    首先进去tomcat官网下载选择你要的版本 下载方法 下载完事之后解压到你想放的文件夹.我是把文件夹改名为tomcat.当然随意就好.然后授权命令如下: sudo chmod 你的用户名 Tomcat ...

  9. 用UBOOT自带loadb命令加载应用程序到SDRAM中运行的方法

    S3C44B0开发板中,用UBOOT自带loadb命令加载应用程序到SDRAM中运行的方法    1.开发板说明:  开发板上已有移植好的UBOOT运行.   2.交叉编译工具链为arm-linu-g ...

  10. html5 教程

    http://www.tutorialspoint.com/html5/index.htm