请选择 进入手机版 | 继续访问电脑版

dialogBox模块(对话框)demo示例

  [复制链接]
APICloud官方 发表于 2017-8-1 11:48:44
dialogBox 封装了十一种款式的对话框,每一种款式都提供一个接口来调用,开发者可按照各个接口的样式来自定义对话框上的文字、图片、图文等。后续我们会根据开发者需求继续添加若干样式对话框接口。

这个分享我把 dialogBox 模块的 11 个样式分别实现个简单的效果,其中将 alert 方法做了两个样式,如果你觉得我写的样式够丑,请不要喷我,因为我是程序猿[呵呵了],如果你接受了就直接用到你的项目,否则自己再根据官方的文档和结合自己的产品需求,来定义更多高大上的样式。

接下来我拿几个我常用的方法给大家简单介绍下,其它的大家可以看看模块的视频效果以后,自己上手做做。

  • alert()

这个方法算是系统的 alert 与 confirm 的结合,这之上还可以添加 icon。

  • sendMessage()

顾名思义,此方法在 alert 的基础之上追加了一个对话框,会调用中可以取到输入的值。

  • scene()

此方法是一个特定场景下的 UI 弹出层,它包含可设置场景图片、标题以及选项。

  • evaluation()

与 alert 类似,只不过将按钮的排版做了修改。

  • raffle()

该方法算是 scene 与 alert 的结合,效果可见此模块视频演示。

  • receipt()

在很多场景中我们就会有,比如一些简单到复杂的表单数据展示,通常这样的布局比较麻烦而繁琐。这个方法就是由此而生呀,简单配置下,就能够达到目的。

  • tips()

其实我觉得这个方法除了和名字说的提示功能以外,还有 N 多的使用场景,所以大家别被方法的名称给固定了使用的范围。

  • actionMenu()

这个方法的 UI 与 shareAction 模块类似,差别就是这个方法并没有实际的功能,不过通常情况下系统的很多功能并不是我们的产品想要的,我们需要自定义 UI 和功能,所以这里这个方法就起了大作用。

以上所有方法,我也都只是简单的用了下,大家在使用此模块的时候仔细看看文档,毕竟是 UI 模块,又要做到自定义,所以字段什么的太多了,一不注意你就疏忽了什么。在使用模块时,任何一个按钮点击时都有返回对应的索引,然后我们就可以根据索引去做自己的逻辑。

源码:https://**.****.**DialogBox-Example
演示视频:http://**.**1.z0.**.**apicloud/022d688d0e00d1b165fee5adc7d5d0ee.mp4


130条回复

tanjingwaini 职业车手 4602Y币
抢沙发。回帖拿金币,支持支持

回帖奖励 +1 Y币

回复 举报
huanyun-c 实习司机 417Y币
回帖拿金币,支持支持

回帖奖励 +1 Y币

回复 举报
hbshow 马路杀手 438Y币
感谢分享

回帖奖励 +1 Y币

回复 举报
不想规则的三角形 新手上路 165Y币

回帖拿金币,支持支持

回帖奖励 +1 Y币

回复 举报
川哥哥 半职业车手 17201Y币
谢谢版主

回帖奖励 +1 Y币

回复 举报
JoviChin 马路杀手 104Y币
支持一下拿云币,就是缺少这种模块的例子,学习

回帖奖励 +1 Y币

回复 举报
神奇的一颗蛋 入门司机 302Y币
帖拿金币,支持支持

回帖奖励 +1 Y币

回复 举报
顽皮的大叔 转正司机 792Y币
好东西 ,收藏

回帖奖励 +1 Y币

回复 举报
黄维荣 业余车手 795Y币
捡个云币

回帖奖励 +1 Y币

回复 举报
12345678910... 14下一页
您需要登录后才可以回帖 登录

本版积分规则