展开功能 收起 日历_AXURE实现筛选栏收起与展开、日历选择器、时钟

今天给大家分享一下使用Axure软件如何实现筛选栏收起与展开效果与日历选择器、时钟。( 本文使用软件是Axure 9)

---START---

一、筛选栏收起与展开

我们先看一下效果:

47d904094e264af159bb882e7bfc2815.gif

筛选栏收起与展开

思路:可以通过添加控件点击事件实现筛选字段控件的隐藏状态与移动状态来完成。

实现过程:

1.1、首先我们在Axure软件中新建一个画布,在画布中简单做一个左侧有菜单栏,顶部有导航栏,右边带有表格的界面,在表格上方新建12个矩形为筛选字段。

2209faae38b98a265cf4c07a3c150115.png

图1.1

1.2、在筛选栏中定义了订单号、物料编码、物料名称等6个筛选字段,在筛选字段下添加展开更多矩形、直线与三个按钮。

b54f79f024e3ca53438cb8186dc93a65.png

图1.2

1.3、在这里默认进入网页后状态、线体、生产日期三个筛选字段是隐藏的,所有我们将这三个控件状态设置为隐藏。

88a941b0f36f0a1d85a7650a8ad5669b.png

图1.3

1.4、当点击展开更多或者收起更多时,红框中的控件(图1.3)是整体移动,所以我们选中这几个控件进行组合。

7c090cc9538d5efed5717a06dea371b4.png

图1.4

1.5、进入网页后状态、线体、生产日期三个筛选字段是隐藏的,我们点击展开更多,三个被隐藏的筛选字段显示,并且展开更多控件所在的组合不能遮挡到筛选字段,所以需要下移一段距离,展开更多字段文本变为收起更多。当点击收起更多时,则需要对筛选字段进行隐藏,并且移动收起更多组合往上移动一段距离。这样我们展开收起的效果就实现了。

1.6、给展开更多控件添加单击事件。

详见图1.5、1.6

情形一:展开更多

831b0c98d0d02268c50ae7277ca619a3.png

图1.5

情形二:收起更多

c12322464ccb5add6d02caf60770c5fe.png

图1.6

1.7、按照上面的步骤配置结束之后,赶紧运行一下吧~

二、日历选择器

我们先看一下效果:

8306396044b40e780d6498ae2241f614.png

日历选择器

思路:利用动态面板与中继器

实现过程:

2.1创建两个矩形(一个用于显示生产日期,一个命名为inputdate用以显示选中日期)一个动态面板calender并且给面板添加点击时间显示面板(面板默认不可见)。

81d697b1cc3f7222233e7e149fb2b2f4.png

图2.1

2.2、动态面板中添加两个矩形以及一个中继器。给中继器设计列属性,设定中继器的展示样式,排列格式为水平,网格排布,每排7个。

cf5856373139eec00986b4632ea354d4.png

图2.2

2.3、给中继器添加每项加载事件,显示各项的数值。

用到的函数:[[Item.Column0]]

674403a8dc192fdd2e0a4461090f5c42.png

图2.3

2.4、双击中继器进入单元编辑:

1、设置鼠标悬停以及按下样式(为了美观)

2、添加单击事件,当鼠标点击某一天时,inputdate文本框获取所选日期,并且设置其选中状态为false,同时隐藏calender面板。

9c7b01ed24eda6af4fd317360efa56d1.png

图2.4

三、时钟

我们先看一下效果:

2a73f7f43606d0f05f94e27f49584e7b.gif

时钟

思路:可以创建动态面板并添加两个状态,每个状态下都获取当前时间,然后通过控制面板状态变化循环就可以实现时钟的效果了。

实现过程:

3.1、首先,创建一个矩形并且右键转换为动态面版。

cb34cbfe0fae42d8e017a5df127547f6.png

图3.1

3.2、给动态面板添加一个状态改变时的事件,在状态改变时设置文本,将第一步中两个状态下的文本框都获取一下当前时间。

获取当前时间函数:[[Now.toISOString().substring(0,10)]] [[0.concat(Now.getHours()).slice(-2)]][[Now.toISOString().substr(13,6)]]

7bb6a2ac9b85b6cfe3c52d33df43d415.png

图3.2

3.3、再给动态面板添加一个载入事件,让其页面加载后每隔一秒往后循环一个status。

c46a55f8c78c23c45cd540d55d93d955.png

图3.3

---END---


版权声明:本文为weixin_35817272原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。