โดย Ik Kat » 29/06/2017 4:34 pm
jConfirmAction เป็นปลั๊กอินของ
jQuery ซึ่งมีส่วนสำคัญในการสร้างและพัฒนาเว็บไซต์ ใช้สำหรับยืนยันข้อมูลต่าง ๆ เพื่อความแน่ใจ เช่น คุณต้องการออกจากนี้? , คุณต้องการลบไฟล์นี้? และอื่น ๆ อีกมากมาย
ไฟล์ที่ต้องการเรียกใช้ :
jquery-x.x.x.min.js --- โหลดได้ที่
xx.css --- ออกแบบหน้าตาเว็บ
confirm.js --- สคริปกล่องยืนยันข้อมูล
confirm.css --- ออกแบบหน้ากล่องยืนยันข้อมูล
ข้อดีในการใช้ jConfirmAction : ใช้งานง่าย และสามารถปรับเปลี่ยนรูปแบบได้ตามชอบ
- jConfirmAction
- MT19 29-6-60(51).png (38.58 KiB) Viewed 1329 times
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/Inlin ... ction.html
[b]jConfirmAction[/b] เป็นปลั๊กอินของ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/2776-%E0%B8%9A%E0%B8%97%E0%B8%97%E0%B8%B5%E0%B9%88-1-jquery-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]jQuery[/url] ซึ่งมีส่วนสำคัญในการสร้างและพัฒนาเว็บไซต์ ใช้สำหรับยืนยันข้อมูลต่าง ๆ เพื่อความแน่ใจ เช่น คุณต้องการออกจากนี้? , คุณต้องการลบไฟล์นี้? และอื่น ๆ อีกมากมาย
ไฟล์ที่ต้องการเรียกใช้ :
jquery-x.x.x.min.js --- โหลดได้ที่ [code]http://jquery.com/[/code]
xx.css --- ออกแบบหน้าตาเว็บ
confirm.js --- สคริปกล่องยืนยันข้อมูล
confirm.css --- ออกแบบหน้ากล่องยืนยันข้อมูล
[b]ข้อดีในการใช้ jConfirmAction :[/b] ใช้งานง่าย และสามารถปรับเปลี่ยนรูปแบบได้ตามชอบ
[attachment=0]MT19 29-6-60(51).png[/attachment]
[b]html :[/b]
[code]<!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>[/code]
[code](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);[/code]
หากคุณยังไม่มีพื้นฐาน JQuery สามารถศึกษาวิธีใช้ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-jquery/3224-jquery-html-get-content.html]JQuery HTML[/url] ได้ที่นี่
สามารถดาวน์โหลดได้ที่ : [url]http://www.jqueryscript.net/other/Inline-Confirm-Popup-Plugin-With-jQuery-j-confirm-action.html[/url]