无论是谁,在刚开始接触一门不太熟悉的东西时都有一种恐惧感,但是慢慢多练习几遍,再多琢磨琢磨,形成自己的见解和认识,就掌握的差不多了。我说的是题外话,现在转入正题。

面板切换,也就是我们通常所有的tab切换。

几个简单的步骤就可完成: 先看图,我们预想的是默认情况下:显示快速登录按钮的选中状态,下面内容显示相应的内容:‘我是内容一’,点击账户密码登录,选中账户密码登录状态,显示对应的内容:‘我是内容二’

步骤1:

页面上拖入一个动态面板,双击动态面板,点击+,增加一个状态 state2。好了,现在面板上有两个状态了.

步骤2:

动态面板上面拖入两个矩形,设置两个矩形的选中状态的样式。

步骤3:

添加点击事件

步骤4:

设置两个矩形一个组,这样的情况下,只能选中一个按钮。

经过这几个步骤,已经可以实现一个tab页面。自己试试看吧。

Axure之动态面板:登录面板切换的更多相关文章

  1. layui js动态添加的面板不能折叠

    layui 动态添加dom后一般调用 layer.form.render()更新dom就可以了,但是我动态添加一个面板后form.render()就没有效果,要用layui.element.rende ...

  2. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  3. ecshop 完美解决动态ip登录超时和购物车清空问题

    ecshop 完美解决动态ip登录超时和购物车清空问题 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-05-06 前一段时间,ECSHOP开发中心的一个客户 ...

  4. 用JS动态创建登录表单,报了个小错误

    后来发现原来是: dvObj.style.border='#Red 1px sold'; 其中的Red多谢了一个‘#’, 但是奇怪的是在chrome和firefox都备有报错,但是在ie中报错了. 各 ...

  5. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  6. vue2.0使用动态组件实现tab切换效果(vue-cli)

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

  7. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  8. qq登录面板

  9. Axure RP动态面板操作

    参考资料: 动态面板实现banner的轮播效果

随机推荐

  1. vue+element-ui实现行数可控的表格输入

    element的table中使用 <template slot-scope="scope"> </template> 包裹想要插入的input,或者sele ...

  2. 使用GDB调试Android Native 层代码

    --------------步骤:0. adb root0. adb shell0. ps | grep browser1. gdbserver :5039 --attach pid2. adb fo ...

  3. 常见的异步方式async 和 await

    之前研究过c#的async和await关键字,幕后干了什么,但是不知道为什么找不到相关资料了.现在重新研究一遍,顺便记录下来,方便以后查阅. 基础知识 async 关键字标注一个方法,该方法返回值是一 ...

  4. maven项目更换本地仓库

    由于电脑重装系统更换原来maven项目的本地仓库 以前的仓库位置如图 需要更换的仓库位置 更换步骤如下: 更换后:

  5. PowerShell或命令行运行javac xx.java提示“编码GBK的不可映射字符”

    由于JDK是国际版的,我们在用javac编译时,编译程序首先会获得我们操作系统默认采用的编码格式(GBK),然后JDK就把Java源文件从GBK编码格式转换为Java内部默认的Unicode格式放入内 ...

  6. codeforces div2 220 解题

    这套题我只写了a, b, c..  对不起,是我太菜了. A:思路:就是直接简化为一个矩阵按照特定的步骤从一个顶角走到与之对应的对角线上的顶角.如图所示. 解释一下特定的步骤,就像马走日,象走田一样. ...

  7. 如何在本地测试Fabric Code

    前一篇博客讲到了如何编译本地的Fabric Code成镜像文件,那么如果我们想改Fabric源代码,实现一些Fabric官方并没有提供的功能,该怎么办呢?这时我们除了改源码,增加需要的功能外,还需要能 ...

  8. 记录nodejs的writeHead

    使用response.writeHead()时,如果第二个参数的值使用错误的字符时,会使整个页面被镶嵌在<pre></pre>中被传输过去. 例: response.write ...

  9. Neutron:Firewall as a Service(FWaaS)

    用户可以用它来创建和管理防火墙,在 subnet 的边界上对 layer 3 和 layer 4 的流量进行过滤.   传统网络中的防火墙一般放在网关上,用来控制子网之间的访问. FWaaS 的原理也 ...

  10. scala的多种集合的使用(7)之集Set的操作方法

    1.给集添加元素 1)用+=.++=和add给可变集添加元素. scala> var set = scala.collection.mutable.Set[Int]() set: scala.c ...