jQueryのTips 2015/03/03

関連

jQuery APIレファレンス 2015/03/03

http://api.jquery.com/

日付をカレンダーから選択できるウィジェット 2013/10/07

Datepicker Widget
http://api.jqueryui.com/datepicker/

デモ
http://jqueryui.com/datepicker/

日付ごとに選択可能かどうかをカスタマイズするには 2013/03/27

$('.calendar input[type=text]').datepicker({minDate: 1, beforeShowDay: function(date){
  return [(date.getDay() == 1), ""]; # 月曜日のみ選択可能
}});

Twitter風に画面上部にバーを出すには 2013/10/12

Twitterでなにかを変更したときに画面の上の方にニョってバーが出てくるやつ。いまのTwitterはもう違うみたいだけど、記憶の範囲では2013年はじめ頃はこういうのだった。

Twitter風の通知ができるjQueryのプラグイン
http://www.9lessons.info/2011/10/jquery-notification-plugin.html

通知を手動で閉じるには 2013/04/09

closeNotification(1);

引数は閉じるアニメーションの時間の秒数。

ツールチップを出すには (PowerTip) 2013/03/29

http://stevenbenner.github.io/jquery-powertip/

[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-powertip.html

ツールチップを出したい要素に data-powertip 属性を指定するだけ 2013/04/05

$(function(){
  $('*[data-powertip]').each(function(){
    var option_str = $(this).data('powertip-opt');
    var option = {};
    if(option_str != undefined){
      option = eval('option = {' + option_str + '};');
    }
    if(option['smartPlacement'] == undefined){
      option['smartPlacement'] = true;
    }
    $(this).powerTip(option);
  });
});

<div data-powertip="ツールチップの内容" data-powertip-opt="placement:'w'">

data-power-opt には要素個別にオプションを指定できる。

スマートフォン・タブレットなどでスワイプのイベントを取得するには 2013/04/24

jQuery Touchwipe Plugin
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

拡大で表示させているときにドラッグしようとすると普通だったらスクロールしてしまうところを、このプラグインでイベントを設定しておくと、スクロールせずにドラッグのイベントを拾える。

セレクタで属性によって絞り込むには 2013/04/19

input[name]
name 属性が存在する input
input[name=q]
name 属性の値が "q" の input
input[name!=q]
name 属性の値が "q" でない input
input[name^=q]
name 属性の値が "q" で始まる input
input[name$=q]
name 属性の値が "q" で終わる input
input[name^=q][value]
name 属性の値が "q" で始まり、かつ value 属性が存在する input

jQueryオブジェクトからHTMLソースを取得するには 2013/09/11

$(...).html() だとその要素の内側のHTMLを取得できるが、その要素自体のHTMLは取得できない。$('<img />').attr('src', src).html() とやってもimgの内側にはなにもないので空の文字列が返ってきてしまう。

その要素自体を含むHTMLを取得したい場合は、以下のように関数を定義しておいて、

$.fn.outerHtml = function(){
    return $('<div/>').append(this.clone()).html();
}

$(...).outerHtml() とするとその要素自体のHTMLを取得できる。

CSSの半透明をjQueryで簡単に実現するには 2013/04/05

/*
  $('...').opacity(0.5)
  で半透明にする。
  $('...').opacity(1)
  で不透過にする。
  $('...').opacity(0)
  で完全に透明にする。
*/
$.fn.opacity = function(value){
  var ie_value = Math.floor(value * 100);
  $(this).
    css('filter', 'alpha(opacity=' + ie_value + ')'). // for IE
    css('opacity', value);
}

複数の要素を同時にアニメーションさせるには 2013/04/05

http://www.srv-shinra.com/wordpress/?p=13

オプションに queue: false を付けて、アニメーションさせたいコードを並べる。

  $('...1').animate({scrollTop: 0},
                    {duration: 600, queue: false});
  $('...2').animate({scrollTop: 0},
                    {duration: 600, queue: false});

live と delegate の違い 2013/04/08

jQueryの .bind(), .live(), .delegate() の違い
http://jser.info/post/3307464125

// live の場合
$('a').live('click', function(){ ... });

// delegate の場合
$('#container').delegate('a', 'click', function(){ ... });

live の場合はいったん $('a') を実行してしまうため、最初の設定が重い。

jQueryのbind/live/delegateの違いまとめ、と新API .on()の使い方
http://d.hatena.ne.jp/y-kawaz/20111002/1317489435

jQuery Splitter 2013/04/18

http://archive.plugins.jquery.com/project/splitter

以下は、横に2つ並べたブロックの間にスプリッターを配置して横幅を可変にする。

orientation を 'horizontal' にすると、2つのブロックを縦に並べる。

limit は左右のブロックの最低の幅。

position はデフォルトの分割の割合で、'70%' の場合は、左が70%を占める。 '300px' とすると、左のブロックの幅がデフォルトで 300px になる。右のブロックの幅を指定することができないので、width = $('#wrapper').width() - 300; などとして、 position: '' + width, などとする。 position に数字を指定するとエラーになるが、数字を文字列に変換した場合は、単位 px が仮定される。

onDragStart はマウスで境界を移動させ始めるときに呼び出される関数。

onDragEnd はマウスで境界を移動させ終わったときに呼び出される関数。

<div id="wrapper">
  <div id="left">...</div>
  <div id="right">...</div>
</div>
<script>
  $(function(){
    $('#wrapper').split({
      orientation: 'vertical',
      limit: 100,
      position: '70%',
      onDragStart: function(){
        ...
      }
      onDrag: function(){
        ...
      }
      onDragEnd: function(){
        ...
      }
    });
  });
</script>

onDrag はマウスで境界を移動させている途中に呼び出されると、思ったら、呼び出されないので、以下で修正。
https://github.com/hydrocul/jquery.splitter/commit/340ab031b328c61360c80db8a7cf61f8214e5c19

改行と text() と html() の関係 2013/04/15

<!DOCTYPE>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- このときの jQuery は 1.9.1 -->
</head>
<body>

<div id="test1">abc<br />def</div>

<div id="test2">abc
def</div>

<script>
  $(function(){
    // コメントはブラウザごとの出力結果。
    console.log($('#test1').html().replace(/\n/, '****BR****'));
      // Chrome 28  => abc<br>def
      // Firefox 19 => abc<br>def
      // IE9        => abc<br>def
      // IE8        => abc<BR>def
    console.log($('#test1').text().replace(/\n/, '****BR****'));
      // Chrome 28  => abcdef
      // Firefox 19 => abcdef
      // IE9        => abcdef
      // IE8        => abcdef
    console.log($('#test2').html().replace(/\n/, '****BR****'));
      // Chrome 28  => abc****BR****def
      // Firefox 19 => abc****BR****def
      // IE9        => abc****BR****def
      // IE8        => abc def
    console.log($('#test2').text().replace(/\n/, '****BR****'));
      // Chrome 28  => abc****BR****def
      // Firefox 19 => abc****BR****def
      // IE9        => abc****BR****def
      // IE8        => abc def
  });
</script>

</body>
</html>

jQueryでのhtml()とtext()
http://tamajio.hatenablog.com/entry/20110219/1298075526

jQueryでのhtml()とtext()の挙動、生のJavaScriptならinnerHTML()とtext()の 挙動がIEだと違う事が分かりました。前者は改行コードが取り払われ、後者は 改行コードがそのまま付いてます。コーユーのが影響するのは、PREタグを 使ったり、CSSでwhite-spaceを利用して箇所です。

セレクタの中で表示しているものだけを抽出するには 2013/04/18

以下のセレクタで表示されているdivのみを選択できる。

$('div:visible')

DOM要素が表示されているかどうかを判定するには 2013/04/18

以下の式でtrueかfalseが返ってくる。

$('#hoge').is(':visible')

以下は、単に上記と逆。

$('#hoge').is(':hidden)

テーブルのソート・検索機能を簡単に付けられるプラグイン 2013/12/20

jQuery Table Sorting by Sean MacIsaac
http://www.seanjmacisaac.com/projects/code/tablesort/

絞り込みもできるjQueryプラグイン【Table sort】がめっちゃ便利な件
http://sakainote.com/?p=1364

このサイトは筆者(hydrocul)の個人メモの集合です。すべてのページは永遠に未完成です。