プラグインを使わずjQueryに23の機能をつける方法
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。
詳しくは以下
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();
});
参考になれば幸いです。
最新情報をお届けします
