プラグインを使わず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="http://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