[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例
转:http://blog.qdac.cc/?p=2197
Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流。不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理。当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考。
1、拖一个动态面板到编辑区;
2、双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态;
3、双击“正常”状态,进入正常状态编辑页面;
4、在动态面板的正常状态编辑页面放置一个 HTML 按钮,左上都留下一点空间,然后记录下尺寸,我的是110×30;
5、回到原页面,将动态面板的大小调整为和按钮差不多,周围略有空隙;
6、再次双击动态面板,复制“正常”这个状态为新的状态,命名为“划过”;
7、双击”鼠标滑入“状态”,进入“划过”状态编辑页面;
8、修改 HTML 按钮的标题为 “鼠标划过”;
9、添加一个表格位于按钮的正下方,模拟弹出的表单;
10、记录下“鼠标滑入”状态的面板尺寸,比如我的是 300×120;
11、回到原始的动态面板编辑页面,然后选择动态面板,在右侧的“部件交互与注释”部分,选择更多,找到鼠标移入和鼠标移出,分别设置用例:
- 鼠标移入
- 设置面板状态为“划过”;
- 设置面板大小为300×120;
- 鼠标移出
- 设置面板状态为“正常”;
- 设置面板大小为110×30;
12、好了,现在看下运行效果。
【注意】如果下面按钮下面有其它控件,表格可能会被遮住,那么只需要在鼠标滑入事件中设置一项让动态面板置顶操作就好了。
[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例的更多相关文章
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?
了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...
- Bootstrap入门(十)组件4:按钮组与下拉菜单结合
Bootstrap入门(十)组件4:按钮组与下拉菜单结合 先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...
- Chrome 自动填充的表单是淡黄色的背景
Chrome 自动填充的表单是淡黄色的背景解决方案; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; - ...
- 解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位
$(function () { //解决iphone填写表单时,表单项获取焦点时往下拉屏,导致顶部标题栏下滑错位 var u = navigator.userAgent; var isiOS = !! ...
- jquery自动将form表单封装成json的具体实现
前端页面:<span style="font-size:14px;"> <form action="" method="post&q ...
- jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单
jq自定义下拉菜单,当用户点击非自身元素(下拉菜单)本身时关闭下拉菜单 截图: 代码如下: //关闭用户菜单 $(document).mousedown(function(e){ var _con = ...
- Qt 样式表鼠标滑过按钮更改Text文本颜色
QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
随机推荐
- SonarQube代码质量管理工具安装与使用(sonarqube5.1.2 + sonar-runner-dist-2.4 + MySQL5.x)
1. SonarQube安装(sonarqube5.1.2 + sonar-runner-dist-2.4) 1.1 前提条件 1) 已安装Java环境(version:1.7+) 2) 已安装MyS ...
- asp.net core 通过ajax上传图片及wangEditor图片上传
asp.net core 通过ajax上传图片 .net core前端代码,因为是通过ajax调用,首先要保证ajax能调用后台代码,具体参见上一篇.net core 使用ajax调用后台代码. 前端 ...
- Vue.js+Koa2移动电商实战 笔记
地址:http://jspang.com/ https://github.com/shenghy/SmileVue 1.vant https://www.youzanyun.com/zanui/va ...
- linux 终端上网设置
原网址: https://www.aliyun.com/jiaocheng/215068.html 摘要:第一步,需要安装一个名为w3m的软件工具,打开终端,输入如下命令sudoapt-getinst ...
- php中类继承和接口继承的对比
PHP类继承: 1.PHP类不支持多继承,也就是子类只能继承一个父类,但是支持多层次继承,比如: class frist{ public function __construct(){ echo &q ...
- python接口自动化测试十:字典、字符串、json之间的简单处理
# 字典 t = { # 键:值 '': '', '': '' } # 字典 # dict key: value key是唯一的,无序的 h = { ...
- 步步为营-63-Asp.net-get与post
1 get Get方式将数据发送到服务端,那么会将用户在表单中的数据放置到浏览器的地址栏中发送到服务器 格式:表单元素name属性的值=用户输入的值 请求地址:http://localhost:594 ...
- CenOS常用命令
reset 作用:清屏 cd Change the shell working dirctory 切换工作目录 用法 输入cd+“空格”+“/”+“目录” 示例:cd /home 切换到home目录 ...
- HashTable、HashMap、ConcurrentHashMap的区别
HashTable是做了同步的,HashMap未考虑同步.所以HashMap在单线程情况下效率较高:HashTable在的多线程情况下,同步操作能保证程序执行的正确性. HashMap是非线程安全的, ...
- Codeforces 788C The Great Mixing
The Great Mixing 化简一下公式后发现, 问题变成了, 取最少多少数能使其和为1, bitset优化一下背包就好啦. 题解中介绍了一种bfs的方法没, 感觉比较巧妙. #include& ...