zoukankan      html  css  js  c++  java
  • 中继器信息获取与分页条的实现--转载

    首先提醒一下,这个很长,有些人可能会受不了!

    先来看看要实现的内容。

    这是一个学生成绩的表格。

    我来介绍一下,需要做的内容:

    1、使用中继器实现表格,设置每页显示数量和交替背景颜色;

    2、表格中首列序号自动生成,且不受翻页影响;

    3、表格加载时,顶部显示表格相关信息,包括可见项数量、加载项数量、当前页面以及页面总数;

    4、点击分页条按钮能够翻到相应页面;

    5、点击分页条按钮时,列表信息要跟随发生变化;

    6、列表翻页时,对应的翻页按钮文字加粗显示。

    特别提醒:对中继器不了解的同学,去看《中继器结构与原理详解》,否则,在学习本教程过程中,出现恶心、呕吐、发热以及妊娠反应,本站概不负责!

    接下来,我们就根据上面罗列的实现目标,逐一完成各项功能。

    第一步,放入一个中继器,双击打开,先完成中继器的基本操作(纯属套路,此处简述,看图理解)。

    1、创建模板

    2、添加数据

    3、添加交互

    这一步需要特别说明一下。

    【每项加载时】添加【设置文本】这个动作时,其他几项照常操作,序号这一项要将“StuIndex”的值设置为“[[(Item.Repeater.pageIndex-1)*12+Item.index]]”。

    其中:Item.Repeater.pageIndex是当前项所在中继器的当前页码;item.index是当前项的序号,但是这个序号翻页后会依然从1开始;所以,我们通过页码减1乘以12(每页项目数量)再加上项的序号就能够计算出正确的序号。

    4、设置样式

    这一步也要注意,模板中的所有矩形都要取消填充颜色或者设置不透明为0%,否则,会遮挡中继器添加的背景颜色和交替背景色。

    经过以上几步设置,我们现在能够看到这样的效果。

    第二步,表格上面的X要变成相应的数值。

    我们先给显示信息的元件命名为“ListInfo”

    页面打开后,这些数值就要呈现出来,所以,在这个元件的【载入时】(在更多事件中)我们添加【设置文本】于“当前元件”的动作,然后点击fx按钮,进行值的设置。

    在值的设置界面,我们先创建局部变量获取到【元件】“List”,然后通过系统变量调用它的各个属性,添加到信息文本中。

    通过这一步,在预览时我们就能够看到列表信息了。

    第三步,为分页条按钮添加翻页的交互。

    翻页的交互很简单,都是通过【鼠标单击时】添加【设置当前显示页面】的动作来实现,区别在于上一页、下一页和尾页是在列表中选择,其它的是指定页码。

    1、尾页

    2、上一页

    3、下一页

    4、首页

    5、各个翻页按钮

    各个翻页按钮上的文字即是页码,所以可以通过[[This.text]]获取到当前被点击翻页按钮上的文字填入。这样设置完毕后,可以将交互复制给其他翻页按钮,无需再重复设置。

    第四步,点击翻页按钮时,列表信息要跟随发生变化。

    我们需要给分页条中每一个按钮【鼠标单击时】都继续添加一个,通过【触发事件】重新触发信息元件“ListInfo”的【载入时】事件。

    这里以首页按钮为例。

    添加完这个动作后,复制给其它翻页按钮,这样,在翻页的同时列表信息也会被重新加载。

    第五步,列表翻页时,对应的翻页按钮文字加粗显示。

    翻页按钮的文字样式发生变化,我们首先该想到的是需要设置【选中】时的交互样式。

    并且,给这些翻页按钮添加相同的选项组名称,以保证只有一个按钮文字变粗。

    提示:关于选项组效果,请到《Axure RP 8入门手册》的在线阅读的相关文章中了解。

    这些带有页码的翻页按钮命名为“Tag01”~“Tag06”,为什么到6呢?

    因为,我的中继器数据集中共有69条数据,每页12条,共6页。那为什么是69呢?

    我就喜欢69,管得着么?

    接下来,我们需要考虑的是什么时候选中。

    很显然,每个带有页码的翻页按钮【鼠标单击时】,都应该【选中】当前这个按钮,从而文字变成选中时的粗体。

    提示:当然也可以设置其他样式,只是对于我来说粗点就行了。

    这一个动作也只需要给一个带有页码的翻页按钮设置,然后复制给其它按钮。

    另外,还要给首页按钮【鼠标单击时】【选中】“Tag01”的动作;

    并且,给尾页按钮添加【鼠标单击时】【选中】“Tag06”的动作。

    最后,还有上一页和下一页按钮需要进行处理。

    而且,页面刚刚打开时也需要选中一个带有页码的翻页按钮。

    那么,我们就在每一个带有页码的翻页按钮【载入时】都添加一个交互。

    首先,在条件设置中,我们可以通过局部变量“l”获取中继器“List”这个元件,然后通过“l.pageIndex”获取到当前列表显示页面的页码;如果这个页码【==】“当前元件”的【元件文字】,就执行【选中】“当前元件”的动作。

    提示:局部变量“l”的设置,参考第二步中类似的设置;选中当前元件的动作设置,参考上一步中类似的设置。

    当为每一个带有页码的翻页按钮设置完载入时的交互之后,我们为上一步和下一步按钮添加交互,这个交互是【鼠标单击时】通过【触发事件】重新执行每一个带有页码翻页按钮的【载入时】交互。

    以上一页按钮为例。

    因为之前添加过【触发事件】这个动作,我们就在这个动作上继续编辑。

    完成这一步后,点击上一页和下一页按钮时,就能根据中继器当前页面的页面选中对应的页码按钮。

    以上,就是整个案例的实现过程,是不是长?但是能够弄出来很爽?

  • 相关阅读:
    USACOZero Sum
    USACOControlling Companies
    USACOParty Lamps
    USACOMoney Systems
    UVa11292
    USACOLongest Prefix
    USACOThe Tamworth Two
    USACORunaround Numbers
    业内常见电子病历编辑器简单比较(1)编辑控件来源比较
    GB(国标)字典大全
  • 原文地址:https://www.cnblogs.com/baby-zhude/p/11890874.html
Copyright © 2011-2022 走看看