模仿小程序弹出、确认、底部弹出栏目的插件

这是我写的一个信息提示插件,适合移动端。日后会不断更新,欢迎指正。
main.js源码见文章末尾

1、引用方式

需要先引入jquery.js,1.7版本以上均可
<script src="main.js"></script>

或者

var rnd = "";
 for (var i = 0; i < 10; i++)
rnd += Math.floor(Math.random() * 10);
document.writeln("<script src=\"main.js?rnd=" + rnd + "\"><\/script>");

推荐使用第二种,这样可以去js的缓存

2、使用方法

(1)弹出提示:

main.showToast({ title: "请输入回复内容" });
--title 需要提示的内容 具体可以看 main.js 里的 showToast() 方法

(2)对话框

 main.showconfirm({
                    title: "提示信息",
                    content: "提示的内容",
                    confirmText: "确认",
                    cancelText: "取消",
                    confirm: function () {
                          --点击确认执行
                    },
                    cancel:function(){
                        --点击取消后执行
                        --默认可以不写cancel
                    }
                })

(3)加载中与取消加载

main.showloading({ title: "提示内容" });
main.hideloading();

(4)底部弹出

 main.showpickbox({
            title: "提示内容",
            operlist: [{
                name: "方法1",
                oper: function () {
                      --方法1的方法体
                }
              },
                {
                name: "方法2",
                oper: function () {
                      --方法2的方法体
                }
            }]
          })

main.js

--main.js
var main = {
    img: {
        loadimg: "data:image/gif;base64,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"
    },
    classstr: {
        commoncss: ".windowbgmsg{padding: 0px; margin: 0 auto; font-family: Arial; text-decoration: none; font-size: 14px; color: #333;position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100%; z-index: 10000;}"
                + ".windowbgmsg_confirm{padding: 0px; margin: 0 auto; font-family: Arial; text-decoration: none; font-size: 14px; color: #333;position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100%; width: 100%; z-index: 10000;background: rgba(0, 0, 0, 0.30);}"
                + ".windowbgmsg *{ padding: 0px; margin: 0 auto; font-family: Arial; text-decoration: none; font-size: 14px; color: #333;}"
                + ".windowbgmsg_confirm * { padding: 0px; margin: 0 auto;  }"
                + ".loading{height: 100px; width: 100%; position: absolute; top: 50%; margin-top: -60px; left: 50%; margin-left: -60px; text-align: center; background: rgba(0, 0, 0, 0.70); width: 100px; padding: 10px; border-radius: 10px;}"
                + ".loading_img{height: 35px; width: 35px; margin-top: 20px; }"
                + ".loading_p{line-height: 35px; color: #333; font-size: 14px; margin-top: 10px; color: #fff; }"
                + ".Toast{width: 100%; top: 50%; text-align: center; position: absolute; left: 0px;}"
                + ".Toast_span{display: inline-block; background: rgba(0, 0, 0, 0.65); max-width: 250px; min-width:60px; padding: 10px; border-radius: 10px; color: #fff; font-size: 14px; transform: translateY(-50%); line-height: 20px;text-align:left;}"
                + ".confirmbox{width: 300px;background: #fff;position: fixed;left: 50%;margin-left: -150px;top: 50%;transform: translateY(-50%);border-radius: 5px;overflow: hidden;}"
                + ".confirmtitle{line-height: 40px;background: linear-gradient(to right,#D30010, #F10D1E);padding: 0px 10px;color:#fff;}"
                + ".confirmcontent{text-align: center;height:80px;display:table;}"
                + ".confirmcontent_p{line-height:30px;display:table-cell;vertical-align:middle;}"
                + ".confirmoper{line-height: 40px;overflow: hidden;border-top: 1px solid #e0e0e0;}"
                + ".confirmoper a{cursor: pointer;} "
                + ".confirm{width: 50%;display: inline-block;text-align: center;float:left;position:relative; color:#D30010;}"
                + ".confirm_i{position: absolute;height: 24px;width: 1px;background: #ddd;right: 0px;top: 8px;}"
                + ".cancel{width: 50%;display: inline-block;text-align: center;float:left;position: relative;}"
                + ".pickboxdiv{bottom: 0px;width: 100%;position: fixed;background: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;}"
                + ".pickboxtop{line-height: 40px; font-size: 12px; color:#808080;text-align: center;}"
                + ".pickboxcenter{ line-height: 40px; text-align: center;border-top: 1px solid #f1f1f1}"
                + ".pickboxcenter a{ display: list-item; color:red; width: 100%; }"
                + ".pickboxbottom{ border-top: 5px solid #f1f1f1;line-height: 40px;text-align: center; }"
                + ".pickboxbottom a{ display: list-item; }"
    },
    loadcss: function () {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.rel = 'stylesheet';

        style.appendChild(document.createTextNode(main.classstr.commoncss));
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(style);

    },
    showloading: function (object) {
        var title = object.title;
        var html = "<div id='windowbgmsg' class='windowbgmsg'>"
                 + "    <div class='loading'>"
                 + "        <img class='loading_img' src='" + main.img.loadimg + "'/>"
                 + "        <p class='loading_p'>" + title + "</p>"
                 + "    </div>"
                 + "</div>";
        $("body").append(html);
    },
    hideloading: function () {
        $("#windowbgmsg").remove();
    },
    showToast: function (object) {
        var title = object.title;
        var html = "<div id='windowbgmsg' class='windowbgmsg'>"
                 + "    <div class='Toast'>"
                 + "        <span class='Toast_span'>" + title + "</span>"
                 + "    </div>"
                 + "</div>";
        $("body").append(html);

        var duration = object.duration;
        if (duration == "" || duration == null || duration == undefined) {
            duration = 1500;
        }
        setTimeout(function () {
            $("#windowbgmsg").remove();
            if (object.success == "" || object.success == null || object.success == undefined) {

            } else {
                object.success(); //执行方法                
            }
        }, duration)
    },
    showconfirm: function (object) {
        if (object.cancelText == "" || object.cancelText == null || object.cancelText == undefined) {
            object.cancelText = "取消";
        }
        if (object.confirmText == "" || object.confirmText == null || object.confirmText == undefined) {
            object.confirmText = "确定";
        }
        var html = "<div id='windowbgmsg' class='windowbgmsg_confirm'>"
                 + "    <div class='confirmbox'>"
                 + "        <h3 class='confirmtitle'>" + object.title + "</h3>"
                 + "        <div class='confirmcontent'>"
                 + "            <div style=' display:table-row;'>"
                 + "                <div class='confirmcontent_p'>" + object.content + "</div>"
                 + "            </div>"
                 + "        </div>"
                 + "        <div class='confirmoper'>"
                 + "           <a id='confirmbox_cancel' class='cancel'>" + object.cancelText + "<i class='confirm_i'></i></a>"
                 + "           <a id='confirmbox_confirm' class='confirm' >" + object.confirmText + "</a>"
                 + "        </div>"
                 + "    </div>"
                 + "</div>";
        $("body").append(html);
        $("#confirmbox_confirm").click(function () {
            if (object.confirm != "" && object.confirm != null && object.confirm != undefined) {
                object.confirm();
            }
            $("#windowbgmsg").remove();
        })
        $("#confirmbox_cancel").click(function () {
            if (object.cancel != "" && object.cancel != null && object.cancel != undefined) {
                object.cancel();
            }
            $("#windowbgmsg").remove();
        })
    },
    showpickbox: function (object) {
        var title = object.title;
        if (title == "" || title == null || title == undefined) {
            title = "信息提示";
        }
        var operhtml = "";
        if (object.operlist != null || object.operlist != undefined) {
            $.each(object.operlist, function (index, item) {
                operhtml += "<a name='pickboxoper' data-index='" + index + "' class='pickboxoper'>" + item.name + "</a>";
            })
        }

        var html = "<div id='windowbgmsg' class='windowbgmsg_confirm'>"
                 + "<div class='pickboxdiv'>"
                 + "    <div class='pickboxtop'>" + title + "</div>"
                 + "    <div class='pickboxcenter'>" + operhtml + "</div>"
                 + "    <div class='pickboxbottom'><a onclick=\"$('#windowbgmsg').remove();\">取消</a></div>"
                 + "</div>"
                 + "</div>";
        $("body").append(html);
        var h = $(".pickboxdiv").height();
        $(".pickboxdiv").css("bottom", (h * -1) + "px");
        $(".pickboxdiv").animate({ "bottom": "0px" }, 100)
        $("#windowbgmsg").click(function (e) {
            if ($(e.target).closest('.pickboxdiv').length <= 0) {
                $("#windowbgmsg").remove();
            }
        })
        $("a[name='pickboxoper']").click(function (e) {
            var index = e.currentTarget.dataset.index;
            object.operlist[index].oper(e);
            $("#windowbgmsg").remove();
        })
    }
}
$(function () {
    main.loadcss();
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353