jQueryのWebブラウザ操作とプラグイン

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのWebブラウザ操作とプラグインについて纏めています。

Sponsored Link

Webブラウザ操作

右クリック禁止

  $(document).bind('contextmenu', function(){
    return false;
  });

自動スクロール

  $('.next').click(function(){
    $('html, body').animate({
    scrollTop: $(this).parent().next().find('a').offset().top
    }, 1000);
  });

  $('.prev').click(function(){
    $('html, body').animate({
      scrollTop: $(this).parent().prev().find('a').offset().top
      }, 1000);
  });

プラグイン

jQuery.fnオブジェクト

.jQuery.fnオブジェクトはjQueryオブジェクトのプロトタイププロパティにファンクションを登録できます。

<div id="counter1"></div>

~~~

(function($){
  $.fn.count = function(){

    var $this = this;
    $this.text('0');
    var myInterval = window.setInterval(function(){
      var currentCount = parseFloat($this.text());
      var newCount = currentCount+1;
      $this.text(newCount+'');
    } , 1000);
  };

})(jQuery);

jQuery('#counter1').count();

プラグイン内のthis参照

<div id="counter1"></div>

(function($) {

  $.fn.count = function(){
    // "this" =  jQuery('#counter1')

    alert(this); //  jQuery object

    alert(this[0]); // div element

    alert(this[0].id); //  counter1

  };

})(jQuery);

jQuery('#counter1').count();

thisに対する.each()

プラグインで設定したファンクションへ複数の引数を設定する場合、.each()を使用することで同様の処理を行うことが出来ます。

<div id="counter1"></div>
<div id="counter2"></div>

~~~

(function($) {
  $.fn.count = function(){
    this.each(function(){ 
      var $this = $(this);
      $this.text('0');
      var myInterval = window.setInterval(function(){ 
        var currentCount = parseFloat($this.text());
        var newCount = currentCount+1;
        $this.text(newCount + '');
      }, 1000);
    });
  };
})(jQuery);

jQuery('#counter1, #counter2').count();

デフォルトオプション

プラグインにはデフォルトのオプションを設定することが出来ます。

<div id="counter1"></div>
<div id="counter2"></div>

~~~

(function($) {
  $.fn.count = function(){
    return this.each(function(){
      var $this = $(this);

      $this.text($.fn.count.defaultOptions.startCount + '');
      var myInterval = window.setInterval(function(){
        var currentCount = parseFloat($this.text());
        var newCount = currentCount + 1;
        $this.text(newCount + '');
      }, 1000);
    });
  };
  $.fn.count.defaultOptions = {
    startCount: 100
  };
})(jQuery);

jQuery('#counter1, #counter2').count()

カスタムオプション

デフォルトオプションは.extend()を使用して、上書き/拡張することが出来ます。

<div id="counter1"></div>
<div id="counter2"></div>

~~~

(function($) {
  $.fn.count = function(customOptions){

    var options = $.extend({},$.fn.count.defaultOptions, customOptions);
    return this.each(function(){
      var $this = $(this);

      $this.text(options.startCount + '');
      var myInterval = window.setInterval(function(){
        var currentCount = parseFloat($this.text());
        var newCount = currentCount+1;
        $this.text(newCount+'');
      }, 1000);
    });
  };

  $.fn.count.defaultOptions = {
    startCount:100
  };
})(jQuery);

jQuery('#counter1, #counter2').count({startCount:500});

.extend()を使用しない場合

直接オプションのオブジェクトの値を操作することも出来ます。

<div id="counter1"></div>
<div id="counter2"></div>

~~~

(function($) {
  $.fn.count = function(customOptions){
    var options = $.extend({},$.fn.count.defaultOptions, customOptions);
    return this.each(function(){
      var $this = $(this);
      $this.text(options.startCount+'');
      var myInterval = window.setInterval(function(){
        var currentCount = parseFloat($this.text());
        var newCount = currentCount + 1;
        $this.text(newCount+'');
      }, 1000);
    });
  };
  $.fn.count.defaultOptions = {
    startCount:100
  };
})(jQuery);

// ここで上書き
jQuery.fn.count.defaultOptions.startCount = 200;

jQuery('#counter1').count(); // startCountに200を使用

jQuery('#counter2').count({startCount:500});

Reference from : jQuery Enlightenment