Monday 8 June 2015

Code ที่ใช้บ่อยแต่ Copy มาใช้จนลืมแปะไว้รวมๆ ขี้เกรียจหา

// 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