Sweetalert: ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ ๊ฐ€ ์ฐจ๋ก€๋กœ ๋ฐœ์ƒํ•ฉ๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2015๋…„ 11์›” 11์ผ  ยท  12์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: t4t5/sweetalert

์ด๋ด,

๋ฉ‹์ง„ ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ •๋ง ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค!
๊ทธ๋Ÿฌ๋‚˜ ์—ฌ๋Ÿฌ "ํ™•์ธ"์„ ์„œ๋กœ ์—ฐ๊ฒฐํ•ด์•ผ ํ•  ๋•Œ ์ž‘์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

"ํ™•์ธ" ๋ฒ„ํŠผ์—์„œ "๋„ˆ๋ฌด ๋น ๋ฆ„"์„ ํด๋ฆญํ•˜๋ฉด ํŽ˜์ด์ง€๊ฐ€ ๋ฉˆ์ถ”๊ณ  ์‘๋‹ตํ•˜์ง€ ์•Š๊ณ  ๋‹ค์Œ ๋ช‡ ๊ฐœ์˜ ํ™•์ธ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

SWAL ํ˜ธ์ถœ์— ์ง€์—ฐ์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์ด๊ฒƒ์„ ์•ฝ๊ฐ„ ์šฐํšŒํ–ˆ์ง€๋งŒ ์ง€์—ฐ๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ํด๋ฆญํ•˜๋ฉด ๋‹ค์‹œ ์ค‘๋‹จ๋ฉ๋‹ˆ๋‹ค.

์ผ€์ด์Šค๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ํŽœ:
http://codepen.io/anon/pen/dYQapo

๊ทธ๋Ÿฌ๋‚˜ ํŽ˜์ด์ง€๋Š” ๋ฐ˜์‘์„ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ๋‹ค์Œ SWAL์€ ํ‘œ์‹œ๋˜์ง€ ์•Š๊ณ  ์ด์ „ SWAL์ด ํฌ๋ฏธํ•ด์ง€๋ฉด ์–ผ๋งˆ ์ง€๋‚˜์ง€ ์•Š์•„ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ด ํŽœ์€ ์ง€์—ฐ๋œ ๊ฒฝ์šฐ๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. SWAL ๋กœ๋“œ๊ฐ€ ์™„๋ฃŒ๋˜๊ธฐ ์ „์— ํ™•์ธ์„ ํด๋ฆญํ•˜๋ฉด ๋‹ค์Œ ํ•ญ๋ชฉ ํ‘œ์‹œ๊ฐ€ ์ค‘์ง€๋ฉ๋‹ˆ๋‹ค.
http://codepen.io/anon/pen/QjJYdm

#433, #359 ๋ฐ #253๊ณผ ์œ ์‚ฌ/๋™์ผํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋‹น์‹ ์˜ ์˜๊ฒฌ์„ ๋ฐ”๋ž๋‹ˆ๋‹ค! :)

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์œ„์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€ ์ด๊ฒƒ์ด ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด:

swal({
            //whatever parameters in first sweet alert
    },
        function(){
                        setTimeout(function(){
                             swal({ //whatever parameters in second sweet alert});
                       }, time);
     });

๋‘ ๊ฐœ ์ด์ƒ์˜ ๊ฒฝ๊ณ ๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ '์ •์ง€'์— ๋Œ€ํ•œ ๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ ๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ์•ฝ๊ฐ„์˜ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๊ฐ€์žฅ ๋ฉ‹์ง„ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  12 ๋Œ“๊ธ€

๋ถˆํ–‰ํžˆ๋„ ์ด ๋ฒ„๊ทธ์— ๋ถ€๋”ชํ˜€์„œ sweetalert๊ฐ€ ๋‚ด ํ”„๋กœ์ ํŠธ์˜ ์š”๊ตฌ ์‚ฌํ•ญ์— ๊ฑฐ์˜ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ์ž์‹ ์˜ ์ˆ˜์ • ์‚ฌํ•ญ์„ ํ‘ธ์‹œํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ๋ฅผ ํŒŒํ—ค์น  ์‹œ๊ฐ„์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋ถ€๋„๋Ÿฝ์ง€๋งŒ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ธฐ๋Šฅ์ด ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ์ด๋ฅผ ์ง€์ผœ๋ณผ ๊ฒƒ์ด๋ฉฐ ์ˆ˜์ •๋˜๋Š” ์ˆœ๊ฐ„ ์ด ๊ฐœ๋ฐœ์ž(๋ฐ ๊ทธ์˜ ์‚ฌ์šฉ์ž)๋ฅผ ์ถฉ์„ฑ์Šค๋Ÿฌ์šด ๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ ์ž๋กœ ๊ฐ„์ฃผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์Šฌํ”„๊ฒŒ๋„ ์ด ํ”„๋กœ์ ํŠธ๋Š” ๋ฒ„๋ ค์ง„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
๋ณต์ œ SweetAlert2์กฐ์ฐจ๋„ ์—ฌ์ „ํžˆ ์ด๋Ÿฌํ•œ ๋ฒ„๊ทธ๊ฐ€ ์žˆ๊ณ  ์ •๋ง ์˜ค๋žซ๋™์•ˆ ์—…๋ฐ์ดํŠธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์ •๋ง ์ข‹์€ ํ”„๋กœ์ ํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋ฒ„๋ ค์ง€๋Š” ๊ฒƒ์ด ์ •๋ง ๋ถ€๋„๋Ÿฝ์Šต๋‹ˆ๋‹ค!

๊ทธ๋Ÿฌ๋‚˜ 121๊ฐœ์˜ ๋ฏธํ•ด๊ฒฐ ๋ฌธ์ œ์™€ 37๊ฐœ์˜ ๋ณ‘ํ•ฉ๋˜์ง€ ์•Š์€ PR์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณง ์ˆ˜์ •๋˜๊ฑฐ๋‚˜ ์—…๋ฐ์ดํŠธ๋  ๊ฒƒ ๊ฐ™์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด ์ฃผ์š” ๋ฌธ์ œ๋ฅผ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด๋Š” #457 ์˜ ๊ฐ€๋Šฅ์„ฑ์— ๋ณ€ํ™”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

@inctor , @Charlex ์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ์ž‘์„ฑํ•œ ์ฝ”๋“œ ์ถ”๊ฐ€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฐ€์ด๋“œ๋ฅผ #457์— ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด sweetalert ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์œ„์— ์ถ”๊ฐ€๋˜๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœ์ ํŠธ์— ๋ณ‘ํ•ฉ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ฝ”๋“œ ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋” ์ข‹๊ฒŒ ๋งŒ๋“ค ์ƒ๊ฐ์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค์ฃผ์„ธ์š”.

@kentmw ํžˆ์–ด๋กœ. ํ•œ๋ฒˆ ํ•ด๋ณด๊ณ  ํ†ต์ฆ์ด ์žˆ๋Š”์ง€ ํ™•์ธํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

SweetAlert2 ๋Š” ๋ชจ๋‹ฌ ๋Œ€๊ธฐ์—ด์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค: https://sweetalert2.github.io/#chaining -modals

์œ„์™€ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ˆ„๊ตฐ๊ฐ€ ์ด๊ฒƒ์ด ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค๋ฉด:

swal({
            //whatever parameters in first sweet alert
    },
        function(){
                        setTimeout(function(){
                             swal({ //whatever parameters in second sweet alert});
                       }, time);
     });

๋‘ ๊ฐœ ์ด์ƒ์˜ ๊ฒฝ๊ณ ๋ฅผ ์—ฐ๊ฒฐํ•  ๋•Œ '์ •์ง€'์— ๋Œ€ํ•œ ๋‹ฌ์ฝคํ•œ ๊ฒฝ๊ณ ๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ์•ฝ๊ฐ„์˜ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๊ฐ€์žฅ ๋ฉ‹์ง„ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

@pararrayos๋Š” ์•ฝ๊ฐ„

๋„ˆ๋ฌด ์˜ค๋ž˜ ์ง€์—ฐ๋˜์–ด ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋Š” ์ด์ œ promise ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” SweetAlert 2.0์—์„œ ์ˆ˜์ •๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!

@t4t5 ์—…๋ฐ์ดํŠธ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์›น์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ์ด ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค.

๋ˆ„๊ตฐ๊ฐ€ ์ด๊ฒƒ์„ ์šฐ์—ฐํžˆ ๋ฐœ๊ฒฌํ•˜๊ณ  swal(์•„๋งˆ๋„ ์ด์ „ ๋ฒ„์ „)์„ ํ˜ธ์ถœํ•  ๋•Œ ์ •์˜๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

if(notifications.length > 1) {
            var i = 0;
            function displayNext(){
                swal({title: notifications[i].title, text: notifications[i].body, type: 'info', closeOnConfirm:true}, function(){
                    if(i < notifications.length){
                        setTimeout(function(){
                            displayNext();
                        },500);
                    }
                });
                i++;
            }
            displayNext();
        }

๋„ค, ์ด ์ˆ˜์ •์€ ์ผ์‹œ์ ์ธ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ดœ์ฐฎ์•„

@pararrayos ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค..!!!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

vmitchell85 picture vmitchell85  ยท  6์ฝ”๋ฉ˜ํŠธ

Untit1ed picture Untit1ed  ยท  5์ฝ”๋ฉ˜ํŠธ

girishbr picture girishbr  ยท  5์ฝ”๋ฉ˜ํŠธ

xgqfrms-GitHub picture xgqfrms-GitHub  ยท  4์ฝ”๋ฉ˜ํŠธ

waldyrious picture waldyrious  ยท  5์ฝ”๋ฉ˜ํŠธ