5.16图册跳转的方式

有多种方式实现图册页跳转

1.使用图片/富文本/图表的跳转功能

右侧属性栏-跳转设置-图册跳转设置

2.富文本的文字超链接

参考最佳实践：
http://www.idataviz.com/doc/best_practices/tab_page_turn.html

3.修改dataviz-web/src/q.html

建议复制一份q.html，作为定制页面的入口。
在此页面中实现跳转相关的按钮代码，样例代码段如下：
(id为“navbuttons”的部分是后添加的，具体样式需根据页面调整)

<style>
        .navleft {
            width: 49%;
            z-index: 99999;
            margin-left: 35px;
            position: relative;
            left: 10px;
            top: 5px;
        }
        .navimage{
            width: 408px;
            height: 102px;
            background:none;
            margin-left: -35px;
            border:solid 0px #ccc;
            }

        .navtxt{
            width: 408px;
            height: 102px;
            pointer-events: none;
            margin-left: -35px;
            color: #fff;
            text-align: center;
            position: absolute;
            top: 20px;
            font-size: 43px;
            font-family: "pingfang";
            z-index: 100000;
        }

    </style>
    <style type="text/css">
        .btn-list-group {
            z-index: 99999;
            position: relative;
        }
        .btn-list-area {
            width: 200px;
            z-index: 99999;
            display: none;
            position: absolute;
            left: 0;
            right: 0;
        }
        .btn-list-group:hover .btn-list-area {
            z-index: 99999;
          display: block; 
            position: width: 200px;;
        }
        .btn-nav {
            position: relative;
            z-index: 99999;
            display: inline-block;
            width: 470px;
            height: 77px;
            color: #ffffff;
            text-align: center;
            font-size: 20px;
            font-family: "pingfang";
            line-height: 1.5;
            background-image: url(img/bar.jpg);
            cursor: pointer;
            outline: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 5px 30px 0 30px;
            margin-left: 40px;
        }
        .btn-nav:hover {  color : #FFE951; }
    </style>
        <div class="play-main">
            <div id="navbuttons" style="transform-origin:0px 0px; ">
                <div class="navleft">
                    <span class="navtxt"></span>
                    <input id="a" class="navimage" style="width:202.5px" type="image" src="img/home.png" onmousemove="this.src='img/home.png'" onmouseout="this.src='img/home.png'" 
                            onclick="window.location.href=window.location.origin + '/dataviz-web/src/naq.html?b=4c6cd225-3792-435e-bcc2-03644268d967'"> 
                    <span class="navtxt">一级按钮1</span>
                    <span class="btn-list-group">
                        <input id="b" class="navimage" type="image" src="img/normalleft.png" onmousemove="this.src='img/highleft.png'" onmouseout="this.src='img/normalleft.png'" 
                            onclick="redirect()">
                        <span class="btn-list-area">
                            <a class="btn-nav" href="/dataviz-web/src/naq.html?b=fbca8d8a-7346-4565-9e60-c7f8f1b7367b" target="_self">二级按钮1</a>
                            <a class="btn-nav" href="/dataviz-web/src/naq.html?b=9f994ebe-0287-47d1-9e13-59936591c0e2" target="_self">二级按钮2</a>
                        </span>
                    </span>
                </div>
            </div>
        </div>