MW211 EXIT

devlog
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
jQuery/幅をパーセントで指定
2011年12月31日
①「$("識別").style.width = 値」と②「$("#識別").width(値)」の違い。
①の「$」は以下の定義。①は一般的なJavaScript、②はjQueryってことで。
┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘

値を取得したい場合は、②の場合「$("#識別").width()」と引数を空にすればよい
…ってのは、初歩の初歩だが、他に以下の違いがある。

CSS等で初期値を設定している場合、
①はJavaScript的に値を代入していなければ、値は「」となるが、
②はJavaScript的に値を代入していなくても、値を返してくれる。

①の解決方法としてはwindow.onloadで値を代入してしまえばよい。
(というのが妥当かはちょっと不安)

で、本題。
幅とかは数値ではなく比率でも指定してできるが、
①はそのままだけど、②は親階層に比率を掛けて数値にしてくれる。
例えば50%を指定した場合、一つ上の階層(外側)の幅が「200px」だった場合
①は「50%」のまま、②は「100」になる。
┌──────────────────────────────────────┐
│$("識別").style.width = "50%"                                               │
│$("識別").style.width → 「50%」                                            │
├──────────────────────────────────────┤
│$("#識別").width("50%")                                                     │
│$("識別").style.width → 「100」                                            │
└──────────────────────────────────────┘
ただね、この掛け算、小数点以下はなくなるのだけど
ブラウザにより、切り捨て、四捨五入とか若干異なるみたい。
分類:jQuery
jQuery/jQuery三段活用
2011年12月29日
┌──────────────────────────────────────┐
│function $(id) {return document.getElementById(id);}                        │
└──────────────────────────────────────┘
みたいな定義をしてしまえば、「prototype.js」っぽく記述ができる。
これを「レベル0」とする。
これに「#」と「[0]」をつければ「jQuery」っぽく記述ができる。
これを「レベル1」とする。
┌──────────────┬────────────────┐
│          レベル0          │            レベル1            │
├──────────────┼────────────────┤
│$("識別").value             │$("#識別")[0].value             │
├──────────────┼────────────────┤
│$("識別").value = 値        │$("#識別")[0].value = 値        │
├──────────────┼────────────────┤
│$("識別").style.height = 値 │$("#識別")[0].style.height =  値│
├──────────────┼────────────────┤
│$("識別").style.width = 値  │$("#識別")[0].style.width = 値  │
└──────────────┴────────────────┘
さらに「jQuery」特有な形にすれば「レベル2」である。
┌────────────────┬───────────┐
│            レベル1            │       レベル2       │
├────────────────┼───────────┤
│$("#識別")[0].value             │$("#識別").val()      │
├────────────────┼───────────┤
│$("#識別")[0].value = 値        │$("#識別").val(値)    │
├────────────────┼───────────┤
│$("#識別")[0].style.height =  値│$("#識別").height(値) │
├────────────────┼───────────┤
│$("#識別")[0].style.width = 値  │$("#識別").width(値)  │
└────────────────┴───────────┘
「レベル2」を覚えれば、最大限「jQuery」っぽくなるが
わかんなくなったら「レベル1」でも潰しが効きそうだ。
分類:jQuery
CSS/外部ファイルの文字コード宣言
2011年12月28日
┌──────────────────────────────────────┐
│<link rel="stylesheet" href="xxxx.css" type="text/css"/>                    │
└──────────────────────────────────────┘
みたいな感じで、CSSファイルを外部ファイルとした場合、
その外部ファイルの先頭で以下みたいに文字コードを宣言してあげる。
┌──────────────────────────────────────┐
│@charset "UTF-8";                                                           │
└──────────────────────────────────────┘

ちなみに「@charset "utf8";」だと、うまくいく場合もあれば、
いかない場合もあるので注意。
分類:CSS
CSS/paddingとmarginの違い
2011年12月27日
┌──────┐
│内   padding│margin  外
└──────┘
分類:CSS
前へ 1 … 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 … 156 次へ