美文网首页
在线日程管理工具的制作原理

在线日程管理工具的制作原理

作者: 陪学 | 来源:发表于2023-04-22 17:47 被阅读0次

    日常工作或者活动比价多的朋友相信都用过日程表,来提醒自己要做什么,或者做过什么。那么对日程进行管理是必不可少的。

     

    这里有一种常见的日程管理的方式:点击日期,在一个固定的区域显示活动;可以对活动进行添加和修改。看一下大致的效果是怎样的?

    想自己操作一下,更直接的感受效果,可以点击预览效果。https://tm4qzd.axshare.com

     

    首先分析一下,这个日程管理的交互逻辑是怎么样的

    1、点击日期,显示与日期相对应的活动

    2、当日没有活动,可以添加活动

    3、当日已有活动,可以修改活动

     

    怎么样,有没有觉得很眼熟?没错了,不止是在日程管理可以看到,许多管理类的产品都可以看到类似的逻辑。只要掌握了方法,做其他的产品时都没有问题了。

     

    那么就让我们开始吧,直接来掌握做法。

     

    在这个例子里面,由两部分组成,一个是日历,一个是活动内容。

     

    日历部分比较简单,我这里是直接用矩形搭建出来,大家也可以采用其他方式去做。

     

    重点!重点!下面的活动内容的部分,应该怎么做呢?有朋友第一反应可能是用动态面板去做。31天做31个状态,点击日期时进行状态的切换。这不失为一种方法,这里我要介绍的另一种方法,利用中继器去做。

     

    对样式进行简单的设置就可以了。设置分页,每页显示一项,并且起始页设置为当前日期。这样设置,就能够单独显示一天的活动内容。在点击日历中日期的时候,用中继器动作“设置当前页面”即可。

    这样,我们刚才分析出来的第一点交互逻辑就完成了。

     

    下面要到活动内容(中继器)中去完成其他的交互逻辑了。

     

    内容有两种可能性,一是没有活动,二是已有活动。没有活动的时候,需要添加活动,所以按钮应该是“添加”。添加完成之后,可以再次进行修改,这时按钮应该是“修改”。这里我的默认按钮是“修改”,所以下面设置“添加”。什么情况下设置为“添加”?

    看数据集,很容易知道当plan这一列的没有内容也就是为空的时候,该日是没有活动,可以添加的。很简单,将按钮的文字设置为“添加”,就行了。

     

    添加和修改内容应该怎么做呢?这个问题就是我们也是使用中继器制作的一个关键,大家应该记得,中继器有一个动作—更新行。我们只需输入内容,点击保存之后,将数据更新为我们输入的内容就可以了。

     

    当这个按钮是“添加”和“修改”按钮的时候,点击之后,我们可以输入或修改内容。既然要输入或修改,那么我们就在这里用一个多行文本框来制作输入框。先隐藏了,点击的时候再显示出来就行。添加时,输入框原本内容是空的,修改时,输入框原本内容是中继器数据集中的内容,跟数据集都是能匹配的。所以,在这个情况下需要先让输入框获取到中继器的数据对应的内容。

     

    在输入框中编辑好文字之后,我们就可以保存这些文字了。按照刚才我们的分析,利用中继器的更新行,只需将item.plan的数据更新为我们输入的文字就可以了。

     

    再将输入框隐藏,按钮的文字修改,我们的完整的交互就完成了。

     

    最后再来理一下整个交互逻辑。点击日期,如果没有活动,点击添加按钮,输入内容,点击保存,添加完成,获得内容;如果已有活动,点击修改按钮,修改内容,点击保存,修改完成,获得新内容。

     

    简单画一下图,一目了然,整个逻辑非常清楚了。在整理思路的时候,简单的画一下图对我们是很有帮助的,能让我们的思路清晰。

     

    这个例子说起来不难,在我们的工作、生活中也见得不少了,只要理解了思路,就能够举一反三,随机应变了。

    相关文章

      网友评论

          本文标题:在线日程管理工具的制作原理

          本文链接:https://www.haomeiwen.com/subject/pbgsjdtx.html