JavaScript本格入門を読む・11（最終回）
はー最終回。感慨深いですなぁ
クロスドメイン環境でAjax通信を行う
$(function(){
$('#disp').click(function(){
$.getJSON(
'http://b.hatena.ne.jp/entry/jsonlite/?callback=?',
{url:$('#url').val()},
function(data){
$('#count').html(data.count);
for (var i =0; i<data.bookmarks.length; i++){
var bm = data.bookmarks[i];
$('result').append(
$('<li></li>').append(
$('<a></a>')
.attr('href', 'http://b.hatena.ne.jp/' +bm.user)
.html(bm.user + '' +bm.timestamp)
)
);
}
}
);
});
});
（中略）
<form name="fm">
<label>URL:
<input type="text" id="url" name="url" size="50"
value="http://www.nicovideo.jp" />
</label>
<input type="button" id="disp" value="検索" />
</form>
<hr />
<span id="count">-</span>件ブクマされています。
<div id="result"></div>確かにクロスドメイン処理？はしなくてすんだけど、書くの緊張するのかわりない。
あと閉じカッコおおすぎやで・・・数何回も数えてしまった・・・
9-3.jQuery UI/jQueryプラグインを活用する
アコーディオンパネルを実装する
えと、まずはjQueryUIをゲットしないとか。
Download Builder | jQuery UI
$(function(){
$('#accordion').accordion({header:'h3'});
});
（略）
<div id="accordion">
<div>
<h3><a href="#">ニコニコ動画</a></h3>
<div>動画を見てコメントをつけて楽しむ</div>
</div>
<div>
<h3><a href="#">ニコニコ生放送</a></h3>
<div>コメントでリアルタイムに繋がる</div>
</div>
<div>
<h3><a href="#">ニコニコ静画</a></h3>
<div>静止画で遊べる</div>
</div>
<div>
<h3><a href="#">ニコニコチャンネル</a></h3>
<div>3,000ch以上の公式動画</div>
</div>
<div>
<h3><a href="#">ニコニコアプリ</a></h3>
<div>厳選されたゲームが基本無料で遊べる</div>
</div>
<div>
<h3><a href="#">ニコニコ大百科</a></h3>
<div>みんなでつくる百科事典</div>
</div>
</div>あこーでぃんぐ
うｐしてみた。これはいいですな！！！かっこいいですぞ！！！
しかもすごい簡単になった。昔こういうのをひたすらif文で書こうとしてたなー
こんな便利なものがあるなんて。
ユーザー入力の検証機能を実装する
えーとまずはjQuery Validationをゲットせねば。
jQuery Validation Plugin | Form validation with jQuery
こういうプラグインを色々いれることで簡単になるのねー
$(function() {
$.validator.addMethod('regex',
function(value, element, param) {
var r = new RegExp('^' + param + '$', 'gi');
return r.test(value);
},
'入力値が不正な形式です。'
);
$('#fm').validate({
errorClass : 'valid-error',
rules : {
'isbn': { required : true,
regex : '978-4-[0-9]{2,5}-[0-9]{2,5}-[0-9A-Z]{1}' },
'title' : { required : true },
'price' : { range : [1000, 10000] },
'publish' : { maxlength : 30 },
'published' : { dateISO : true }
},
messages : {
'isbn' : {
required: 'ISBNコードは必須です。',
regex: 'ISBNコードの形式が不正です。'
},
'title' : {
required : '書名は必須です。'
},
'price' : {
range : jQuery.format('価格は{0}～{1}の範囲で入力してください。')
},
'publish' : {
maxlength : jQuery.format('出版社は{0}文字以内で入力してください。')
},
'published' : {
dateISO : '日付の形式が不正です。'
}
}
});
});
（中略）
<form id="fm">
<label>ISBNコード：
<input type="text" id="isbn" name="isbn" size="25" /></label><br/>
<label>書名：
<input type="text" id="title" name="title" size="50" /></label><br/>
<label>価格：
<input type="text" id="price" name="price" size="5" /></label><br/>
<label>出版社：
<input type="text" id="publish" name="publish" size="15" /></label><br/>
<label>配本日：
<input type="text" id="published" name="published" size="15" /></label><br/>
<input type="submit" value="登録" />
</form>ばりてーしょん
うぅ・・・これも成功するまで長かった・・・
でも最後だし、頑張りました・・・・
☆直しかた
・ChromeのJavaScriptコンソールでエラー内容を見る
・jsの指定を絶対パスにする（相対パスにしない）
ってことで、今回のは私がうｐしたjquery.validate.jsが最新だったために動かなかったみたい。
（サンプルのjquery.validate.jsをうｐしたら動いた）
そんなのわからないやい！
