CHAPTER 13 - jQuery Mobile Tutorial (Events)

In previous chapter, we looked at some basic jQuery Mobile code. Next, we will look at jQuery Mobile events. These events are very important yet simple to use. Mastering them will make your development work in jQuery Mobile more proficient.

1. Page Event

jQuery Mobile provides two kinds of page events. They are pageinit and pageshow. Pageinit is the type of events that will occur when the page is loaded for the first time; thus, they will happen only once. On the other hand, pageshow represents the type of events that will happen when the page is loaded; thus, they are triggered every time the page is loaded. If using jQuery Mobile, relevant code must be included. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5866509217824768. Clicking the button will bring up the warning window twice; the first time displays the pageinut, the second time displays the pageshow; clicking again will only display the pageshow.)

(function () {
  $(document).on("pageinit", "#pageID", function () {
    //Trigger the event the first time page is loaded
    //Write code here
  });
})();

(function () {
  $(document).on("pageshow", "#pageID", function () {
    //Trigger the event every time page is loaded
    //Write code here
  });
})();

2. Touch Event

Touch events are the most important cellphone operation behaviors. Therefore, jQuery Mobile provides five kinds of touch events: tap, taphold, swipe, swipeleft, and swiperight. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5146167943888896)

HTML：

<span id="status">status</span>
<br>
<br>
<div id="tapthis" class="test">tap</div>
<div id="tapholdthis" class="test">tap hold</div>
<div id="swipethis" class="test">swpie</div>
<div id="swipeleftthis" class="test">swipe left</div>
<div id="swiperightthis" class="test">swipe right</div>

javascript：

(function () {
  $(document).on("pageinit", "#home", function () {
    $('#tapthis').on("tap", function () {
      $('#status').text('tap');
    });
    $('#tapholdthis').on("taphold", function () {
      $('#status').text('taphold');
    });
    $('#swipethis').on("swipe", function () {
      $('#status').text('swipe');
    });
    $('#swipeleftthis').on("swipeleft", function () {
      $('#status').text('swipeleft');
    });
    $('#swiperightthis').on("swiperight", function () {
      $('#status').text('swiperight');
    });
  });
})();

Because jQuery Mobile does not provide swipe-up and swipe-down functions, you can add the JavaScript code below when needed in order to use the swipeup and swipedown events. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=6219705958268928)

HTML：

<span id="status">status</span>
<br>
<br>
<div id="swipeupthis" class="test">swipe up</div>
<div id="swipedownthis" class="test">swipe down</div>

javascript ( pageinit event )：

(function () {
  var supportTouch = $.support.touch,
    scrollEvent = "touchmove scroll",
    touchStartEvent = supportTouch ? "touchstart" : "mousedown",
    touchStopEvent = supportTouch ? "touchend" : "mouseup",
    touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
  $.event.special.swipeupdown = {
    setup: function () {
      var thisObject = this;
      var $this = $(thisObject);
      $this.bind(touchStartEvent, function (event) {
        var data = event.originalEvent.touches ?
          event.originalEvent.touches[0] :
          event,
          start = {
            time: (new Date).getTime(),
            coords: [data.pageX, data.pageY],
            origin: $(event.target)
          },
          stop;
        function moveHandler(event) {
          if (!start) {
            return;
          }
          var data = event.originalEvent.touches ?
            event.originalEvent.touches[0] :
            event;
          stop = {
            time: (new Date).getTime(),
            coords: [data.pageX, data.pageY]
          };
          // prevent scrolling
          if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
            event.preventDefault();
          }
        }
        $this
          .bind(touchMoveEvent, moveHandler)
          .one(touchStopEvent, function (event) {
            $this.unbind(touchMoveEvent, moveHandler);
            if (start && stop) {
              if (stop.time - start.time < 1000 &&
                Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                start.origin
                  .trigger("swipeupdown")
                  .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
              }
            }
            start = stop = undefined;
          });
      });
    }
  };
  $.each({
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
  }, function (event, sourceEvent) {
    $.event.special[event] = {
      setup: function () {
        $(this).bind(sourceEvent, $.noop);
      }
    };
  });
})();

javascript ( pageinit event )：

(function () {
  $(document).on("pageinit", "#home", function () {
    $('#swipeupthis').on("swipeup", function () {
      $('#status').text('swipeup');
    });
    $('#swipedownthis').on("swipedown", function () {
      $('#status').text('swipedown');
    });
  });
})();

3. Rotate Event

A rotate event can detect the rotational status of the mobile device and generate corresponding behaviors. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5681561387139072)

(function () {
  $(document).on("pageinit", "#home", function () {
    $(window).on("orientationchange", function (event) {
      alert("it is：" + event.orientation);
    });
  });
})();

Continue reading CHAPTER 14 - Tips to Know Before Writing Code
Or Return to Table of Contents