プラグインを使わずjQueryに23の機能をつける方法


20100301-01
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

1.右クリックを無効にする方法

右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });
});

2.フォームの初期値を消す方法

検索フィールドなどに。

$(document).ready(function() {
$("input.text1").val("Enter your search text here");
   textFill($('input.text1'));
});

function textFill(input){ //input focus text function
 	var originalvalue = input.val();
 	input.focus( function(){
  		if( $.trim(input.val()) == originalvalue ){ input.val(''); }
 	});
 	input.blur( function(){
  		if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
 	});
}

3.リンクを新しいウィンドウで開く

XHTMLでVALIDなページを作る場合「target=”_blank”」は使用できないためjQuery側で_blank属性を追加します。

$(document).ready(function() {

   //外部リンクは全て別ウインドウにする場合
   $('a[href^="http://"]').attr("target", "_blank");  

   //rel="external" 属性を追加した場合のみ別ウインドウにする場合
   $("a[rel='external']").click(function(){
      this.target = "_blank";
   });
});

// 使い方 以下のようなリンクを追加します。
<a href="https://blog.verygoodtown.com" rel="external">リンク</a>

4.ブラウザを調べる

特定のブラウザの場合にだけ処理を指定したい場合に。

$(document).ready(function() {
// Firefox 2以上
if ($.browser.mozilla && $.browser.version >= "2" ){
	alert("mozila");
}

// Safari
if( $.browser.safari ){
	alert("safari");
}

// Chrome
if( $.browser.chrome){
	alert("chrome");
}

// Camino
if( $.browser.camino){
	alert("camino");
}

// Opera
if( $.browser.opera){
	alert("opera");
}

// IE6以下
if ($.browser.msie && $.browser.version <= 6 ){
	alert("IE6以下");
}

// IE7以上
if ($.browser.msie && $.browser.version > 6){
	alert("IE7以上");
}
});

5.CSSの切り替え

使用しているCSSを変更します。

$(document).ready(function() {
	$("a.Styleswitcher").click(function() {
		//CSSのパスを書き換えます
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
	});
});


//使い方
//ヘッダーでデフォルトのCSSを読み込みます
<link rel="stylesheet" href="default.css" type="text/css">


// 以下のようなCSS切り替えのリンクを設置します。
<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>
<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>
<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>

6.フォントサイズを変更する

ユーザーがフォントサイズを変更できるようリンクを設定します。

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease the font size(smaller font)
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});

// 使い方
// 以下のようなリンクを追加します。
<a href="#" class="resetFont">元に戻す</a>
<a href="#" class="increaseFont">+</a>
<a href="#" class="decreaseFont">-</a>

7.スムーズリンクを設置する

ページ内リンクをスムーズに移動させます。

$(document).ready(function() {
$('a[href*=#]').click(function() {
 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
 && location.hostname == this.hostname) {
   var $target = $(this.hash);
   $target = $target.length && $target
   || $('[name=' + this.hash.slice(1) +']');
   if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body')
  .animate({scrollTop: targetOffset}, 900);
    return false;
   }
  }
  });
});

// 使い方 
// スクロール先を指定します。 
<a id="top" name="top"></a> 
// リンクを設置します。 
<a href="#top">go to top</a> 

8.マウス座標を取得する

マウスカーソルの現在地を取得します。

$(document).ready(function() {
   $("html").mousemove(function(e){
     //X座標とY座標を#XYに書き出します。
    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  });
});
// 使い方
<div id="XY"></div>

9.要素が空かチェックする

空の場合の処理を作成する事ができます。

$(document).ready(function() {  
  if (!$('#id').html()) {  
    alert('empty');
  }
});  

10.置換

要素の中身を書き換えます

$(document).ready(function() { 
   $('#my-id').replaceWith('
置換後の文字列
'); });

11.タイマーのコールバック関数

時間がたってから何かを動作させたい場合に。

$(document).ready(function() { 
   window.setTimeout(function() { 
      alert('1秒経過');
    }, 1000);
 }); 

12.単語を削除

特定の単語を削除します。

$(document).ready(function() { 
   var el = $('#my-id'); 
   el.html(el.html().replace(/削除したい単語/ig, ""));
 }); 

13.要素の存在確認

lengthプロパティで存在確認が取れます。

$(document).ready(function() { 
    if ($('#my-id').length) { 
      alert('存在します。');
    }
 }); 

14.DIVをクリック可能にする

クリック要素を大きくしたい場合に。

$(document).ready(function() { 
   $("div").click(function(){ 
      //aタグから遷移先を自動取得します。 
      window.location=$(this).find("a").attr("href");
       return false;
    });
}); 

15.画面サイズに合わせてCSSを切り替え

画面の大きさに合わせて適用するスタイルを切り替えたい場合に。

$(document).ready(function() {
   function checkWindowSize() {
	if ( $(window).width() > 1200 ) {
		$('body').addClass('large');
	}
	else {
		$('body').removeClass('large');
	}
   }
$(window).resize(checkWindowSize);
});

16.クローンオブジェクト

オブジェクトのクローンを返します。

$(document).ready(function() { 
   var cloned = $('#id').clone();
}); 

17.画面の中心

画面の中心に要素を配置します。

$(document).ready(function() {
  jQuery.fn.center = function () {
	  this.css("position","absolute");
	  this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	  this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	  return this;
  }
  $("#my-id").center();
});

18.独自のセレクタを使用する

独自のセレクタ拡張で柔軟に対応できる場合があります。
サンプルでは1000px以上のboxクラスはクリックするとアラートが出るようになります。

$(document).ready(function() { 
   $.extend($.expr[':'], { 
      moreThen1000px: function(a) {
         return $(a).width() > 1000;
       }
    });

   $('.box:moreThen1000px').click(function() { 

      alert('The element that you have clicked is over 1000 pixels wide');
    });
});

//以下の要素をhtmlに追加してクリックしてみてください。 
<div style="background-color: #ff0000; width: 1200px" class="box">1200px</div>

19.要素の数を数える

$(document).ready(function() { 
   $("p").size();
}); 

20.箇条書きの行頭文字を独自文字に

行頭の文字を画像や独自文字へ変更する事ができます。サンプルは「‒ 」を追加しています。

$(document).ready(function() { 
   $("ul").addClass("Replaced"); 
   $("ul > li").prepend("‒ ");
});

//使い方 
//cssでリストスタイルを無効にするだけです。 
<style>  
ul.Replaced { list-style : none; } 
</style> 

21.GoogleでホスティングされているjQueryを使う

ローカルファイルやサーバー内に設置しなくてもjQueryが使えるようになります。設置方法は2通りあります。

 //Example 1 
<script src="http://www.google.com/jsapi"></script><script type="text/javascript">
google.load("jquery", "1.4");
google.setOnLoadCallback(function() {
    alert('読み込み完了');
});
</script>
// Example 2 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

22.アニメーションを無効にする

jQueryのアニメーションを全て無効にします。

$(document).ready(function() { 
   jQuery.fx.off = true;
}); 

23.他のライブラリとの共存

他のライブラリと同時に使うには別の変数にjQueryを割り当てる事で動作させる事ができます。

$(document).ready(function() { 
   var $jq = jQuery.noConflict();
   $jq('#id').show();
}); 

参考になれば幸いです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly