Home > jQuery Archive

jQuery Archive

jQueryトリビアルメモ2 (prototype.jsとかと共存、jQuery.jsの複数回読み込みについて)

昨日のエントリーがあまりにもひどいので追記。

1.複数回読み込み
jQuery.jsの複数回の読み込み自体は別に問題ないようですね。


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.js"></script>

なんでそんなことがしたかったのかというと、ブログのエントリごとに読み込みたいから。

2.prototype.jsとかとの共存
共存できるんでしょうか?よくは知らない。
ただ、$()の衝突を避けたい場合、


 jQuery.noConflict();

を実行しておけば、


$("div").fadeTo("fast", 0.5);

とする代わりに、


jQuery("div").fadeTo("fast", 0.5);

と書けます。で、prototype.jsを読み込んでいる場合、$()はprototypeの仕様で使えます。

あるいは


 var j = jQuery.noConflict();

としておけば、


j("div").fadeTo("fast", 0.5);

でOKです。

以上

ネタに困ったらjQuery

jquery.jsを同一ページで何回も読み込んだらどうなるんだろう?
というわけでやってみます。

大丈夫なようです。

以上

jQueryでFormのバリデーション

jQueryの便利そうなプラグイン。ValidationAide
フォームの入力値の妥当性を検査してくれます。

使い方:
1.フォームをかく


<form id="Test">
	<div id="ClientValidationSummary"></div>
	<input type="text" id="name" title="名前" class="textbox validator-required" /><br />
	<input type="text" id="mail" title="メール" class="textbox validator-required validator-email" />
	<input type="submit" value="Submit" />
</form>

入力値にエラーがあった場合、ClientValidationSummaryのところに要約(サマリ)が表示されます。
titleで指定された文字列が要約表示時などに項目名として使われます。
バリデートしたい部品のclassに上記のような指定をします。
上記の場合、「名前」のところは「テキストボックス」「入力必須」で、
「メール」のところは「テキストボックス」「入力必須」「メールアドレス」でバリデートしてます。
validtor-emailとしておけば、aaa@aaa.comのような有効なメールアドレスの形式かどうかを検査してくれます。
表示されるメッセージをデフォルトから変更したい場合は、titleに” – “区切りで書きます。マイナスの前後にスペースが要るので注意。
例えば「title=”名前 – 名前を入力してください”」とすると、項目が「名前」、メッセージが「名前を入力してください」になります。
マウスをオーバーラップさせたときにも表示されてしまうのが難点?

2.初期化


$(function() {
	$("#Test").validationAideEnable();
});

formのIDを指定して、validationAideEnable()を実行します。
各部品の横にメッセージを表示したい場合などは、パラメータをJSON形式で渡します。


$("#Test").validationAideEnable(null, {showInlineMessages:true, inlineShowSpeed:"fast"});

第一引数は独自ルールを定義する場合に使います。
その辺の詳しいところはダウンロードしたファイルのdemoのソースを見てください。

3.サンプル

以上

jQuery トリビアルメモ 1

ドラクエIV、V、VIもDSで出るようですな。

jQueryの簡単な話。

1.並列と直列と速さと


$("#hoge").html("aaa");
$("#hoge").click(function(){alert("hogehoge");});

より


$("#hoge").html("aaa").click(function(){alert("hogehoge");});

の方が速い。(FireFoxの場合)
そりゃそうだ。

2.IDとクラスと速さと
“bar”っていうCSSクラスを持つ要素が複数あって、fooってIDはひとつしかない場合。(もちろんfoo2,foo3,などのIDはイパイある)


$("#foo", ".bar").html("aaa");

より


$("#foo").html("aaa");

の方が速い。(FireFoxの場合)
クラスで絞り込んだほうが速いかな?とちょっと思ったんだけど。
他の組み合わせは知らない。

3.blockUI
簡単なので書いとく。
ブラウザ全体をブロックしたいとき便利なプラグイン。
ブロック開始時に$.blockUI()を呼んで、解放時に$.unblockUI()を呼ぶだけ。
“Please Wait..”ってなって、操作できなくなる。ajaxなどでの読み込み待ちに便利。
メッセージは$.blockUI(“なんかめっせーじ”)で指定できる。

以上

jQueryのajax

jQueryとCakePHPの異種格闘技戦。jQueryが勝っとる。これからはjQueryか。prototypeはそれ自体が汎用的な単語のため、フェアな勝負にならない。

そういうわけでjQueryのajaxを使ってみて(とりあえず挫折)したのでメモ。(いや、ajaxを使うというだけなら簡単。使い方が悪いだけ。)
$.ajax()を使えばいい。


$.ajax({
    url: 'hogehoge.htm',
    type: 'POST',
    dataType: 'json',   // xml、 html、script、json
    data: params,
    timeout: 1000,
    error: function(){
        // エラー時
        alert('Error');
    },
    success: function(htm){
        // コールバック
    }
});

上記コードで’hogehoge.htm’にpostでparams(JSON)を送ったことになります。
dataはあってもなくても良いような雰囲気です。
ただし、上記のような単純なものはもうちょっと簡単に書けます。


$.post("hogehoge.htm",
          {"key":params},
           function(){});

paramsは送りたいデータです。json形式で渡すのが良いらしい。functionはコールバック関数。メソッドをgetにしたい場合は、$.getでいい気がする。$.postも内部でajax()を呼んでいます。

以上

jQueryのjTip (ツールチップ)

DSでオープンソース。そのうち手を出してみたいですな。

ブラウザでツールチップを出したいと思い、jQueryのjTipっていうプラグインを使ってみたのでメモ。ここの「DownLoad This Example」からダウンロードしたけど、それでいいんだろうか?

1.初期化
jtip.jsを読み込めば初期化されるが、自分の初期化プロセスに組み込むときは


JT_init();

を呼べばいいと思う。たぶん。

2.使い方
ツールチップを出したい部分をaタグで囲む。表示したい内容を返すページのURLをhrefに書く。?以降は多分ウインドウ幅。
idはちゃんと指定する。このidで要素を取得して、その近くにツールチップを出すっぽい。
同封のglobal.cssを使う場合はclass=”jTip”。この場合、同封のimagesを使うとロード中の画像とか出てカッコイイ。Ajaxです。
nameで指定したものがツールチップのタイトルになる。


<a href="hogehoge.htm?300" id="foo" class="jTip" name="bar">ツールチップ</a>

3.CakePHP
CakePHPで使ってみた。まあ、別にどうということはないけど。ちょっとはまったことは、hrefのURL。CakePHPとかの場合、URLが「コントローラ名+メソッド名+引数」などになって、URL相対指定するとわけがわからないURLになってしまう。
ということで絶対指定すればいいわけだが、あるいは「$this->webroot」をビューでechoすれば、ルートからのURLが得られます。


webroot = "<?php echo $this->webroot; ?>";
$(function(){
    $("#tooltip").html('<a href="'+webroot+'hogehoge/hoge?300" id="foo" class="jTip" name="bar">ツールチップ</a>');
});

<div id="tooltip"></div>

以上

jQueryのJSONのプラグインのtoJSONとPHPのJSONの

寝ているときの体勢で、性格がわかるとか。ほんまかいな。下の絵の左から順に簡単に和訳(誤訳)すると、
Foetus:対外はともかく、心はナイーブ。恥ずかしがり屋。
Log:社交的。だまされやすい。
Yearner:疑り深く、優柔不断。一度決心するとすごい。
Soldier:物静かで内気。自分にも他人にも厳しい。
Freefall:社交的だが無作法。神経質。批判とか嫌い。(意味わからん)
Starfish:人の話を良く聞き、助けてあげる。よってよい友達多い。目立ちたがらない屋。

以下、JSONの話。(エントリー分けたほうがいいんじゃないかとも思う。)
PHPとjavascriptのやり取りのデータをどうしようかと考えた結果、とりあえずJSONでいいんじゃないかという結論にいたり、そうしてみてます。
PHPからはJSON形式でjavascriptタグ内に出力して、javascriptからはJSON形式の文字列をpostでPHPへ。
そうすると、必然的にPHP側で配列→JSON文字列、JSON文字列→配列という変換と、javascrit側で配列(オブジェクト)→JSON文字列という変換が必要になります。(必然的に必要)

PHP側:Jsphonを使う。


$json = '{"hoge":"hogehoge", "foo":"bar"}';

$decoded_array = Jsphon::decode($json);   // $decoded_array = array("hoge"=>"hogehoge", "foo"=>"bar")

$json_returns = Jsphon::encode($decoded_array); // $json_returns = '{"hoge":"hogehoge", "foo":"bar"}'

javascript側:jQueryのプラグインのtoJSONを使う。


json = {"hoge":"hogehoge", "foo":"bar"};

json_string = $.toJSON(json);   // json_string = '{"hoge":"hogehoge", "foo":"bar"}'

まあ、他にもいろいろやり方はあるでしょうが、私の現状はこうです。

以上

Home > jQuery Archive

Search
Feeds
Meta
 合計:016018
 今日:0016 昨日:0168

Return to page top