0

jQueryで属性変更

jQueryで属性変更するのに、以前はsetというメソッドを使ってました。
jQuery 属性 設定」で検索するとsetというのがいっぱいでてきます。
しかし、現在ではsetに代わってattrというメソッドを使います。
このように使えるので非常に便利。
$("#hoge").attr("href", "http://yahoo.com");
$("#hoge").attr("class", "foo");

それを応用したらこんな感じでフォームの有効設定がjQueryではこのように簡単にできます。

有効にする
有効にしない

HTML
<input name="twitter" type="radio" onclick="inputDisp(false);" /> 有効にする
<input name="twitter" type="radio" onclick="inputDisp(true);" /> 有効にしない
<input name="hoge" size="30" id="hoge" />

JS
function inputDisp(flag) {
if (flag == true) {
$("#hoge").attr("disabled", "disabled");
} else {
$("#hoge").removeAttr("disabled");
}
}

0

wii.jsでwiiリモコンを操作

wiiリモコンで動くサイト(wiiでも閲覧可能)が作りたくて色々調べたらwii.jsってのがありました。

wiiリモコンのイベントリスナーのようなライブラリです。
wiiのインターネットで使われてるブラウザはオペラです。
オペラはmochikitのイベントリスナーでも挙動がおかしかったりしたので不安でしたが、このライブラリは問題なく動作します。(wiiでの話)

オンロード時に読み込む
<body onload="wii.setupHandlers()">

var wiimote = new wii.Wiimote();
wiimote.handleLeft = function() {
alert('左が押されたよ');
return true;
}
wii.addController(wiimote);

はまったのがjsの一行目。
本家のcode samplesが間違えてる。
new Wiimote()ではなくnew wii.Wiimote()が正解です。

十字キーにイベントリスナーを仕込んで、alertの処理を入れてるところになんらかの処理を書いてやればOK。
これを自在に使ってクリックしにくいwiiインターネットをもっと便利なものにしよう。
このへんも参考に

0

jQueryを使ったおしゃれなメッセージボックス

タイトルが非常につけにくかったのですが、フォームなどで送信が完了した時にでてくる「送信しました」みたいなメッセージをちょっとおしゃれに出す方法です。(gmailの出し方に似てるけどちょっと違う)
これによって簡単なフォームでは、完了ページをつくる必要がなくなります。

とりあえず、これがサンプル

適当なコメントを書いて送信ボタンを押すとページ右上に「送信しました」のメッセージがでてきます。
ここでは、ajaxを使って送信していますが、そうでない場合はコードを少し変える必要があります。

たったこれだけのものです。
あまりWEBで見かけなかったのでおいておきます。
ソースは下記の通り

<html>
<head>
<title>完了ページ</title>
<script type="text/javascript" src="./jquery.js" mce_src="./jquery.js"></script>
<script>
clearTimeout();
window.onload = function(){
$("#msg").hide();
}
function test (value) {
$("div#area").load('test.php', {
name: value
});
document.form1.area.value="";
$("#msg").fadeIn("slow");
var id = setTimeout(function() { $("#msg").fadeOut("slow"); }, 2000);
return false;
}
</script></style>
</head><body>
<div id="msg" style="background-color:#000; color:#fff; width:100px; position:absolute;
right:0px; top:0px; text-align:center;">
送信しました
</div>
<form name="form1">
<textarea name="area" rows="6" cols="40"></textarea>
<input type="button" value="送信" onclick="return test(form1.area.value);">
</form>
<div id="area"></div>
</body>
</html>
>

0

prototype.jsとjQueryのDOM操作

javascriptでprototype.jsを最近追随してるのがjQueryです。
jQueryの特徴はやはり簡単、軽いに加えてDOM操作が容易ということがあります。
ノードを取得する方法がCSSと似ていてコーダーやデザイナーでも簡単に操れます。
ノードを取得する際、prototype.jsでは$(“sample”)とするけどjQueryではCSSっぽく$(“#sample”)とします。

prototype.jsの$()は、あくまでdocument.getElementByIDのショートカットなのでdocument.getElementByIDと同じプロパティやメソッドが使えます。

よって下記の二つは同じ意味です。
document.getElementByID("sample").innerHTML="hoge";
$("sample").innerHTML="hoge";

でも、下記のjQueryのやつはエラーがでます。
$("#sample").innerHTML="hoge";
これはjQueryがノードに対して独自のオブジェクトを持たすためです。
もちろんinnerHTMLの代わりになるやつは用意されています。
(html()ってやつ)
jQueyを使うのであればこの独自のメソッドとプロパティを使う事になります。

0

prototype.js

PHPやPerlなどのサーバーサイドのプログラムばかりやってきた僕としては、Javascriptはどうしてもとっつきにくい存在でした。
フォーム関係でJavascriptつかったりAjax系のライブラリ試すくらいで決して得意といえず、おもしろさも感じませんでした。

ただ、最近Javascriptに本腰いれてみるとかなり楽しい。
PHPでDB接続ができた、Perlでファイルの読み書きができた、など一線を越えると言語の習得が一気に加速しおもしろみがでてくるものですが、ことJavascriptに関して言えばその一線はDOM操作かと思ってます。

そんかんやでprototype.jsでDOMを超簡単に扱う時のメモ。
$(‘hoge’)がdocument.getElementById() 関数へのショートカットの役割をしてくれます。

function test1() {
var element = $('div1');
// "内容"が出力される
alert(element.innerHTML);
// "div1"が出力される
alert(element.id);
// "classvalue"が出力される
alert(element.class);
// "新しい内容"が置き換わる
this.element.innerHTML = "新しい内容";
}
<div id="div1" class="classvalue" onclick="test1();">内容</div>

0

キータイプリスナー

はてながリリースしてるキータイプのイベントを取得できるjavascriptのライブラリを入れてみた。
激しく簡単で激しく便利。
mochikitを拡張してつくられたやつなのでmochikitも呼び出してやる必要があります。

たったこれだけで”c”というキーをタイプすると、”c”とかかれたアラートがでます。
addKeybind('c', function(ev) { alert('c')});
KeyTypeListener.js