接口测试平台代码实现64: 多接口用例-4

上节我们成功的搞定了大用例的增加/删除/复制功能

本节我们计划搞定设置大用例功能，也就是：

点击设置按钮，左侧弹出小用例(接口) 列表接口列表相关的数据层实现。

首先打开P_cases.html,找到这个设置按钮，给它加入onclick：

我取名叫show_small() ，意思就是点击后，展示小用例列表,别忘了要传入大用例的id，这样才能确定要展示的是谁的小用例列表。

然后我们先去写好这个左侧列表的基础div容器，默认是隐藏的，点击后出现。

代码语言：javascript复制


<div id="left_div" style="background-color: white;border: 1px solid black;
                            z-index: 998;display: none;width:48%;height:100%;
                            position:absolute;right:100%;top:0px;overflow-y: visible">

    我是内容

</div>

注意这里么的style的设置：

代码语言：javascript复制

;position:absolute;right:100%;

这部分，是固定位置，并且距离右边界100%，距离右边100%，那么就是这个样子，就好像是藏在了屏幕的左边我们看不到的一样。

然后我们点击之后，不但要给div的display属性变为显示，还要给它滑动到屏幕视线里，也就是距离右边界100% - 48%的位置，48%是它自身的宽度。

变成这样：

然后我们现在去写这个show_small()函数：

好，这里的逻辑要给大家细细说一下：

首先，我们点击大用例a的设置按钮时候，这个div滑动出来，也就是走的if。

然后我们去点击大用例b的设置，这个div 我们做了一个动画效果，就是先快速撤回到左侧屏幕之左，然后再快速滑回来，这个过程中把小用例列表给切换成大用例b的了，走的else。

这里我们也学习了jquery的新方法: .css() 直接改style中的属性，然后.animate是带动画效果的改距离右边界的right的属性。

源码如下：

代码语言：javascript复制

<script>
    function show_small(case_id) {

        if(document.getElementById('left_div').style.display == 'none'){
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');

        }else{
            $("#left_div").css("display","none");
            $("#left_div").animate({right:'100%'},'fast');
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');
        }

    }
</script>

刷新页面，看看效果：