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

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

コードはアレなんですけど、ひょっとしてひょっとすると誰かの役に立つかもしれないので恥ずかしながら公開します。対象はちょっとだけ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を実行するだけです。

        
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
  }
}

というわけで

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

何か役に立つことがあったらシェアしてみてください

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

Comments: 1 - Leave a comment

  1. kensuck

    良記事ありがとうございます。

    もしよければ、「Google Analyticsのトラックイベント一括bind」のgaq.pushバージョンを教えてください!初心者が適当にいじってみたのですが全然だめでした。

    あともしhogehogeの部分にドメイン以下のパスを引っ張ってこれるようになると全ページに入れられてかなりいいと思います。

    example.com/a/b/c/
    なら
    /a/b/c/
    の部分。

    (変なこと言ってたらすみません。。。)

Leave a comment

Trackbacks: 0

Trackback URL for this entry
Listed below are links to weblogs that reference
個人的に使うことが多い9つのjQuery・JavaScriptスニペット from 5509

Author

nori
nori
- UI Engineer
Location
- ,