// AJAX EX. ส่งข้อมูลแบบ POST หรือต้องการ GET ก็แค่เปลี่ยน Type
dataType ที่ผมใช้ก็มี html กับ JSON นี่ละ
beforeSend ฟังค์ชั่น ไว้ทำอะไรก่อนการส่งข้อมูล เช่นแสดงภาพ load animation
ไว้เก่งแล้วจะอธิบายเพิ่ม เอาที่ผมเข้าใจไว้ใช้งานจริงล้วนๆ
$.ajax({
type: "POST",
url: "/path",
dataType: "html",
data: ({id:id,lang:lang}),
beforeSend: function( ) {
$(".show-load").show();
},
success: function(data) {
if(data!="NULL")
{
return true;
}else{
return false;
}
},
error: function( req, status, err ) {
console.log( 'Something went wrong', status, err );
}
});
//GET POST ส่งแบบ get หรือโพสไปตรงๆ เลย
$.post( "/path", {lang:$(this).attr('href')} );
// SET TIMEOUT หน่วงเวลาไว้สั่งงาน ทำครั้งเดียวจบ
setTimeout(function() {
// Do something after 10 seconds One time
}, 10000);
//SET Interval หน่วงเวลาสั่งงานต่อเนื่อง คือทำต่อไปเรื่อยๆ เมื่อครบอีก 10 วิก็สั่งทำอีกครั้ง
setInterval(function(){
// Do something after 10 seconds Loop
}, 10000);
ex.
ballbounce(true);
// ballshadow();
var counts = 0;
var setbounce= setInterval(function(){ ballbounce(true); if (++counts === 1) {
window.clearInterval(setbounce); } }, 10000);
function ballbounce(check) {
for(var i=0;i<=1;i++){
$('#draggable').animate({'margin-top':20}, bouncetime, 'easeInQuad', function() {});
$('#draggable').animate({'margin-top':-20}, bouncetime, 'easeOutQuad', function() {});
}
}
ตัวอย่างข้างต้น สั่ง บอลเด้ง 2 ครั้ง แล้วหยุด และสั่งทำงานอีกครั้งเมื่อ 10 วิ
/////// แก้ไข ปัญหาการ Touch
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup",
touchleave:"mouseleave"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
var draggable = document.getElementById('drag_img');
draggable.addEventListener("touchstart", touchHandler, true);
draggable.addEventListener("touchmove", touchHandler, true);
draggable.addEventListener("touchend", touchHandler, true);
draggable.addEventListener("touchcancel", touchHandler, true);
draggable.addEventListener("touchleave", touchHandler, true);
}
/////// แก้ไข ปัญหาการ Touch
ใช้งาน Jquery Wordpress with itheme
jQuery('document').ready(function($){ });
ปล.อันอื่นก็น่าจะเหมือนกัน
Animation Style
.show()
.hide()
.toggle()
.fadeIn()
.fadeOut()
.fadeToggle()
.addClass()
.removeClass()
.toggleClass()
.slideIn()
.slideOut()
.slideToggle()
//Credit jquery Doc
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
//Credit W3schools
$("div").animate({left: '250px'});
//Check Event
.hasClass()
.is(':checked') ส่วนมากใช้บ่อยกับ checkbox ใส่ไว้กันลืม
/** สั่ง checkbox **/
jQuery > 1.6
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
เดี๋ยวนึกออกมาเพิ่มอีกง่วงนอนละ ....
No comments:
Post a Comment