【jQuery】ウィンドウサイズによってプラグインを切り替える

ウィンドウサイズによって実行するプラグインを切り替えるプラグインを作ってみました。
すごく単純なプラグインですがレスポンシブ対応のサイトでは以外と使う場面があるかもしれません。
またプラグインを作成するのは初めてなので、アドバイスを頂けると嬉しいです。

switchingPlugins.js

/* ===========================================================
 * jquery.switchingPlugins.js 
 * ウィンドウサイズにより実行すプラグインを切り替える
 * 480px以下で smallPlugin を実行、480px以上で bigPlugin を実行する。
 * ========================================================== */

;(function ($) {
	 $.fn.switchingPlugins = function (custom) {
	 
	 	//起動時のウィンドウサイズを取得
		var width = window.innerWidth;
		
	 	options = $.extend(true, {
            switchingSize: 480,
            //events
            smallPlugin: function(){},
            bigPlugin: function(){}
        }, custom);

		
		if(width < options.switchingSize){
			options.smallPlugin();
		}
		else{
			options.bigPlugin();
		}
		
	};
	
}($));

HTML側

htmlファイルからは以下のように呼び出します。

$(function(){

	$('body').switchingPlugins({
			switchingSize: 480,	
			smallPlugin: 	
				function() {
					$('#pagepiling').pagepiling({
						direction: 'horizontal',
					    menu: '#menu',
						sectionsColor: ['rgba(0,0,0,0)', 'rgba(0,0,255,0)', 'rgba(0,0,255,0)', 'rgba(0,0,0,0)'],
					    anchors: ['page1', 'page2', 'page3','page4'],
					    navigation: {
					      'position': 'right',
					      'tooltips': ['section1', 'section2', 'section3', 'section4']
					    },
					    scrollingSpeed: 1000,
					    sectionSelector: '.contents',
					    verticalCentered:false
					});
					console.log("htmll 側");
				},			
			bigPlugin: 
				function() {
					$('.about-dialog').dialog( {
				 		autoOpen: false,
				    });
				    $('#jquery-ui-dialog-opener-about').click(function() {
				    	$('.about-dialog').dialog({
							open: function() {
								$(this).load('about.html');
							},
							autoOpen: true,
						});
					});
				}				
		});
});

480px以下 プラグイン:pagepiling を実行
480pxより大きい プラグイン:jQuery-UI-dialog を実行しています。

追加したい機能

現在はロード時のウィンドウサイズで判定しています。
ウィンドウリサイズ時に対応していないので、追加する予定です。

スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD