devlog

jQuery／minとかpackとか

2013年12月19日

jQueryには、以下の三つの形式がある
┌───────────┬──────────────────────────┐
│uncompressed(非圧縮版)│例）jquery-1.3.2.js                                 │
├───────────┼──────────────────────────┤
│minified    (軽量版)  │例）jquery-1.3.2.min.js                             │
├───────────┼──────────────────────────┤
│packed      (圧縮版)  │例）jquery-1.3.2.pack.js                            │
└───────────┴──────────────────────────┘

性格的分けすると以下のような感じとなる。
┌───────────┬───┬───┬───┐
│                      │サイズ│ 速度 │可読性│
├───────────┼───┼───┼───┤
│uncompressed(非圧縮版)│× 大 │△ 中 │○ 良 │→研究用
├───────────┼───┼───┼───┤
│minified    (軽量版)  │△ 中 │○ 速 │× 難 │→実務用
├───────────┼───┼───┼───┤
│packed      (圧縮版)  │○ 小 │× 遅 │×超難│
└───────────┴───┴───┴───┘
「uncompressed」を可読性を無視して圧縮したのが「minified」。
それを変換までしてさらに圧縮したのが「packed」。
「packed」までしてしまうと、元に戻すのブラウザ側で処理する必要があるので
逆に遅くなってしまうということ。
(但し、サーバ側のサイズを極限まで小さくできる利点がある)

とはいえ、「Ver1.3.2」を最後に「packed」はリリースされてない模様。
廃止となった？(違う方式へ移行した？)

分類：jQuery

jQuery／Ajaxサブ画面からのダウンロード

2013年11月28日

Ajaxでサブ画面をはめ込んだとして、そこにファイルダウンロードボタンが
あったならば、このボタンを使えるものとできるのか？

答えは簡単にできる

呼び出される側で、以下を最初に出力してファイルの中身をその次に標準出力する。
┌──────────────────────────────────────┐
│header('Content-Disposition: attachment; filename="ダウンロード.txt"');     │
│header('Content-Type: application/octet-stream');                           │
└──────────────────────────────────────┘
一種の盲腸線みたいなもんだから画面表示はせずexit()で終わらせてしまう。

で、ダウンロードボタンでは「location.href=」でそれを指定するだけでよい。

Ajaxでダウンロードファイルを取ってきて、それを渡してみたいな仲介はいらない。

紐づけてやれば(紹介してやれば)、それでOK。バッファはいらない。

┌──────────────────────────────[download1.htm]┐
<html>
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<script type="text/javascript" src="jquery.js"></script><!-- ★jQuery -->
<script type="text/javascript">
$(function() {
    $.get(
        'download2.php',
        function(data) {
            $('#sub').html(data);
        }
    );
});
</script>
<title>ダウンロード画面</title>
</head>
<body>
<div id="sub"></div>
</body>
</html>
└──────────────────────────────────────┘
┌──────────────────────────────[download2.php]┐
<?php
if (isset($_GET['dl'])) {
    header('Content-Disposition: attachment; filename="download.txt"');
    header('Content-Type: application/octet-stream');
    echo 'ダウンロードファイルの中身です';
} else {
    echo <<<___HTML___
<input type="button" value="ダウンロード実行"
 onClick="location.href='download2.php?dl';"/><br/>

___HTML___;
}
└──────────────────────────────────────┘

分類：jQuery

jQuery／要素の存在チェック

2013年09月01日

セレクタで指定したものが実際にあるのかどうかを判定する方法は
いろいろあるようだ。

但し、一番やりがちな以下はダメです。いずれでも真になってしまいます。
┌──────────────────────────────────────┐
│if ($(セレクタ)) {存在あり;} else {存在なし;}                               │
└──────────────────────────────────────┘

ということで、やり方は以下の通り。
┌──────────────────────────────────────┐
│if ($(セレクタ)[0])              {存在あり;} else {存在なし;}               │
│if ($(セレクタ).get(0))          {存在あり;} else {存在なし;}               │
├──────────────────────────────────────┤
│if ($(セレクタ).length  > 0)     {存在あり;} else {存在なし;}               │
│if ($(セレクタ).size()  > 0)     {存在あり;} else {存在なし;}               │
├──────────────────────────────────────┤
│if ($(セレクタ).is('*') == true) {存在あり;} else {存在なし;}               │
└──────────────────────────────────────┘

「.size()」よりも「.length」が推奨されるので、以下を推奨したいと思う。
┌──────────────────────────────────────┐
│if ($(セレクタ).length > 0) {存在あり;} else {存在なし;}                    │
└──────────────────────────────────────┘

分類：jQuery

jQuery／キー入力による表示位置移動

2013年08月31日

「<div id="point"><div>」を上下左右キー入力で移動させるサンプル。
┌──────────────────────────────────────┐
│$(window).keydown(function(e) {                                             │
│    switch (e.keyCode) {                                                    │
│        case 37:    // ←                                                   │
│            $('#point').css('left', $('#point').position().left - 16);      │
│            break;                                                          │
│        case 38:    // ↑                                                   │
│            $('#point').css('top' , $('#point').position().top  - 16);      │
│            break;                                                          │
│        case 39:    // →                                                   │
│            $('#point').css('left', $('#point').position().left + 16);      │
│            break;                                                          │
│        case 40:    // ↓                                                   │
│            $('#point').css('top' , $('#point').position().top  + 16);      │
│            break;                                                          │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘

分類：jQuery

jQuery／チェックボックスがチェックされてアナザー

2013年07月05日

対象となるチェックボックスにチェックがされているか否かを判断する方法は
いろいろある。
いろいろありすぎて、どれが正解かわからない(困ったものだ)。

チェックボックスが「id="a"」だった場合、
真ならチェック有り処理を行うようなif文は、以下のパターンがありうる
①「if ($('#a').is(':checked'))」
②「if ($('#a').prop('checked'))」
③「if ($('#a').prop('checked') == true)」
④「if ($('#a').attr('checked'))」
⑤「if ($('#a').attr('checked') == true)」
⑥「if ($('#a').attr('checked') == 'checked')」
⑦「if ($('#a')[0].checked == 'checked')」


チェックボックスが「id="a"」と「id="b"」の二つで場合、
一方でもチェックがあればってパターンとなる、以下のような感じか
⑪「if ($('#a,#b').is(':checked'))」
⑫「if (($('#a').prop('checked')) || ($('#b').prop('checked')))」


ま、結論ありきで記載したが、
最速は②、汎用性では①⑪ってことになる。

「.is(':checked')」(①⑪)に(単純化して)統一するか、
セレクタの単独が保証されている場合(「$(this)」の場合など)は
「.prop('checked')」(②)を使い分けるってのがベストな選択だろう。

分類：jQuery

jQuery／表示・非表示と対象以外の指定

2013年01月08日

例えば、class属性が「xyz」の列(tdタグ)を表示・非表示させる場合は、
以下のような感じで、toggle()メソッドを使う。
┌──────────────────────────────────────┐
│$('td.xyz').toggle();                                                       │
└──────────────────────────────────────┘

では、その列以外を対象としたい場合には？

こんな感じ。
┌──────────────────────────────────────┐
│$('td:not(.xyz)').toggle();                                                 │
└──────────────────────────────────────┘
「:not()」の使い方をマスタすればいろいろ使えそうだ。

分類：jQuery

jQuery／イベント登録

2012年11月17日

┌──────────────────────────────────────┐
│$('#button').click(function() {                                             │
│    alert('押したね？');                                                    │
│});                                                                         │
└──────────────────────────────────────┘
上記と下記は等価。
┌──────────────────────────────────────┐
│$('#button').bind('click', function() {                                     │
│    alert('押したね？');                                                    │
│});                                                                         │
└──────────────────────────────────────┘

下記の方式だと複数イベントを束ねることができる。、
┌──────────────────────────────────────┐
│$('#text').bind('keyup keydown', function() {                               │
│    alert('押したね？');                                                    │
│});                                                                         │
└──────────────────────────────────────┘

分類：jQuery

jQuery／イベントの後付け

2012年11月16日

クリックイベントとかを定義しても、最初のその時点でその要素がないと
その(まだ出現していない)要素にはイベントが反映されない。

つまりは、appendとかでボタンを追加しても、
そいつにはイベントが登録されていないわけだ。

だいたい、ボタンを出現させるってことは、そいつを押させて何かのイベントを
起こさせたりしたわけだから、ボタンの出現とともにイベントも登録したいわけだ。
＃最初に全部出現させといて、必要なもの以外隠すという手もあるが、
  全部がいくつかわからない時にはちょっと難ありだ。

で、とにかくappend後、再度イベントを登録しちゃえばいいじゃん、ということで、
append処理を行った直後にイベント処理を追記した。
┌──────────────────────────────────────┐
│$('#body')                                                                  │
│    .append($('<input>').prop('type' , 'button')                            │
│                        .val('押して')                                      │
│    );                                                                      │
├──────────────────────────────────────┤
│$(':button').click(function() {                                             │
│    alert("押したね？");                                                    │
│});                                                                         │
└──────────────────────────────────────┘
おぉ、これならいける…と思ったのだが、なんとボタンが出現する度に
イベントが多重登録されていくのであった。

で、調べたら、bindっての使えばいいらしい。
┌──────────────────────────────────────┐
│$('#body')                                                                  │
│    .append($('<input>').prop('type' , 'button')                            │
│                        .val('押して')                                      │
│                        .bind("click", function() {                         │
│                            alert("押したね？");                            │
│                        })                                                  │
│    );                                                                      │
└──────────────────────────────────────┘

分類：jQuery

前へ 1 2 3 4 5 6 7 8 9 10 次へ