人気ブログランキング |
タグ:jQuery ( 10 ) タグの人気記事
(jQuery)同じクラス名のオブジェクトを一斉操作
jQueryでは、セレクタとして #id名 を使うことが多いかもしれませんが、クラスを指定することも出来ます。
クラスは .クラス名 で指定すると、そのクラス名のものを配列として扱います。

以下のようなクラス名 test,test2 を持つDIV要素とinputボタンがあるとします。
<input type="button" id="chgcolor" value="色チェンジ" >
 
<div id="test01" class="test">aaa</div><br>
<div id="test02" class="test">bbb</div><br>
<div id="test03" class="test">ccc</div><br>
<div id="test04" class="test2">eee</div><br>


inputボタンを押下すると、testのクラス名のDIVの文字色を赤に変えるという操作をするには、jQueryを使うと以下のように出来ます。
$(function(){
$("#chgcolor").click(function(){ //inputボタン押下時のイベントハンドラ
//testクラスを持つ要素をループ
$(".test").each(function(){
//文字色変更
$(this).css("color", "red");
});
 
/* 以下のようにもできる。
var selcts = $(".test");
for ( var i=0 ; i<selcts.length ; i++){
//文字色変更
$(selcts[i]).css("color", "red");
}*/

});
});

by Jehoshaphat | 2012-11-18 22:01 | Webがらみ
(JavaScript)Uniformを使うとselect要素の値がjQueryから操作できない
(Ajax,PHP)Ajaxを使って入力フォームに戻ったときに値を再セットするで入力フォームに戻ったときに値を再設定する方法を書きました。
しかし、フォームのデザインを良くするために、Uniformを使うと、select タグの表記が変わりません。
(Uniformについては、(HTML)Uniform 入力フォームの見栄えを良くするスクリプト+CSS 参照)

Firebugで見ると、実際のselectタグは変わってるようなんですが、Uniformでタップして表示している部分が変更されないようです。
(Uniformはselectタグの実体は非表示にし、selectedが付いているテキストを span タグ内で表示するような仕様になっています。)

ということで、値をフォームに再セットするときに、Uniform側のテキストも変更するようにするため、下記のようにコードを直してみました。
(uniformのid名は,既存のid名の前に、"uniform-" という文字列をつけるだけという仕様を使ってます。また、各タグのid名とnameの値は同じにしています。)
function SetValue(){
$.getJSON(
"GetInputData", //アクセス先
function(data,status){
if ( data ){
for (var key in data) {
$("*[name=" + key + "]").val(data[key]) ;
//selectタグなら
if ( $("*[name=" + key + "]")[0].nodeName == "SELECT" ){
//uniform
$("#uniform-" + key).children("span").html( $("*[name=" + key + "]").children(':selected').text() );
}
}
}
}
);
}

by Jehoshaphat | 2012-11-18 21:36 | Webがらみ
(jQuery)ID名,セレクトタグの選択値の取得方法
jQueryで、$(this) を使って操作していると、こいつのIDは何だっけ?って時があります。
以下のようにすれば id 名を取得できるようです。
$(this).attr("id");

要は、idも属性の一つということですね。


また、selectタグで、現在選択している値を取得するには以下のようにすればいいようです。
$("#hoge").val()
$('#hoge').children(':selected').val();



値ではなく、テキストはvalを text に変えればいいようです。
$("#hoge").text()
$('#hoge').children(':selected').text();


参考:
jQueryでオブジェクトのid名を取得する方法 for WEB屋
jQueryによるフォーム部品操作のレシピ - むつらつれづれ
by Jehoshaphat | 2012-11-18 20:42 | Webがらみ
(JavaScript)jQueryで選択した要素のタグ名を取得したい
jQueryでidやnameを使って要素を選択しますが、選択した要素のタグを知る方法です。
以下のようにすればいいようです。


●HTML側
<select id="hoge" name="hoge">
<option value="1"> hoge1</option>
<option value="2"> hoge2</option>
<option value="3"> hoge3</option>
</select>
<input type="button" onclick="return getTagName()" value="タグゲット">



●JavaScript側
function getTagName(){
alert( $("#hoge")[0].nodeName );
}

実行結果は "SELECT" となります。


参考:
javascript or JQuery でタグ名(node名)取得 メモ | MatsudaPress
by Jehoshaphat | 2012-11-18 00:33 | Webがらみ
(JavaScript)jQueryを使って外部JavaScriptを動的に読み込む
Ajaxなページを作っていると、JavaScriptファイルも動的に読み込ませたくなります。
jQueryを使うと簡単に外部JavaScriptファイルを読みこませるできます。

こんな感じです。
$.getScript("./test.js", function(){
});



もし、読み込んだ後に、処理したければコールバック関数に処理を書いてやればOKです。
$.getScript("./test.js", function(){
alert("読み込み完了");
hoge();
});


jQueryってほんと便利ですね。

参考:
[jQuery] 外部JavaScriptファイル読込みに関する考察|A Day In The Boy's Life
逆引きjQuery:非同期でJavaScriptのコードを取得するには? - @IT
by Jehoshaphat | 2012-11-12 01:54 | Webがらみ
(JavaScript)連想配列のループ
JavaScriptにはPHPやC#で言う所のforearch構文の代わりに、for in 構文でループが出来るようです。
こんな感じ。
var arytest = { "name" : "安部礼司", "age":39 , "nickname":"平均", "bloodtype":"A" };
for (var key in arytest) {
if ( key == "bloodtype" ) break;
alert("キー:" + key + " 値:" + arytest[key]);
}



ちなみに、jQueryを使って配列をforeach的に処理することも可能なようです。
var arytest =  { "name" : "安部礼司", "age":39 , "nickname":"平均", "bloodtype":"A" };
jQuery.each(arytest, function(key, value) {
if ( key == "bloodtype" ) return false; //ループを抜けるときはfalseを返す。
alert("キー:" + key + " 値:" + value);
});


参考:
JavaScript の配列と連想配列の違い - IT戦記
JavascriptでPerlやPHPのforeachするスクリプトの書き方 - Layer8 Reference
jQuery.each(object, callback) - jQuery 日本語リファレンス
jQuery for each 連想配列 - mmj
by Jehoshaphat | 2012-11-12 00:51 | Webがらみ
(JavaScript)jQueryでテキストボックスに入力ヒントを表示する
最近、入力フォームのテキストボックスに予めヒントの文字列が入っており、フォーカスが入るとヒントが消え、テキストが入力できるようになるみたいなWEBが増えています。
それを jQuery を使って実装してみました。

参考にさせてもらったのは、フォームに入力ヒントを与えるjQuery - YATのBlog非フォーカス時にヒントの表示されるテキストボックス - jQuery 日本語リファレンスです。

HTML側はこんな感じです。
<form  method="post" action="Check" id="input">
<!-- title属性にヒントとなる文字列を入れておく -->
<input type="text" title="備考を入力。" id="memo" name="memo" class="input_hint">
<input type="submit" value="送信">
</form>



CSS側
/*ヒント用スタイルシート*/
input.input_hint{
color:#666666;
}



JavaScript側
$(function(){
//テキストボックスの値に、title属性に設定しているヒントを表示
$("#memo").val( $("#memo").attr('title') );
textFill($('#memo'));

//フォーカスによって、テキストボックスの値を変えるための関数。
function textFill(input){
var originalvalue = input.attr('title');
input.focus( function(){
//フォーカスが入ったとき
if( $.trim(input.val()) == originalvalue ){
//CSSを直接変更するという方法もあるが、今回はヒント用スタイルシートを外す設定に
input.removeClass("input_hint");
//値をクリア
input.val('');
}
});
input.blur( function(){
//フォーカスが外れたとき
if( $.trim(input.val()) == '' ){
//値が入力されなかったら再度ヒント表示
input.val(originalvalue);
input.addClass("input_hint");
}
});
input.parents('form:first').submit(function(){
//フォース送信時に、ヒントの内容を送らないようにする
if(input.val()==input.attr('title')){
input.triggerHandler('focus');
}
}).end()
}
});

by Jehoshaphat | 2012-11-11 21:47 | Webがらみ
(JavaScript)jQueryを使って文字列の前後の空白を削除
.NetやJavaだと文字列の前後の空白を取り除くための trim メソッドがあるんですが、JavaScriptにはどうやら無いようです。

JavaScriptライブラリの jQuery を使うと、trim が使えるようですね。
こんな感じです。
$.trim(" ほげ ");

半角、全角、タブ、改行が削除の対象となるようです。

JavaScirptだけでtrimをしようとすると、下記のようにすればいいようです。
function trim(str) {
return str.replace(/^[  \t\r\n]+|[  \t\r\n]+$/g, "");
}


参考:
jQuery 開発者向けメモ - リファレンス
浮浪プログラマの始末書:[JavaScript] 文字列空白除去(trim)
by Jehoshaphat | 2012-11-07 00:02 | Webがらみ
(PHP,HTML)AjaxUpload 画像選択時にアップロードしサムネイルを表示
HTML5になるとローカルファイルをブラウザにドラッグしてアップロードできるで書いたように、HTML5対応でないブラウザを考慮すると、従来通りファイル選択ダイアログから画像を選ばしてアップロードするというアプローチになります。

しかし、通常はアップロードファイルをファイル選択してもブラウザにはファイル名が出るだけです。

今回やってみるのは、ファイル選択したら画像を非同期(Ajax)でアップロードし、サムネイルを表示する方法です。


jQuery と AjaxUpload を使います。

AjaxUploadは元来、http://valums.com/ajax-upload/で公開されたらしいのですが、現在は FileUploader という新しいものになっているようです。

で、解説サイトAjax Upload - ZURB Playground - ZURB.comからAjaxUploadをダウンロードします。

使い方は下記のような感じです。

●クライアント側
・HTMLファイル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="ajaxupload.js"></script>
</head>
<body>
<!-- ↓AjaxUploadを使うためのスクリプト。画像を非同期でアップし、完了したらサムネイル表示 -->
<script type="text/javascript" charset="utf-8">
$(function(){
//サムネイル表示するimgタグを ID 名で指定(jQueryを使ったセレクタ)
var thumb = $('img#thumb');
var imagefilename = $("#imagefilename");
//AjaxUploadクラスを生成し、参照ボタン押下時の処理を定義。第一引数は参照ボタンのID名。
new AjaxUpload('imageUpload', {
//formタグのID名 newHotnessForm を実行
action: $('form#newHotnessForm').attr('action'),
name: 'image',
//アップロード中は loading スタイルシートを利用
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
//アップロード完了時の処理
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
//img要素表示
thumb.css("display", "inline");
//hiddenに画像パス指定
$("#imagefilename").attr("value" , response);
/*デバッグ。Ajaxで返された値を表示。*/
$("#res").html(response);
}
});
<!-- ↓クリアボタン押下時の設定 -->
$("#pic1_clear").click(function(){
thumb.removeAttr('src');
thumb.css("display", "none");
imagefilename.attr("value" , "");
});

});

</script>

<form id="hoge" method="post" action="hoge.php"><!-- ←メインのフォーム -->
氏名:<input type="test" id="name" name="name" size="20"><br>
写真1:<input type="file" id="imageUpload" name="imageUpload" size="20"><br>
<!-- ↓に上記参照ボタンで選んだ画像ファイルが表示される。 -->
<div class="preview">
<img id="thumb" width="320px" height="240px" class="no_display" >
<!-- 参照ボタンで画像選択時に、アップロードされた画像パスを保持し、メインのフォーム先に送信 -->
<input type="hidden" id="imagefilename" name="imagefilename" >
</div>
<!-- デバッグ用。Ajaxで返された値を表示 --><div id="res"></div>
<input type="submit" value="登録">
</form>

<!-- ファイル選択参照ボタン押下時に動くフォーム -->
<form id="newHotnessForm" method="post" action="./upphp.php">
</form>

</body>
</html>



・スタイルシート
.loading{
background-image: url("./images/load.gif")
}
.no_display{
display: none;
}


HTMLの規約上、formはネストさせてはいけないので、メインのformとは別に定義する必要があります。(ネストさせるとうまく動きませんでした。
JavaScriptでAjaxUploadのインスタンスを作成し、参照ボタンでファイルを選んだらサーバに送信し、その後、サーバからレスポンスで画像ファイルへのパスを取得し表示します。
ただ、上記の方法だとメインフォーム送信時に、参照ボタンで選んだ画像ファイルを送ることはできません。
なので、AjaxUploadでアップロードされたファイルパスをhiddenに持ち、そのアップロードファイルパスをメインフォーム送信先に送るような仕組みにしています。


●PHPサーバ側(upphp.php)
$uploaddir = './uploads/';  
//画像更新時に発生するブラウザキャッシュの問題を回避したければ、timme() でUnixタイムスタンプをつけたほうが良いかも。
$file = $uploaddir . basename($_FILES['image']['name']);
 
//画像かどうか
$imginfo = getimagesize( $_FILES['image']['tmp_name'] );
if ( $imginfo[2] == IMAGETYPE_JPEG || $imginfo[2] == IMAGETYPE_GIF
|| $imginfo[2] == IMAGETYPE_PNG ){

//画像の時
if (move_uploaded_file($_FILES['image']['tmp_name'], $file)) {
echo $uploaddir . $_FILES['image']['name'];
} else {
echo $uploaddir . "err.jpg";
}
 
}else{
//画像じゃないとき
echo $uploaddir . "err_nonimg.jpg";
}

PHP側では送信されてきたファイルが画像ファイルかどうか判断し、画像ファイルならアップロードディレクトリにコピーします。
そして、ファイルパスをクライアントに返します。

ただ、一回画像をアップロードし、再度参照ボタン押下して別画像に更新しようとすると、ブラウザキャッシュのせいで、画像自体はアップロードされているものの、ブラウザ表示上は変わらない現象が発生しました。(HTTPヘッダでキャッシュ無効にしてもダメでした。)
なので、ファイル名にUnixタイムスタンプを含めるなどの手法を取り、ファイル名が同一にならないようにしたほうが良いかもしれません。


参考:
画像アップロード時にjQueryでサムネイルを表示する方法 | Web活メモ帳
AJAX Multiple File Upload Form Using jQuery
php で画像ファイル形式を判別する方法 - ブックマクロ開発に
PHP関数講座:getimagesize -- そふぃのphp入門
by Jehoshaphat | 2012-10-22 01:31 | PHP開発
(JavaScript)jQueryでAJAX
(JavaScript)ページの一部を動的に置き換える(prototype.js) でprototypeを使ったAjax通信方法を書きました。

今回はjQueryを使った方法です。

AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | QUALL - blogに、PrototypeとjQueryでのAjax構文の比較がなされてました。

ほぼコピペですが、jQueryを使った場合,下記のような感じとなります。

●HTML、JavaScript側

<script type="text/javascript">
$(function(){
$("#evnt").click(function(){
//AJAXを使い、サーバにリクエス。レスポンスを表示。
$.ajax({
url : "/test.php", //リクエス先
type : "post", //GETかPOSTか
data : ({ prm1: $("#paramtext1").val() , prm2: $("#paramtext2").val() }), //パラメータ
success : function(request){
$("#rest").html(request);
}
});
});
});
</script>
 
<input type="text" id="paramtext1">
<input type="text" id="paramtext2">
<input type="button" id="evnt" value="実行">
<div id="res"> </div>





●PHP側(test.php)

foreach ($_POST as $key => $value) {
echo $key . "は" 0 $value . "です<br>";
}

by Jehoshaphat | 2012-10-22 01:27 | Webがらみ