移动端dialog组件

移动端dialog组件

dialogView是满足移动端下,用户自定义的dialog组件,API可扩展性强,使用便捷。现版本是基于jquery库编写的,在使用之前需要引入jquery库或者Zepto库,后续将会和其他组件整合成一个轻量级UI组件库中。

引用

页面引入dialog.min.js和dialog.min.css

使用讲解

组件提供了一个全局dialogView接口,和一个open()主函数,使用的时候只需要dialogView.open()就可以了。

dialogView提供了常用的几种移动端dialog类型:alert,confirm,msg,footConfirm,footMsg。对前3种常用类型的dailog弹窗,暴露出了3个函数,便于使用,如dialogView.alert(),dialogView.confirm()和dialogView.msg(),三个函数拥有默认的类型值,所以使用这三个函数时不需要传入type值,当然也可以这样使用:dialogView.open({type:"alert"}),dialogView.open({type:"confirm"}),dialogView.open({type:"msg"})。

dialogView支持链式调用,如:dialogView.alert({message: "alert默认信息框"}).open({type:"footMsg",message: "我是提示类型框"})。

并且还暴露出了一个close()函数,用于关闭弹窗,使用如下:dialogView.close(),close()函数只支持传入一个参数,即需要关闭的弹窗的DOM元素,不传参时,将会默认关闭页面上所有的弹窗。

参数

message: 弹窗区域内容,参数类型可以是String类型,也可以是DOM对象。

type: 弹窗类型,参数类型为String类型,提供了5种默认的类型:alert,confirm,msg,footConfirm,footMsg,弹窗类型值可供用户自行扩展。

showTime: 弹窗显示时长,参数类型为Number类型。

className: 自定义class名,参数类型为String类型,会在弹窗的最外层元素上扩展class,一般用于特殊情况下使用。

skin: 弹窗区域自定义皮肤,参数类型为String类型,用于扩展弹窗区域的样式,其值会被扩充为弹框的class,比如你想给弹窗换掉默认背景色,换成自己定义的颜色,就可以先在样式文件中定义好一个class样式,然后skin值为定义的class值就可以了,用法如下:

dialogView.open({
    type: "msg",
    message: "我是提示类型框",
    shade: false,
    skin: "dialog-msg" //自定义的皮肤样式
})

项目的css文件下定义dialog-msg样式:

.mobile-dialogView .dialogView-m-main .dialog-msg{background-color:blue;}

效果如下:


demo-img

styles: 弹窗区域添加自定义css样式,与skin值得作用一致,不同的是skin参数值的自定义css样式是定义在样式文件中的,而styles值则是直接扩展到行内样式中,如:

dialogView.open({
    type: "footmsg",
    animate: "up",
    message: $("#info").show() || document.getElementById("info"),
    styles: "position: fixed;height: 100%;width: 100%;padding: 0;bottom: 0px;opacity: 1;", //自定义css样式,将直接扩展为行内样式
    showTime: 3000
})

shade: 是否需要遮罩层,参数类型为Boolean值。

shadeClose: 点击弹窗以外的区域是否关闭弹窗,参数类型为Boolean值。

closeable: 点击button按钮是否关闭弹窗,参数类型为Boolean值,默认值是true,如有特殊情况点击按钮不需要关闭弹窗,将改值设置为false就可。

animate: 弹窗动画效果,定义了两种弹窗动画效果,值为“open”和"up",第一种弹窗显示效果"open",其对应的关闭效果是"close",另一种弹窗显示效果"up",其对应的关闭效果是"down",默认动画效果为“open”。

buttons: 弹窗按钮组,参数类型为Array值,当dialog类型是alert时,有且只允许添加一个按钮,当dailog类型值是confirm或者footConfirm时,有且只允许添加两个按钮,当dailog类型值是msg或者footMsg时,不会添加任何按钮,其他dailog类型,用户写了多少按钮,就往按钮组添加多少按钮。
按钮的参数类型为Object键值对类型,有以下几种参数:

  • text: 按钮文字,参数类型可以是String类型
  • skin: 自定义按钮皮肤,使用如上面所述
  • callback: 回调函数,点击按钮时触发
  • closeable:参数类型为Boolean值,用于判定按钮点击之后是否关闭弹窗,默认值为true。

使用如下:

dialogView.confirm({
    message: "要前往我的github吗?",
    buttons: [{
        skin: "yes",
        text: "可以",
        callback: function(){
            window.location.href="https://github.com/webproblem";
        }
    },{
        skin: "no",
        text: "不要"
    }]
})

注: 在弹窗里的DOM元素上添加closeable=true属性,点击该DOM元素时会触发事件关闭弹窗,比如在自定义的标题上添加一个关闭按钮图标,使其点击时触发关闭事件,可以这样使用:

dialogView.open({
    title: {
        content: "<span>我是自定义标题</span><i class='demo-title-close' closeable=true></i>"
    },
    message: "自定义风格标题,第一个参数为标题内容,第二个参数为自定义的样式,<br>关闭按钮是自定义加上去的哦!"
})

title: 自定义标题区域,参数类型为Object键值对类型,有三个参数,一个参数是content,对应的值为自定义标题内容,参数类型可以是String类型,也可以是DOM对象。另两个参数是styles和skin,都是为自定义标题添加的样式,两个参数的区别如上面所述的一样。用法如下:

dialogView.open({
    title: {
        content: "<span>我是自定义标题</span>"
    }
})
demo-img.PNG

完整代码及示例见我的github,github地址: https://github.com/webproblem/hello-world/tree/master/dialog-View
Demo示例效果预览地址: https://webproblem.github.io/hello-world/dialog-View/dialog.html
** 如果喜欢,请记得Star哈!**
如有不对之处,欢迎及时指出!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容