MW211 EXIT

devlog
jQuery/Ajax入門(1)
2011年11月25日
Ajaxがよくわからないので、わかり次第記録していく(jQueryを利用しちゃう)。

まずは、部分リロードの方法。
┌──────────────────────────────────────┐
│<meta http-equiv="Pragma" content="no-cache"/>                              │
│- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - │
│<script type="text/javascript" src="js/jquery….js"></script>               │
│- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - │
│<script type="text/javascript">                                             │
│$(function(){                                                               │
│  $("button").click(function(){                                             │
│    $("#ajax").load("index.php #ajax");                                     │
│  })                                                                        │
│});                                                                         │
│</script>                                                                   │
│- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - │
│<button>最新の状態を取得</button>                                           │
│- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - │
│<div id="ajax">                                                             │
│<?php echo date('YmdHis');?>                                                │
│</div>                                                                      │
└──────────────────────────────────────┘
ボタンを押すことによって、「index.php」を画面ごとリロードしていたものを
部分的にリロードしたい場合の例。

div等のID(この場合は「ajax」)で範囲指定した部分のみ上書される。
この例だと、ボタンを押すごとに、時刻文字列のみが更新される。

キャッシュを利用されると時刻文字列に変化がおきないので
「<meta http-equiv="Pragma" content="no-cache"/>」をつける必要があるみたい。

※注意:訂正があります、jQuery/Ajax入門(2)を必ず読んでください
分類:jQuery
jQuery/チェックボックスがチェックされているか
2011年11月24日
「id="abc"」のチェックボックスがチェックされている場合に「true」、
チェックされていない場合に「false」を取得したい場合は、以下のいずれかで。

まずは、以下が推奨。
┌──────────────────────────────────────┐
│$('#abc').prop('checked')                                                   │
└──────────────────────────────────────┘
他にもいろいろある。
┌──────────────────────────────────────┐
│$('#abc').is(':checked')                                                    │
├──────────────────────────────────────┤
│$('#abc:checked')[0]                          ($('#abc:checked').length > 0)│
├──────────────────────────────────────┤
│$(':checkbox#abc:checked')[0]        ($(':checkbox#abc:checked').length > 0)│
├──────────────────────────────────────┤
│$('#abc').attr('checked')                           ※attrとpropの違いに注意│
├──────────────────────────────────────┤
│$('#abc').get(0).checked                                                    │
└──────────────────────────────────────┘
分類:jQuery
jQuery/入力チェック入門編
2011年11月15日
jQueryがよくわからないので、初歩的なところから外堀を埋めてみようと思う。

まずは、以下みたいな入力欄があって、それを全部チェックしたい場合(の基礎)。
┌──────────────────────────────────────┐
│<input type="text" name="xxxx1" value=""/>                                  │
│<input type="text" name="xxxx2" value=""/>                                  │
│<input type="text" name="xxxx3" value=""/>                                  │
│<input type="text" name="xxxx[]" value=""/>                                 │
│<input type="text" name="xxxx[]" value=""/>                                 │
│<input type="text" name="xxxx[]" value=""/>                                 │
└──────────────────────────────────────┘

チェック内容はその場に応じてなので、alert()で値をダイアログ表示する方法を。
┌──────────────────────────────────────┐
│$("input[type=text][name^=xxxx]").each(function() {                         │
│  alert($(this).val());                                                     │
│});                                                                         │
└──────────────────────────────────────┘
「$(this).val()」(=値)の内容をチェックするばよい。

ちなみに「.val()」を使わずに「.value」を使いたい場合には
「$(this).value」ではなく、「$(this)[0].value」だから注意。
分類:jQuery
jQuery/チェックボックスの必ずチェックチェック
2011年11月07日
チェックボックスのある画面で、どれかにチェックしてくれないと困るので
JavaScriptでエラーメッセージを出してガードする場面がある。

┌──────────────────────────────────────┐
│var check_flag = false;                                                     │
│var inputs = document.getElementsByTagName("input");                        │
│for (var i = 0; i < inputs.length; i++) {                                   │
│  if (inputs.item(i).type == "checkbox") {                                  │
│    if (inputs.item(i).getAttribute("checked")) {                           │
│      check_flag = true;                                                    │
│    }                                                                       │
│  }                                                                         │
│}                                                                           │
│if (!check_flag) {                                                          │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
ま、こんな感じで、inputタグのcheckboxを全検索して、
フラグを使って判別したりする。

これがjQueryだとかなり簡単

inputタグ全部をチェックする場合(一応、例として)。
┌──────────────────────────────────────┐
│if (!$("input:checked")[0]) {                                               │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

inputタグのcheckboxを全部チェックする場合(最初の例と同等、これでも十分か)。
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox]")[0]) {                                │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

さらにname属性が「xxxx~」に絞り込む場合。
#「xxxx1、xxxx2…」「xxxx_1、xxxx_2…」、「xxxx[]」とかが該当
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox][name^=xxxx]")[0]) {                    │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
これでも、かなり簡素にできる。
分類:jQuery
jQuery/ボタンが押されたイベント
2011年11月03日
ボタンを押した場合に、そのボタン名をダイアログに表示する方法。
┌──────────────────────────────────────┐
│$("input").click(function() {                                               │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

一歩踏み込んで、submitボタンに限定する場合。
┌──────────────────────────────────────┐
│$(":submit").click(function() {                                             │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

さらに踏み込んで、「実行」という名のsubmitボタンに限定する場合。
┌──────────────────────────────────────┐
│$(":submit[value='実行']").click(function() {                               │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

なので以下のような実行確認JavaScript文を、以下のように書き換えることができる。
┌──────────────────────────────────────┐
│var inputs = document.getElementsByTagName("input");                        │
│for (var i = 0; i < inputs.length; i++) {                                   │
│  if (inputs.item(i).type == "submit") {                                    │
│    if (inputs.item(i).value == "実行") {                                   │
│      inputs.item(i).onclick = (function() {                                │
│        if (!confirm("実行していいですか?")) {                             │
│          return false;                                                     │
│        }                                                                   │
│      });                                                                   │
│    }                                                                       │
│  }                                                                         │
│}                                                                           │
├──────────────────────────────────────┤
│$(":submit[value='実行']").click(function() {                               │
│  if (!confirm("実行していいですか?")) {                                   │
│    return false;                                                           │
│  }                                                                         │
│});                                                                         │
└──────────────────────────────────────┘
分類:jQuery
JavaScript/getElementByIdの代替
2011年11月02日
「prototype.js」における「$」は、「document.getElementById()」と同じ。
なので、以下のように関数定義してしまえば、同じように使えてしまう。
┌──────────────────────────────────────┐
│function $(inId) {return document.getElementById(inId);}                    │
└──────────────────────────────────────┘

こうすれば、以下のように書き換えが可能となる。
┌──────────────────────────────────────┐
│document.getElementById("ID名").value = "値";                               │
├──────────────────────────────────────┤
│$("ID名").value = "値";                                                     │
└──────────────────────────────────────┘

ところで、「jQuery」の場合は若干違う。
┌──────────────────────────────────────┐
│$("#ID名")[0].value = "値";                                                 │
└──────────────────────────────────────┘
上記のように、ID名の前に「#」が必要で、
さらにインデックスとして「[0]」が必要だ。

なお、インデックスの代わりに「get()」メソッドを使う方法もある。
┌──────────────────────────────────────┐
│$("#ID名").get(0).value = "値";                                             │
└──────────────────────────────────────┘

また、valueだけだったら、「val()」メソッドを使えば「[0]」を不要にできる。
┌──────────────────────────────────────┐
│$("#ID名").val("値");                                                       │
└──────────────────────────────────────┘
上記は代入(設定)の場合、参照だけだったら、以下の通りとなる。
┌──────────────────────────────────────┐
│$("#ID名").val();                                                           │
└──────────────────────────────────────┘
分類:JavaScript、jQuery
前へ 1 2 3 4 5 6 7 8 9 10 次へ