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

【APICloud系列|29】dialogBox模块(对话框)的实现

[复制链接]
轩峰毅飞 发表于 2021-1-2 12:01:39 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  导读: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 模块,又要做到自界说,所以字段什么的太多了,一不注意你就疏忽了什么。在使用模块时,任何一个按钮点击时都有返回对应的索引,然后我们就可以根据索引去做自己的逻辑。
项目结构:


config.xml

  1.   对话框的实现    58DCDC    [code]  [code]  [code]  [code]  [code]  [code]  [code]  [code]  [code]  [code]  [code]  [code]                  
复制代码
index.html

  1.                                                 html{ background-color: white; }            header{  padding: 25px 0; }            span {                padding: 5px 15px;                margin: 10px;                display: inline-block;                background-color: #e8e8e8;            }            .hover{ opacity: .4; }                                    [size=6]dialogBox[/size]
  2.                             使用前请详细阅读 文档 使用规则                             dialogBox_alert1          dialogBox_alert2          dialogBox_sendMessage          dialogBox_scene          dialogBox_evaluation          dialogBox_raffle          dialogBox_taskPlan          dialogBox_receipt          dialogBox_tips          dialogBox_discount          dialogBox_share          dialogBox_actionMenu
复制代码
 完整代码下载地点:https://download.csdn.net/download/weixin_41937552/13993289
                                    
                                                孙叫兽                                           
                                       
                CSDN认证博客专家                                        HTTPS                Node.js                JavaScript                            多年的开辟履历,开辟过APP,小步伐,网站及系统,以前从事java相关系统研发,现在从事保险,证券,金融相关的前端全栈开辟工作,微信公众号:电商步伐员.QQ交换群:426360778
来源:https://blog.csdn.net/weixin_41937552/article/details/112027889
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )