JQuery要素を一番したまでスクロールしたらイベントを発生させるプラグインをつくってみた

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 172 follow us in feedly

まえがき

今日はばたばたしてあまりじっくりブログネタを作る時間が取れなかった・・・

なので最近マイブームなjQueryプラグイン作成でぱぱっと作ってぱぱっとあげてみようと思います。

 

プラグインについて

テーブルタグとか縦に長く作った要素を最後までスクロールさせたらイベントが発生するとういもの。

最後までと言うか後何パーセントの場所までスクロールしたかとゆうことを設定可能にしました。

あと、何回イベントを起こすかも設定可能。

 

プラグインのみそ

例えば、一番下の方で上下にスクロールさせまくるとします。

するとイベントがたくさん走ってしまい、ajaxでリクエストを投げる事とか考えたら大変な事に> <

なのでフラグで簡単管理。

用が済んだらロック解除してね。ってゆう仕様に仕上げた。

おそらく不具合でそうだから今後修正します…参考までに

 

ソース

前々回ぐらいのブログで学習したYUIDocのコメントの書き方を使ってドキュメントもつくってみました。

YUIDoc、プラグインのドキュメントにはあまり向いてないかも….

/**
* jQuaryScrollBottom.js
* Plugin Example File
*
* @class ScrollBottom
* @author Keitarou
* @date 2013.4.30
* @constructor
* @param {Array} options
*/
;(function($) {
	$.fn.ScrollBottom = function(options) {
		
		/**
		* @property defaults 
		* @type Object
		*/
		$.fn.ScrollBottom.defaults = {
			lock   : false,
			percent: 0.01,
			limit  : 3,
			count  : 0
		};

		/**
		* @property elements 
		* @type Object
		*/
		var elements = this;

		/**
		* @property options 
		* @type Object
		*/
		var options = $.extend({}, $.fn.ScrollBottom.defaults, options);

		/**
		 * method getOptions
		 *
		 * @method getOptions
		 * @return Object
		 */
		this.getOptions = function(){
			return options;
		}

		/**
		 * method lock
		 * loadng lock!
		 *
		 * @method lock
		 * @return boolean true
		 */
		this.lock = function(){
			return options.lock = true;
		}

		/**
		 * method unlock
		 * loadng unlock!
		 *
		 * @method unlock
		 * @return boolean false
		 */
		this.unlock = function(){
			return options.lock = false;
		}

		elements.each(function() {

			/**
			 * event scroll
			 * Call Event "bottom"
			 *
			 * @event scroll
			 */
			$(this).scroll(function(e){
				
				height = $(this).children().height();
				position = $(this).height() + $(this).scrollTop();
				
				if((height - position) / height <= options.percent){
					if(!options.lock && (!options.limit || options.limit > options.count)){
						$(this).trigger('bottom');
					}
				}
			});

			/**
			 * event bottom
			 *
			 * @event bottom
			 */
			$(this).bind("bottom", function(){
				options.lock = true;
				options.count++;
				if(options.count == options.limit){
					$(this).trigger('final');
				}
			});

			/**
			 * event final
			 *
			 * @event final
			 */
			$(this).bind("final", function(){
			});

		});

		return this;
	};

})(jQuery);

 

成果物

・サンプル

http://www23061ue.sakura.ne.jp/samples/ScrollBottom/

・ドキュメント

http://www23061ue.sakura.ne.jp/samples/ScrollBottom/js/out

・Github

https://github.com/keitarou/ScrollBottom

 

あとがき

ちょこちょこプラグインとか書いたり、読んだりするようになってきたけど、

どの書き方がいいのか全くもって理解しがたいことあやふやしー

おすすめ書籍

Nodeクックブック
Nodeクックブック
posted with amazlet at 13.12.02
David Mark Clements
オライリージャパン
売り上げランキング: 233,928
サーバサイドJavaScript Node.js入門
清水俊博 大津繁樹 Jxck 小林秀和 佐々木庸平 篠崎祐輔 高木敦也 西山雄也
アスキー・メディアワークス
売り上げランキング: 140,542

関連記事

Screeny Shot 2013-07-08 1.49.36.png

railsコマンドをジェネレートしてくれるアプリを作ってみた

まえがき railsのscaffoldとかmodelやら コマンドで作...

記事を読む

Railsアプリをクロスドメインに対応したAPIサーバーにする

まえがき 外部に立てたRailsのサーバーをAPIサーバー化して、ロー...

記事を読む

vvdocumenter-1vvdocumenter-1.gif

Xcodeのプラグイン『VVDocumenter』でJavadoc風コメントを自動生成する

まえがき Eclipseでjavaで開発しているときなんかによく、関数...

記事を読む

xtodo-2xtodo-2.png

Xcodeプラグイン『XToDo』でコード内Todo管理が捗る

まえがき 最近、個人的にソースコード内に『TODO:』のコメントなどを...

記事を読む

safari-extension-1safari-extension-1.png

Safariを覚醒させる!おすすめ拡張機能プラグイン10個!!

まえがき 『最近、顔つき変わった?』 と友達に言われました。確かに最近...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑