個人的に使うことが多い9つのjQuery・JavaScriptスニペット

プラグインだけど公開してないものだったり、いつも使ってるプラグインとの組み合わせだったり、ショートコードとかなんだか色々。どれもCodaにスニペットで登録してて一発変換で使ってます。

コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけJS書けるとかそういう人ですかねたぶん。書ける人はもっとキレイなやつ使ってるでしょうし。（もっときれいに書けとか何そのコードとかも歓迎）

紹介してるスニペットたち

• ページトップにスクロールするだけ
• テキストボックスにラベル表示するやつ
• 要素のサイズを取得するやつ
• タブきりかえるやつ
• IEで透過pngをフェードしたときに黒くなるやつ対策のshow()とhide()
• Google Analyticsのトラックイベント一括bind
• Ajaxサイトにするときに使うリンク置き換えプラグイン
• スクロール位置を取得する
• 表示領域のサイズを得る

まとめたやつのファイル

今回紹介した原文コードをまとめたものと、圧縮したものを置いておきます。

• snipets.js
• snipets_min.js

ライセンス（が気になる人へ）

WTFPLライセンスにしておくので好きなようにつかってください

ページトップにスクロールするだけ

#pageTop>aみたいな要素に適用するだけならこれコピって使うほうがいいですね。easingは使わないならswingとかに変えてください。

ソースコード

function pageScroll() {
  $('html, body').animate({
    scrollTop: 0
  }, {
    easing: 'easeInOutCirc',
    duration: 500
  });
}
$('#pageTop>a').click(function() {
  pageScroll();
  return false;
});

テキストボックスにラベル表示するやつ

↑こういう具合にラベル表示するやつ

引数にどの属性からひっぱるか指定して使います。僕はtitleを指定することが多いです

ソースコード

$.fn.inputLabel = function(attr){
  var formElms = $(this);
  for(var i=0;i0){
      
      parent.css('position','relative')
      
      var label = $(self).attr(attr);
      var pos = $(self).position();
      
      $(self).removeAttr('title');
      
      var insertLabel = $('')
        .attr('id','label_'+self.id)
        .append(label)
        .addClass('label')
        .css({
          position: 'absolute',
          top: pos.top + 6,
          left: pos.left + 7,
          zIndex: 100,
          color: '#666'
        });
      
      parent.append(insertLabel);
      
      if(self.value && self.value.length>0){
        insertLabel.hide();
      }
      
      insertLabel.click(function(){
        var relationInputId = this.id.replace('label_','');
        $(this).hide();
        $('#'+relationInputId).focus();
      });
        
      $(self).focus(function(){
        $('#label_'+this.id).hide();
      }).blur(function(){
        if(this.value.length<1){
          $('#label_'+this.id).show();
        }
      });
    }
  }
  return this;
}

実行例

$(hoge).inputLabel('title');

要素のサイズを取得するやつ

非表示の要素とかいちいちshow()して取得してhide()してとかめんどい

任意のタイミングで

$(hoge).m5getSize()

ってしたら

$.data(hoge, 'boxSize')

で色んなサイズが取れます

ソースコード

$.fn.m5getSize = function(options) {
  $(this).each(function() {
    var $this = $(this),
      prevBoxStyle = $this.css('display');
    
    $this.show();
    $.data($this, 'boxSize', {
      width: $this.width(),
      height: $this.height(),
      offsetWidth: $this.attr('offsetWidth'),
      offsetHeight: $this.attr('offsetHeight'),
      clientWidth: $this.attr('clientWidth'),
      clientHeight: $this.attr('clientHeight'),
      scrollWidth: $this.attr('scrollWidth'),
      scrollHeight: $this.attr('scrollHeight'),
      top: $this.offset().top,
      left: $this.offset().left
    });
    $this.css('display', prevBoxStyle);
  });
  return this;
}

タブきりかえるやつ

なんか結局自分で作ったやつが一番使いやすいっていうか、いつも同じHTML書いてればいいし楽ですよね。

HTML

こんなHTMLを用意してtabSwitchを実行するだけです。

  

    
hoge
    
fuga
    
piyo
  
  
  
hogehoge
  
fugafuga
  
piyopiyp

ソースコード

$.fn.tabSwitch = function(options){
  
  var c = $.extend({
    defaultCondition: true,
    effect: false,
  },options);
  
  var switchEffect = {
    show: function(o){
      if(c.effect) $(o).fadeIn("normal");
      else $(o).show();
    },
    hide: function(o){
      if(c.effect) $(o).fadeOut("fast");
      else $(o).hide();
    }
  }
  
  function tabHide(o,flag){
    if(flag || !c.defaultCondition){
      $(o).each(function(){
        switchEffect.hide(this.hash);
      });
    }else{
      if($(o).hasClass("active")){
        $(o).each(function(){
          if(!$(this).hasClass("active"))
            switchEffect.hide(this.hash);
        });
      }else{
        for(var i=0;i0){
        window.scroll(0,0);
        tabHide(anchor,true);
        $(anchor).removeClass("active");
        switchEffect.show(location.hash);
        $("a[href*='"+location.hash+"']","ul.tab").addClass("active");
      }
    });
  }
  
  $(this).each(function(){ tabSet(this);});
  
  return this;
}

実行例

$("div.tabArea").tabSwitch();

IEで透過pngをfadeしたときに黒くなるやつ対策のshow()とhide()

あの黒くなるのなんとかなりませんかね！単純にIEにはフェードじゃなくてshow()hide()にするだけで、使い方はfadeIn(), fadeOut()と置き換えるだけです。IE9だと黒くならないかも。そのへん未検証

ソースコード

$.fn.exShow = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).show();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeIn(duration, callback);
  }
  return this;
}
$.fn.exHide = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).hide();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeOut(duration, callback);
  }
  return this;
}

Google Analyticsのトラックイベント一括bind

トップページ全部のリンクに・・・とかめんどくさくてやってられません！classにgaTrackEvent、idにテキトーなやつ入れておけば自動で集計してくれます。自動なんで目安はURLなんですけど・・・

ソースコード

ところで、ひとつ前の非同期じゃないやつなんで非同期の人は_gaq.pushに置き換えてください。

$('div.gaTrackEvent').each(function() {
  var _thisId = $(this).attr('id'),
    _thisChildAnchors = $('a', this);
    
  _thisChildAnchors.each(function() {
    var _thisHref = $(this).attr('href');
    if ( pageTracker ) {
      $(this).click(function() {
        pageTracker._trackEvent('hogehoge', _thisId, _thisHref);
      });
    }
  });
});

Ajaxサイトにするときに使うリンク置き換えプラグイン

任意のリンクに対して実行するだけで

http://hoge.com/hogehoge/hoge2/

みたいな普通のリンクを

http://hoge.com/#/hogehoge/hoge2/

みたいにハッシュフラグメントリンクに置き換えます

ソースコード

$.fn.ggReplaceHrefs = function() {
  var elms = $(this);
  elms.each(function() {
    $(this)
      .filter(function() {
        return this.href.indexOf(domain) != -1;
      })
      .attr('href', $(this).attr('href').match(/^\./)
        ? $(this).attr('href')
          .replace(domain, '')
          .replace(/^\./, '#')
        : '#' + $(this).attr('href').replace(domain, ''))
      .click(function() {
        location.hash = this.hash;
        return false;
      });
  });
}

スクロール位置を取得する

スニペットにすると楽です。要素の位置を計算するときがよくあるんですけど、windowのリサイズに対応したり色々めんどうですよね。。

ちなみにサイズ取得関連は何回お世話になってるか分からないcyokodogさんの記事をいつも見てます
jQuery の位置・サイズ関連メソッドまとめ – cyokodog

ソースコード

var returnScrollTop = function() {
  return {
    y: document.body.scrollTop || document.documentElement.scrollTop,
    x: document.body.scrollLeft || document.documentElement.scrollLeft
  }
}

表示領域のサイズを得る

要はHTMLドキュメントの高さと幅に当たるところです。これもスニペットで

ソースコード

var returnClientSize = function() {
  return {
    x: document.body.clientWidth || document.documentElement.clientWidth,
    y: document.body.clientHeight || document.documentElement.clientHeight
  }
}

というわけで

便利なスニペットコードあれば教えてください！