jquery.Confirm 确认框 第三版【延迟确认 · 防手抖】

yuanoook
yuanoook 发布于 2016-05-06 17:06:40 浏览:1255 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
基于第二版本 做了 功能增强
http://www.w3cfuns.com/notes/14332/59906f7251dc2bca46f341f24a36aa4b.html

jquery.Confirm 确认框 第三版【延迟确认 · 防手抖】

增加的新功能参数:
       1.bg_cancel : 点击背景(escape 按钮)触发取消
       2.delay_seconds: 延迟多少秒之后才可以点击确认【防手抖】


效果演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>jQuery Confirm 2.0</title>
    <script src="http://yuanoook.com/cdn/jquery.min.js"></script>
    <script src="http://yuanoook.com/file?hash=7fe4a48ca90d7eb575b1997462c7e3f5"></script>
</head>
<body style='font:400 14px/1.7 Roboto,"Helvetica Neue","Segoe UI",Verdana,Tahoma,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;padding:50px;text-align:center;'>

<script id="demo-script" style="display:block;white-space:pre-wrap;text-align:left;padding:20px;box-shadow:0 0 10px rgba(0,0,0,.3);">
//用法示例
var title = "我是确认框标题";
var content = "我是确认框的内容,随便来一点内容吧!<br/>这是一个你可能需要等会儿才能确认的确认框!";
var bg_cancel = false;
var btns_num = 2;
var delay = 10;

$.Confirm(title,content,btns_num,bg_cancel,delay).ok(function(){
    //这是确定的回调
    alert('你点击了『确定』');
}).cancel(function(){
    //这是取消的回调
    alert('你点击了『取消』');
});
</script>

<br/>
<br/>
<br/>
<h3>其他示例</h3>
<br/>
<a href="javascript:void( $.Confirm('《八荣八耻》','<p>
            以热爱祖国为荣 以危害祖国为耻<br/>
            以服务人民为荣 以背离人民为耻<br/>
            以崇尚科学为荣 以愚昧无知为耻<br/>
            以辛勤劳动为荣 以好逸恶劳为耻<br/>
            以团结互助为荣 以损人利己为耻<br/>
            以诚实守信为荣 以见利忘义为耻<br/>
            以遵纪守法为荣 以违法乱纪为耻<br/>
            以艰苦奋斗为荣 以骄奢淫逸为耻
        </p>',1) );"
    >
    点击涨节操
</a>
<br/>
<a href="javascript:void( $.Confirm('请仔细阅读以下条款,点击确认表示同意。','一大堆没有仔细阅读然后同意的条款') );">
    点击查看条款
</a>
</body>
</html>


核心代码
$.extend({
    Confirm: function(){
        var template = multiline(function(){/*!@preserve
            <style>
                .jquery-confirm-content p{margin:.7em 0 0;}
                .jquery-confirm-cancel:hover,.jquery-confirm-ok:hover{background:#f0f0f0;}
                .jquery-confirm-ok.disabled{width:50%;cursor:not-allowed;color:gray!important;}
            </style>
            <div style="position:fixed;width:100%;height:100%;display:table;text-align:center;background:rgba(0,0,0,.3);z-index:100001;top:0;left:0;">
                <div style="display:table-cell;vertical-align:middle;">
                    <div class="jquery-confirm-body" style="display:inline-block;background:#fff;border-radius:10px;text-align:left;overflow:hidden;max-width:90%;">
                        <div style="text-align:left;padding:20px;line-height:1.5;">
                            <h4 class="jquery-confirm-title" style="margin:0;font-size:16px;"></h4>
                            <div class="jquery-confirm-content" style="font-size:14px;padding:1em 0 0;"></div>
                        </div>
                        <div style="display:inline-table;width:100%;line-height:48px;height:48px;border-top:1px solid rgba(0,0,0,.1);font-size:16px;text-align:center;">
                            <a class="jquery-confirm-cancel" href="javascript:;" style="display:table-cell;box-sizing:border-box;color:#3498DB;text-decoration:none;text-align:center;">
                                取消
                            </a>
                            <a class="jquery-confirm-ok" href="javascript:;" style="display:table-cell;box-sizing:border-box;color:#3498DB;text-decoration:none;text-align:center;">
                                确定<span class="delay-seconds"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        */console.log()});

        return function(title,content,btns_num,click_bg_cancel,confirm_delay_seconds){
            var title = title||'你确认要进行该操作?',
                content = content||'',
                btns_num = btns_num||2,
                click_bg_cancel = click_bg_cancel||false,
                confirm_delay_seconds = confirm_delay_seconds||0,
                ok,cancel,result = {
                    ok:function(func){ok=func;return result;},
                    cancel:function(func){cancel=func;return result;}
                };

            var dom = $('<div>').html(template);

            btns_num==1
                ? dom.find('.jquery-confirm-cancel').remove()
                : dom.find('.jquery-confirm-ok').css('border-left','1px solid rgba(0,0,0,.1)');

            dom.on('touchmove',function(){return false;});
            dom.find('.jquery-confirm-title').html(title);
            dom.find('.jquery-confirm-content').html(content);

            click_bg_cancel && dom.on('click',function(){
                cancel && cancel();
                distroyAll();
            }).find('.jquery-confirm-body').on('click',function(){
                return false;
            }) && $(window).on('keyup', tryEscape);

            dom.find('.jquery-confirm-ok').on('click',function(){
                if( $(this).is('.disabled') ){return false;}
                $(this).addClass('disabled');

                ok && ok();
                distroyAll();
            });
            dom.find('.jquery-confirm-cancel').one('click',function(){
                cancel && cancel();
                distroyAll();
            });

            //Prevent hands mistake 防手抖功能
            confirm_delay_seconds && dom.find('.jquery-confirm-ok').addClass('disabled');
            var delay_seconds_timer = confirm_delay_seconds && setInterval(function(){
                if(confirm_delay_seconds<0){
                    clearInterval(delay_seconds_timer);
                    renderDelaySeconds(0);
                    dom.find('.jquery-confirm-ok').removeClass('disabled');
                    return;
                }
                renderDelaySeconds(confirm_delay_seconds);
                confirm_delay_seconds--;
            },1000);

            dom.appendTo( $('body') );

            function renderDelaySeconds(seconds){
                dom.find('.delay-seconds').html(
                    seconds ? ('&nbsp;( ' + seconds + 's )') : ''
                );
            }

            function tryEscape(event){
                event.key === 'Escape' && distroyAll();
            }

            function distroyAll(){
                $(window).off('keyup',tryEscape);
                clearInterval(delay_seconds_timer);
                dom.remove();
            }

            return result;
        }

        function multiline(fn){ //https://github.com/sindresorhus/multiline
            var reCommentContents = /\/\*!?(?:\@preserve)?[ \t]*(?:\r\n|\n)([\s\S]*?)(?:\r\n|\n)[ \t]*\*\//;
            if(typeof fn !== 'function'){throw new TypeError('Expected a function');}
            var match = reCommentContents.exec(fn.toString());
            if(!match){throw new TypeError('Multiline comment missing.');}
            return match[1];
        };
    }()
});
z
给个赞 3 人点赞
收藏 3 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
老姚
老姚2016-05-07 10:14:084F
我觉得"妨手贱",更能体现的你的本意emoticon //@老姚:了解 //@yuanoook:防手抖其实不是给用户用的,是给使用管理后台的工作人员用的,有些不可恢复的操作,用这个会很爽 //@老姚emoticon
举报 支持 (0) 回复 (0)
老姚
老姚2016-05-07 10:12:473F
了解 //@yuanoook:防手抖其实不是给用户用的,是给使用管理后台的工作人员用的,有些不可恢复的操作,用这个会很爽 //@老姚emoticon
举报 支持 (0) 回复 (1)
yuanoook
yuanoook2016-05-07 09:55:072F
防手抖其实不是给用户用的,是给使用管理后台的工作人员用的,有些不可恢复的操作,用这个会很爽 //@老姚emoticon
举报 支持 (0) 回复 (1)
老姚
老姚2016-05-06 17:22:341F
emoticon
举报 支持 (0) 回复 (1)
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新