MW211 EXIT

devlog
JavaScript/disabledの錯覚
2012年01月11日
「disabled="disabled"」みたいな属性を付加することにより
その項目を入力不可とするとともに、POSTパラメータとして送信しなくできる。
(っていうか送信できないのが結構厄介だったりするけど)

でも、こいつは消滅したわけじゃない。
document.getElementById()とかでもしっかり扱ってくれる。
特にjQueryのeach()とかでもね。

チェックを外した瞬間に動的にdisabledにして、submitにチェックって時に
チェック対象外かなって錯覚するパターンだ。
分類:JavaScript、jQuery
設計/数値っぽいけど文字列の場合のソート
2012年01月10日
「2」と「10」の場合、数値としてソート(昇順で)すると「2→10」の順になるが、
文字列としてソートすると「10→2」の順になる。
文字列だと先頭の一文字目で「1」と「2」を比較して「1」が先に来るからだ。
「い」と「ああ」をソートすると「ああ→い」の順になるのと同じだ。

特に「文字列+数値=文字列」の場合に顕著になる。
「番号2」「番号10」とかの場合。(「番号10」が先になってしまう)

回避方法とは?

ま、ゼロパディングでしょうなぁ。
「番号02」「番号10」にすりゃ問題なし。

「02」ってのが嫌なら「番号②」「番号⑩」って方法もある
でも「⑳」までしかないけどね。(それに特殊文字はちょっと)

ま、後は、表示用項目とソート用項目とを分けて
ソート用項目は「番号02」、表示用項目は「番号2」とか二重管理してしまうのも手だ。
どうせだったら、ソート用項目を順番の連番にしてしまうってものもあり。
これをIDと言ったり言わなかったり。

ゼロパディングたって何桁パディングすりゃいいんだかってのも結構重要。
さっきの例だと「100」を超えて3桁に突入したら破綻する。
まるで二千年問題だね。
でも大抵は、数値項目でもあらかじめ桁数を決めたりするものなので、
そんなに悩まなかったりするかも。
分類:設計
WindowsVista/コマンドプロンプト
2012年01月08日
コマンドプロンプト(DOSコマンド)に、ファイルやらフォルダやらを
ドラッグ&ドロップすると、たちどころにそいつのパスとかを表示してくれる機能って
WindowsVistaで廃止されたんだね。

セキュリティ強化の為だって。

気づかなかった。
自然とパスをコピペする癖がついてしまっていた。
分類:小ネタ、Windows
Smarty/先頭一文字だけ出力
2012年01月07日
テーブルの列幅が限られていて、先頭一文字だけ出力して
全文はカーソルをそこにあわせることにより、コメント的に表示させる…
なんてテクニックをSmartyで簡単にやる方法。
┌──────────────────────────────────────┐
│<td title="{$xxxx|escape}">{$xxxx|truncate:1:'':true|escape}</td>           │
└──────────────────────────────────────┘
分類:Smarty
jQuery/POSTパラメータを追加
2012年01月06日
idが「フォーム」のformで(POSTで)submitした時に、
「$_POST['キー'] = '値'」みたいなのが渡されるようにしたい場合、
submit前にhidden属性のinputタグを追加すればいい。

┌──────────────────────────────────────┐
│$('#フォーム').append('<input type="hidden" name="キー" value="値"/>');     │
└──────────────────────────────────────┘
こんな感じ。
で、submit。
┌──────────────────────────────────────┐
│$('#フォーム').submit()                                                     │
└──────────────────────────────────────┘

もう少し、jQueryぽっく書くと以下のような感じなのだろうか。
┌──────────────────────────────────────┐
│$('<input />')                                                              │
│    .attr('type' , 'hidden')                                                │
│    .attr('name' , 'キー'  )                                                │
│    .attr('value', '値'    )                                                │
│  .appendTo('#フォーム');                                                   │
└──────────────────────────────────────┘

ベタだけど前者の方が楽っぽいな。
もっといい方法があるのかもしれないけど。
分類:jQuery
jQuery/Ajax入門のつまづき
2012年01月05日
前出の通り、
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(function(){                                                   │
│      $("#a").parent().load("ajax.php #a");                                 │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
だったり
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(                                                              │
│    function(){                                                             │
│      $.get(                                                                │
│        "ajax.php",                                                         │
│        function(data){                                                     │
│          $("#a").html($("#a", data).html());                               │
│        }                                                                   │
│      );                                                                    │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
だったりして、簡単にreload的なことができる。
#「ajax.php」ってところが、自身のファイル名になる。

基本reloadだからレイアウトもまったく一緒で簡単簡単、…なんて思っていたら
大きな落とし穴に嵌ってしまった。
(しかも、IEだけ現象が発生するというタチの悪いパターン)

結論から言うとメモリリーク。
自身を呼び出すのだが、その自身は自身を呼び出す為のAjaxタイマを実装してるわけだ。
子が孫を呼び、孫が曾孫を呼ぶ。
そりゃメモリリークもするかもね。

ってことで、自身を迂闊にAjaxタイマではreloadしちゃダメなんだね。

こういう時には、従順なそれ用のphpファイルを呼ぶようにしなきゃってことさ。
分類:注意、jQuery
ブラウザ/パスワード入力欄の選択
2012年01月04日
タブキーでカーソルを移動していった場合、
入力欄(inputタグのtext属性)に入力されている文字が反転して全選択状態になる。

でも、パスワード入力欄(inputタグのpassword属性)については、
InternetExplorerだけは仕様が違うらしく
全選択にはならず、入力欄先頭にカーソルが移動するだけ。
#Firefox、Chrome、Safari、Operaは入力欄同様全選択状態になる
分類:小ネタ、ブラウザ
ブラウザ/textareaの三角コーナー
2012年01月03日
一部のブラウザにおいて、textareaタグによる文字入力欄の右下の角に、
三角コーナーみたいなちょっとした領域がある。

これをクリックしてドラッグすると…。

入力欄が縮小・拡大するのでした。

実装状況としては、
  ×InternetExplorer
  ○Firefox
  ○Chrome
  ○Safari
  ×Opera
みたいな感じです。
分類:小ネタ、ブラウザ
どっち?/ボタンの並び順
2012年01月02日
┌──────────────────────────────────────┐
│Q.ボタンの並び順はどっちがいい?                                          │
│    (a) 「OK/キャンセル」の順                                              │
│    (b) 「キャンセル/OK」の順                                              │
└──────────────────────────────────────┘
  A.甲乙つけがたし。
    (a) ・Windows派(Windows環境の標準)
        ・「はい/いいえ」と同じ並び(重要な方が先にくる)
    (b) ・Mac派(Mac環境の標準)
        ・「←戻る/進む→」と同じ並び

基本の流れはあくまでも画面左上から画面右下へ。
よって、「OK」ボタンは画面右下におくのがセオリー。(画面下中央もギリギリOK)

ただし、この周囲に「キャンセル」ボタンをどう置くか?

画面右下の中で、その中でも右に「OK」を置くのが流れ的にはいい感じがする((b)派)。
┌──────────────────────────────────────┐
│                                                  ┌─────┬─────┐│
│                                                  │キャンセル│    OK    ││
│                                                  └─────┴─────┘│
└──────────────────────────────────────┘

しかし、画面右下の中でもその下に「OK」を置くのはちょっと違和感がある。
┌──────────────────────────────────────┐
│                                                              ┌─────┐│
│                                                              │キャンセル││
│                                                              ├─────┤│
│                                                              │    OK    ││
│                                                              └─────┘│
└──────────────────────────────────────┘

やっぱり、こっちだよね。
┌──────────────────────────────────────┐
│                                                              ┌─────┐│
│                                                              │    OK    ││
│                                                              ├─────┤│
│                                                              │キャンセル││
│                                                              └─────┘│
└──────────────────────────────────────┘

「Yes-No枕」はあっても、「No-Yes枕」はない。

日本人だって「はい、いいえをはっきりしなさい!」であって
「いいえ、はいをはっきりしなさい!」とはあんまり言わない。

ってことは、画面右下というブロックの中で「OK」は先(左)にあってよい((a)派)。
┌──────────────────────────────────────┐
│                                                  ┌─────┬─────┐│
│                                                  │    OK    │キャンセル││
│                                                  └─────┴─────┘│
└──────────────────────────────────────┘

でもでも、画面右下とはいえ「進む→/←戻る」ってのはねえ。
#あれ?この書き方だと結構イケてるデザインに見えなくもない(笑)

要は、慣れ、そしてデファクトスタンダードが決め手ってことか。
パソコンの世界ではWindowsが王者なので(a)が優勢、
Webの世界では、IEだって履歴ボタンは「←・→」だから(b)が優勢って感じなのかも。

自分が作成当事者だった場合は、
自分が掌握(作成)するそのシステムの小さな世界において
どっちかに統一されていればいいって結論なんだろうけどね。
#んなこといったって、外の世界で二大勢力が拮抗していると
  谷間のラーメン屋としてはどっちにつくべきか風見鶏なわけです
分類:設計
jQuery/Ajaxまだまだ序の口
2012年01月01日
┌──────────────────────────────────────┐
│$time = date('s');                                                          │
│<span id="a">{$time}</span>                                                 │
└──────────────────────────────────────┘
とりあえず、上記みたいな感じで、
表示内容が刻々と変化するphpファイル(ajax.php)を用意する。
#刻々と変化するDBの値を取得したりするのを想定したダミーです。

で、jQueryは以下のような感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(function(){                                                   │
│      $("#a").parent().load("ajax.php #a");                                 │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
「id=a」という範囲をloadして、「id=a」の一つ上の階層に読み出す。
すると、「id=a」に吐き出される。
そんな感じなのでしょうか。

「$.get」で書くとこんな感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(                                                              │
│    function(){                                                             │
│      $.get(                                                                │
│        "ajax.php",                                                         │
│        function(data){                                                     │
│          $("#a").html($("#a", data).html());                               │
│        }                                                                   │
│      );                                                                    │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
汎用性が高いかも。

「id=a」がtdタグ中のspanだったりして、tdタグの背景色が変わる場合は
以下のようなのをhtml()の行の部分に置き換えれ(追加すれ)ばいいみたい。
┌──────────────────────────────────────┐
│$("#a").parent().css("background-color",                                    │
│                     $("#a", data).parent().css("background-color"));       │
└──────────────────────────────────────┘
分類:jQuery
前へ 1 … 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 … 156 次へ