MW211 EXIT

devlog
jQuery/$.postと論理型データ
2014年04月21日
jQueryの「$.post」で、bool値(論理型)を送信すると、文字型に変換されるようだ。

送信側でこのように送信して…。
┌──────────────────────────────────────┐
│$.post(受信先, {"test":true});                                              │
└──────────────────────────────────────┘

受信側で、ダンプ表示してみた場合。
┌──────────────────────────────────────┐
│var_dump($_POST);                                                           │
├──────────────────────────────────────┤
│array(1) {                                                                  │
│  ["test"]=>                                                                │
│  string(4) "true"                                                          │
│}                                                                           │
└──────────────────────────────────────┘
「true」は文字型で認識されている。

途中で変換をかけているのであろうか。

「jQuery1.10.1」でのお話(なので最新もそんなはず)。

URLエンコードが施されたURLクエリーの文字列に変換されるのが原因の模様。
分類:jQuery
jQuery/非同期のループ
2014年04月02日
以下のような感じで、配列ごとに非同期でAjaxでデータを取得して処理をするとする。
┌──────────────────────────────────────┐
│for (var index in 配列) {                                                   │
│    $.getJSON(                                                              │
│        配列[index]['url'],                                                 │
│        function(json) {                                                    │
│            alert(配列[index]['name']);                                     │
│        }                                                                   │
│    );                                                                      │
│}                                                                           │
└──────────────────────────────────────┘
ここで、配列ごとの他の要素(「配列[index]['name']」)を、
コールバック関数で参照したい場合、上記のようにすると、
戻った頃には「index」が最後まで進んでいたりして、正しい値を取得できない。
例えば、「赤、青、黄」という三つのデータ配列だった場合、
コールバック関数中ではすべて「黄、黄、黄」となってしまう。

これを解決するには、「$.each()」を使えばよい。
┌──────────────────────────────────────┐
│$.each(配列, function(index, value) {                                       │
│    $.getJSON(                                                              │
│        value.url,                                                          │
│        function(json) {                                                    │
│            alert(value.name);                                              │
│        }                                                                   │
│    );                                                                      │
│});                                                                         │
└──────────────────────────────────────┘
PHPの「foreach (配列 as $index => $value)」のようなものだ。
#連想配列の場合「$index」の部分は「$key」の方が一般的だろう。
分類:jQuery
jQueryUI/選択中タブIDの取得
2014年03月11日
表示済みのタブの選択中タブIDを取得するには、以下の要領で参照すればよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs('option', 'selected')                                      │
└──────────────────────────────────────┘

タブの切り替え操作を実施した瞬間に新タブのタブIDを取得するには
以下のような感じ(ui.index)で行えばよい。
┌──────────────────────────────────────┐
│$(セレクタ).tabs({                                                          │
│    select  :function(event, ui) {                                          │
│        $.post(AjaxサーバURL, {"tab_id":ui.index});                         │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
上記のようにAjaxでPOSTしてしまってサーバ側にセッションとして
記録してしまえば、こっそり現在表示しているタブを把握することができる。
→表示時にこのセッション情報を使えば、画面をリロードされても
  初期表示のタブに戻ることなく、直前まで表示中のタブで表示できる
分類:jQuery
jQuery/セレクタ「:hidden」に注意
2014年03月05日
「input type="submit"」を指すセレクタの「$(':submit').」と同じように
「input type="hidden"」を指すセレクタとして「$(':hidden').」が使える。

でも、これは非表示要素(「display:none;」)も対象とするので
意図しないところを指してしまい嵌ってしまうことがある。
「$('input:hidden').」と、絞り込んだ方が安全だと思う。
分類:注意、jQuery
jQuery/周辺の幅を取得する
2014年02月05日
┌─────┬────────────────────────────────┐
│上padding │$(this).css('padding-top'        ).replace(/px/, '');           │
│上border  │$(this).css('border-top-width'   ).replace(/px/, '');           │
│上margin  │$(this).css('margin-top'         ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│下padding │$(this).css('padding-bottom'     ).replace(/px/, '');           │
│下border  │$(this).css('border-bottom-width').replace(/px/, '');           │
│下margin  │$(this).css('margin-bottom'      ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│左padding │$(this).css('padding-left'       ).replace(/px/, '');           │
│左border  │$(this).css('border-left-width'  ).replace(/px/, '');           │
│左margin  │$(this).css('margin-left'        ).replace(/px/, '');           │
├─────┼────────────────────────────────┤
│右padding │$(this).css('padding-right'      ).replace(/px/, '');           │
│右border  │$(this).css('border-right-width' ).replace(/px/, '');           │
│右margin  │$(this).css('margin-right'       ).replace(/px/, '');           │
└─────┴────────────────────────────────┘
「■px」で取得されるので、「px」を取り除いて数値化している。

「border」だけ「-width」が必要なことに注意。
分類:jQuery
jQuery/配列の書き方
2014年01月28日
JavaScriptの場合、配列の「a['b']」を「a.b」と書くことができる。
なので、「$(this).height()」を「$(this)['height']()」と書くこともできてしまう。
#単純に「.height」を「['height']」を置換できてしまう
分類:jQuery
jQuery/スクロール領域の縦幅
2014年01月27日
スクロールバーに囲われた領域の…

内部の縦幅(スクロールで隠れている部分も含む)
┌──────────────────────────────────────┐
│$(this).prop('scrollHeight')                                                │
└──────────────────────────────────────┘

外部の縦幅(見えている部分)
┌──────────────────────────────────────┐
│$(this).prop('offsetHeight')                                                │
└──────────────────────────────────────┘
但し、上記はスクロールバー自体の縦幅も含むので
「overflow:scroll;」の場合は、「$(this).prop('scrollHeight')」よりも大きくなる。
分類:jQuery
jQuery/ブラウザサイズ変更でリロード
2014年01月14日
表題の件、以下の通り。
┌──────────────────────────────────────┐
│$(window).resize(function() {                                               │
│    location.href = location.href;                                          │
│});                                                                         │
└──────────────────────────────────────┘
分類:jQuery
jQuery/ボタンの二度押し対策
2014年01月02日
ボタンを押した時のイベントで、当該ボタンを無効にしてしまえばよい。

無効にするレベルによって、以下の三つがあるだろう。
┌──────┬───────────────────────────────┐
│無効にする  │$(this).prop('disabled', true);                               │
├──────┼───────────────────────────────┤
│非表示にする│$(this).css('display', 'none');                               │
├──────┼───────────────────────────────┤
│削除する    │$(this).remove();                                             │
└──────┴───────────────────────────────┘
基本的に、見え消し的な一番目が採用されると思うが、
生ぬるいと思った場合には二番目以降も一考か。

二番目と三番名の違いは再利用するか否か?
二番目の場合は「$(this).css('display', 'block');」(表示)で簡単に復活できる。
分類:jQuery
jQuery/チェック関数の実装
2013年12月26日
submit時に入力チェックを実装したい場合には、以下のように実装する。
┌──────────────────────────────────────┐
│<input type="submit" name="command" value="実行"                            │
│                                          onclick="return チェック関数();"/>│
├──────────────────────────────────────┤
│$(':submit[value="実行"]').click(function() {                               │
│    return チェック関数();                                                  │
│});                                                                         │
└──────────────────────────────────────┘
上記いずれかであればよい。(jQueryを使わない例と使う例)
チェック関数でfalseを返せば、submitは行われない。
分類:jQuery
前へ 1 2 3 4 5 6 7 8 9 10 次へ