[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、好了,现在看下运行效果。

【注意】如果下面按钮下面有其它控件,表格可能会被遮住,那么只需要在鼠标滑入事件中设置一项让动态面板置顶操作就好了。

时间: 2024-07-30 09:38:37

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例的相关文章

利用jQuery实现,蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量           position().left           position().top 获取元素相对于当前窗口的偏移量           offset().left           offset().top 步骤: 1.创建父元素.当前对象.蒙板 代码如下: <div class="wrap">  

鼠标滑入滑出事件

$("#clo").mouseover(function(){//当id为clo的元素 鼠标滑入将id为hint_closs元素显示 $("#hint_closs").show(); }); $("#clo").mouseout(function(){//当id为clo的元素 鼠标滑出将id为hint_closs元素隐藏       $("#hint_closs").hide(); });

关于上一篇鼠标移到按钮时的“按下”效果的三种方法

上一篇博文中,关于按钮按下的效果回过头研究了下,总结了如下三种方法,只写出关键样式: 1.相对定位 1 input.button{ 2 3 position:relative; //用相对定位 4 } 5 6 input.button:hover{ 7 top:2px;//鼠标移动到此top增加2px 8 } 2.主要利用外边距这个属性,鼠标移动到按钮位置时,按钮上外边距增加2px,下外边距减少2px(相当于走出去2px又退回来2px),就可以达到按下效果,如果只是单独写margin-top:2

鼠标经过自动下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

Bootstrap入门(十)组件4:按钮组与下拉菜单结合

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script> <script

1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果

1.鼠标点击换样式 <style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=&quo

JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动

程矢Axure夜话:中继器系列视频教程之中继器下拉菜单联动 案例描述:中继器下拉菜单联动 知识点: 中继器复合操作 效果图: 在线效果预览: AxShare在线效果预览: 原型下载地址:中继器拉菜单联动 .rp 在线视频: 实现步骤: 更新中-..

ios ASIHttpRequest库进行DELETE操作时delete带有参数表单的使用方法

1,普通的DELETE只需加上下述一句code: [request setRequestMethod:@"DELETE"]; 2,附带有参数表单的情况(一次删除请求): ASIFormDataRequest *request; NSURL *baseURL = [NSURL URLWithString:@"http://www.baidu.com/xx/"]; request = [ASIFormDataRequest requestWithURL:baseURL]