接口测试平台-67: 多接口之 小用例：步骤 弹框+取消关闭

出现效果是点击后 屏幕右侧滑出和左侧div 对称的div。然后点击不同的步骤时候，也类似的进行快速切换。然后其上有取消，保存按钮。

 

1. 编辑

打开P_case.html，先仿照写left_div的时候，写一个right_div，但是位置动画参数均相反。

然后是对应的显示/隐藏 的js函数：

简单写完之后，先给设置成点击任意小步骤，都会启动这个show_step函数吧～

 写好后，刷新页面，试试效果：

 

点击任意小步骤右侧都会弹出这个白板了，点击其他的步骤，这个白板会快速回去重新弹出来。

接着开始在上面填东西。首先是按照左右对称的习惯，给小步骤的id\名字都显示在底部，代码仿照左侧大用例的span：

 

 

2. 保存和取消

继续写好顶部的俩个按钮，取消/保存。

刷新页面看看是否成功：

 

保存/取消都调用同一个函数，那么如何区分呢？就是给他们传入的参数不同来区分：

<!--    保存/取消    -->
<button class="btn btn-success" style="float: left" onclick="close_right_div('save')">保存</button>
<button class="btn btn-default" style="float: left" onclick="close_right_div('')">取消</button>

一个传 “save” 一个传空字串。然后在这个关闭函数中用if做判断：

确认点击保存/取消后，右侧的div消失，就算成功。

 

关于这个保存的脚本代码，其实就是简单的获取到时候 右侧div的一堆输入框的内容，加上这个步骤id，传递给后台，让后台给更新到数据库即可。