タグ:Javascript ( 20 ) タグの人気記事
(JavaScript)IE環境でUniform Selectボックスを表示するときの注意
IEで Uniform の Select Option を使う時に、Optionに表示する文字列が短いと、下図のようにドロップダウンしない領域が出てきます。(IE7,8で確認)
(Firefox,Chromeはそのようなことは有りません)
e0091163_13532061.jpg


その場合、以下のように、select のスタイルシートで、widthを指定すると回避できるようです。
(165ピクセルくらいがちょうど良いです。)
<select  style="width:165px">
<option value="1">abc</option>
<option value="2">hgc</option>
<option value="4">rebc</option>
</select>


widthを指定すると、以下のようにドロップダウンメニューの幅が広がります。
e0091163_13532677.jpg

[PR]
by Jehoshaphat | 2012-11-24 23:52 | Webがらみ | Trackback | Comments(0)
(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");
}*/

});
});

[PR]
by Jehoshaphat | 2012-11-18 22:01 | Webがらみ | Trackback | Comments(0)
(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() );
}
}
}
}
);
}

[PR]
by Jehoshaphat | 2012-11-18 21:36 | Webがらみ | Trackback | Comments(0)
(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によるフォーム部品操作のレシピ - むつらつれづれ
[PR]
by Jehoshaphat | 2012-11-18 20:42 | Webがらみ | Trackback | Comments(0)
(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
[PR]
by Jehoshaphat | 2012-11-18 00:33 | Webがらみ | Trackback | Comments(0)
(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
[PR]
by Jehoshaphat | 2012-11-12 01:54 | Webがらみ | Trackback | Comments(0)
(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
[PR]
by Jehoshaphat | 2012-11-12 00:51 | Webがらみ | Trackback | Comments(1)
(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()
}
});

[PR]
by Jehoshaphat | 2012-11-11 21:47 | Webがらみ | Trackback | Comments(0)
(JavaScript,ActiveX)WSHを使ってコンピュータ名とWindowsユーザ名を取得する

イントラネット向けのWEBサイトを作っており、Windowsユーザ名を取得する必要が出てきました。
(アクセス元IPアドレスを収集してもいいんですが、それだとターミナルサーバ使っている場合にどのユーザかわからないので。。。)

クライアントのブラウザはIEで統一しているので、ブラウザ上でJScriptを走らすことで取得できます。

以下のような感じです。

//ユーザ名、コンピュータ名取得
if(navigator.appName=="Microsoft Internet Explorer"){
try {
var objNetWork = new ActiveXObject("WScript.Network");
alert("コンピュータ名" + objNetWork.ComputerName);
alert("ユーザ名" + objNetWork.UserName);
//JQueryを使ってinput要素のvalueに値追加
$("#computer_name").val(objNetWork.ComputerName);
$("#win_user_name").val(objNetWork.UserName);
objNetWork = null;
} catch(e) {
//安全が保障されないActiveXを生成する際に例外が投げられる
alert('セキュリティ設定が高すぎるため実行ない。');
}
}

しかし、デフォルトの設定で上記を走らしても、動きません。
IEで以下の設定をする必要があります。

インターネットオプション→セキュリティタブで、上記スクリプト使用サイトが、ローカルイントラネットもしくは、信頼済みサイトゾーンにいることを確認。
属しているゾーンの "レベルのカスタマイズ" で、"スクリプトを実行しても安全だとマークされていない ActiveX コントロールの初期化とスクリプトの実行" を有効にする。


しかし、IE以外では動かないのが難点ですね。

参考:
ActiveXが利用出来ない場合の見分け - まっしかく備忘録
上級ユーザー向けの Internet Explorer セキュリティ ゾーン関連のレジストリ エントリ
訪問者のブラウザやOS情報を取得、ブラウザ判定|window.navigatorオブジェクト|JavaScript/DOM
[PR]
by Jehoshaphat | 2012-11-11 07:00 | Webがらみ | Trackback | Comments(0)
(JavaScript)空文字判定を行う簡単な方法
空文字判定を行う簡単な方法ですが、JavaScriptでは if 分の中で、空文字を評価すると false になります。
ということで、下記だけで判定が可能です。

var str="";
if ( str ){
alert("空文字でない");
}else{
alert("空文字である");
}


ちなみに、[JavaScript] オブジェクトがnullやundefindでないか評価する。 - うなの日記 を参考にさせてもらったところ、値ごとでifの評価をすると以下のようになるようです。



値 :ifで評価した結果
Object :true
undefined:false
null :false
0 :false
1 :true
-1 :true
""(空文字列):false
"a" :true
配列 :true
ハッシュ :true


例えば0かどうかを判断するときに変数だけで評価できるなどお手軽ですが、明示的に比較対象を指定していたほうが良い時もあるので、よく考えて使わないといけませんね。
[PR]
by Jehoshaphat | 2012-11-11 00:38 | Webがらみ | Trackback | Comments(0)