การใช้ jConfirmAction เพื่อการยืนยันข้อมูล

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

การใช้ jConfirmAction เพื่อการยืนยันข้อมูล

โพสต์โดย Ik Kat » 29/06/2017 4:34 pm

jConfirmAction เป็นปลั๊กอินของ jQuery ซึ่งมีส่วนสำคัญในการสร้างและพัฒนาเว็บไซต์ ใช้สำหรับยืนยันข้อมูลต่าง ๆ เพื่อความแน่ใจ เช่น คุณต้องการออกจากนี้? , คุณต้องการลบไฟล์นี้? และอื่น ๆ อีกมากมาย

ไฟล์ที่ต้องการเรียกใช้ :
jquery-x.x.x.min.js --- โหลดได้ที่

โค้ด: เลือกทั้งหมด

http://jquery.com/

xx.css --- ออกแบบหน้าตาเว็บ
confirm.js --- สคริปกล่องยืนยันข้อมูล
confirm.css --- ออกแบบหน้ากล่องยืนยันข้อมูล

ข้อดีในการใช้ jConfirmAction : ใช้งานง่าย และสามารถปรับเปลี่ยนรูปแบบได้ตามชอบ

MT19 29-6-60(51).png
jConfirmAction
MT19 29-6-60(51).png (38.58 KiB) เปิดดู 14 ครั้ง

html :

โค้ด: เลือกทั้งหมด

<!doctype html>
<html>
<head>
    <title>jConfirmAction Demo</title>
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
   <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script src="../src/j-confirm-action.js" type="text/javascript"></script>
       <link rel="stylesheet" href="../src/j-confirm-action.css">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background: #ECF0F0;
            font-family: 'Open Sans',Arial, Verdana, sans-serif;
        }
.container { margin:150px auto 30px auto;; max-width:960px;}
        .demo {
            margin: 200px;
        }

        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
<h1 class="text-center">jConfirmAction Demo</h1>
<hr>
<br/>
<center><h3>
    <a target="_blank" href="#" class="demo-href">Demo</a>
</h3>
</center>

<script type="text/javascript">
    (function ($) {
        'use strict';

        $('.demo-href').jConfirmAction({
            question: 'ออกจากหน้านี้ ?',
            noText: 'ไม่'
        });

        $('.demo-callback').jConfirmAction({
            question: 'Delete this item?',
            yesText: 'Delete',
            confirm: function (item) {
                //do custom code here , example ajax calls
                item.hide(0);
                console.log('You clicked YES');
            },
            cancel: function (item) {
                console.log('You clicked NO');
            }
        });

    })(jQuery);
</script>

</body>
</html>

โค้ด: เลือกทั้งหมด

(function ($, window) {
    'use strict';

    $.fn.jConfirmAction = function (options) {

        //Set default options
        var defaults = {
            question: 'ออกจากหน้านี้ ?',
            yesText: 'ใช่',
            noText: 'ไม่',
            confirm: false,//yes callback
            cancel: false, //no callback
        };

        options = $.extend(defaults, options);

        this.bind('click.jConfirmAction', function (evt) {

            //Prevent default events
            evt.stopPropagation();
            evt.preventDefault();

            var $this = $(this),
                $body = $('body');

            //Build up html
            var $popUP = $('<div class="jc-box"><span class="jc-question">' + options.question + '</span><br/> <div class="jc-btn-wrap"><span class="jc-yes">' + options.yesText + '</span><span class="jc-no">' + options.noText + "</span></div></div>");

            //Some dynamic css
            fixPosition($popUP);
            $popUP.animate({opacity: .96}, 300);

            //Append html next to current item
            $body.append($popUP);

            //Unbind previous and bind new
            $('.jc-yes', $popUP).unbind('click.jConfirmAction').bind('click.jConfirmAction', function () {
                //call callback function
                if ($.isFunction(options.confirm)) {
                    options.confirm($this);
                } else {
                    //else redirect
                    window.location = $this.attr('href')
                }
                removePopUp();
            });

            //NO Button click event
            $('.jc-no', $popUP).unbind('click.jConfirmAction').bind('click.jConfirmAction', function () {
                if ($.isFunction(options.cancel)) {
                    options.cancel($this);
                }
                removePopUp()
            });

            //Change dialog position on resize and scroll event
            $(window).on('resize scroll', function (e) {
                var jcBox = $('.jc-box:visible');
                if (jcBox.length) {
                    fixPosition(jcBox);
                }
            });

            //Hide any opened dialog if user clicks on body but not on dialog itself
            $body.bind('mouseup', function (event) {
                var jcBox = $('.jc-box:visible');

                if (jcBox.is(event.target) === false && jcBox.has(event.target).length === 0 && jcBox.length) {
                    removePopUp();
                }
            });

            //Add some dynamic css
            function fixPosition($item) {
                $item.css({
                    top: $this.offset().top - $(window).scrollTop() + 40 + 'px',
                    left: $this.offset().left - $(window).scrollLeft() - 100 + 'px'
                })
            }

            //Remove popup from dom
            function removePopUp() {
                $popUP.fadeOut(300, function () {
                    $popUP.remove();
                })
            }

        })
    }
})
(jQuery, window);


หากคุณยังไม่มีพื้นฐาน JQuery สามารถศึกษาวิธีใช้ JQuery HTML ได้ที่นี่
สามารถดาวน์โหลดได้ที่ : http://www.jqueryscript.net/other/Inline-Confirm-Popup-Plugin-With-jQuery-j-confirm-action.html

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน