AxureRP分页签 / Tab选项卡切换功能~
最终结果图如下:
实现过程:
1、从元件库中拖一个动态面板,调整所需大小,接下来的步骤都通过双击动态面板来完成。
2、双击动态面板,弹出框“面板状态管理”,新建状态并命名。此处新建了TAB1、TAB2、TAB3...(需要几个tab根据自己需求)。
3、再次双击动态面板(之后要再修改控制面板的内容都双击),弹出“面板状态管理”。双击TAB1,进入tab1编辑页面。
在tab1界面,拖动一个大矩形,三个小矩形。调整位置将三个小矩形的底部和大矩形的顶部重合(这里可以放大来看,一定要重合)。
4、选中tab1,点击矩形右上角的小圆点,选择底部无框的矩形,此时tab1的底边就不见了。
这个步骤完成后如果tab1的底部线还在,那就再检查一遍tab1小矩形的底部与大矩形的顶部线框有没有不重合(如步骤三)。
效果图:
再给tab2和tab3添加背景颜色:
5、重点来了:选中tab1,添加交互动作“鼠标单击时”,双击“鼠标单击时”,弹出窗,进行相关设置如图片所示。
6、将tab2、tab3重复步骤 2~5,在各自的大矩形框内写上各自的内容~
AxureRP分页签 / Tab选项卡切换功能~的更多相关文章
- Axure实现Tab选项卡切换功能
这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- react tab选项卡切换
Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 纯CSS实现tab选项卡切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
随机推荐
- .net程序反编译工具(ILSpy)
ILSpy是SharpDevelop小组的反编译工具,ILSPY这个开源工具的目的就是代替reflector的,它可以反编译出比reflector更好的C#代码. PC官方版 C#反编译工具ilspy ...
- redis中key和value的存储大小限制
String类型:一个String类型的value最大可以存储512M List类型:list的元素个数最多为2^32-1个,也就是4294967295个. Set类型:元素个数最多为2^32-1个, ...
- 时间工具类DateUtil
import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...
- mysql全文索引:fulltext
fulltext全文索引 要使用全文索引,不仅需要把某个字段的索引类型设置为fulltext,还需要修改mysql配置文件: [mysqld] ft_wordlist_charset #表示词典的字符 ...
- python脚本容器化
https://blog.csdn.net/zstack_org/article/details/53099919 如何选择 base image: https://blog.csdn.net/nkl ...
- [LeetCode] 212. Word Search II 词语搜索 II
Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...
- Graphviz(01) notepad++ Run xxx.gv
1.新建文件dot.bat 放到 d:\,内容如下: set gvname=%% @echo '"d:\dot.bat" "$(FULL_CURRENT_PATH)&qu ...
- Dynamic Property Wizard 添加类提示 ATL类只能添加到MFC EXE 和MFC规则DLL项目或完全支持ATL的项目 错误提示解决方式
在重新打开OPM项目添加ATL动态属性向导Dynamic Property Wizard提示错误 ATL类只能添加到MFC EXE 和MFC规则DLL项目或完全支持ATL的项目. 有效的解决方式,右键 ...
- ddl语法
创建表: create table 表名 ( 字段1 varchar2(32) not null primary key, 字段2 date not null ) tablespace 表空间名 事务 ...
- iOS @功能的部分实现思路
需求描述 1. 发布信息时,通过键盘键入@符号,或者点选相关功能键,唤醒@列表,进行选择 2.选择结束后,输入栏改色显示相关内容 3.删除时,整体删除@区块,且不能让光标落在@区块之间 实现步骤 1. ...