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

面板切换,也就是我们通常所有的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中的tab栏切换内容变换

    <!DOCTYPE html> <html lang="cn-zh"> <head> <meta charset="UTF-8& ...

  2. 一起学Android之Layout

    本文简述在Android开发中布局的简单应用,属于基础知识,仅供学习分享使用. 概述 在Android UI开发中,布局类型主要有两种:LinearLayout(线性布局)和RelativeLayou ...

  3. Powershell-远程操作

    1. 查看WinRM是否开启 Get-Service WinRM 2. Enable-PSRemoting –Force 3. 进行信任设置: Set-Item wsman:\localhost\cl ...

  4. SQLServer之ISO游标使用

    什么是游标 结果集,结果集就是select查询之后返回的所有行数据的集合. 游标则是处理结果集的一种机制吧,它可以定位到结果集中的某一行,多数据进行读写,也可以移动游标定位到你所需要的行中进行操作数据 ...

  5. Windows 组策略的生效规则

    一般的继承与处理规则 若上层父OU的某个组策略项目被设定,但是其下层子OU未设定该项目,则下层子OU继承上层父OU的这个组策略项目设定值 若在下层子OU内的某个组策略项目被设定,则此设定值预设会覆盖由 ...

  6. python3 员工信息表

    这是最后一条NLP了......来吧 十二,动机和情绪总不会错,只是行为没有效果而已 动机在潜意识里,总是正面的.潜意识从来不会伤害自己,只会误会的以为某行为可以满足该动机,而又不知道有其他做法的可能 ...

  7. linux的自有(内置)服务

    运行模式(运行级别) 在linux中存在一个进程,init(initialize初始化)进程号为1 ,该进程对应一个配置文件inittab 文件路径为/etc/inittab centOS6.5存在7 ...

  8. 《神经网络算法与实现-基于Java语言》的读书笔记

    文章提纲 全书总评 读书笔记 C1.初识神经网络 C2.神经网络是如何学习的 C3.有监督学习(运用感知机) C4.无监督学习(自组织映射) Rreferences(参考文献) 全书总评 书本印刷质量 ...

  9. 影响Linux发展的四位天才黑客

    影响Linux发展的四位天才黑客 相信大家对 Linux 再熟悉不过了.我们都知道 Linux继承自 Unix,但其实他们上一代还有一个 Multics.从最早的 Multics 发展到最早版本的 L ...

  10. python学习——读取染色体长度(三、用循环或者函数求总长并获取最长染色体长度)

    # 读取fasta # 解析每条序列的长度 chr_len = [10,20,30,40,50] # 求和 # 方法一:通过循环 total_len = 0 #定义total_len的初始长度 for ...