-
Notifications
You must be signed in to change notification settings - Fork 0
/
0600_nav_tabs_menu_ajax.html
50 lines (50 loc) · 3.16 KB
/
0600_nav_tabs_menu_ajax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!-- タブの切り替えトリガーに反応してAjax -->
<!DOCTYPE html>
<html lang="ja">
<html>
<head>
<meta charset="UTF-8" />
<link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<script src="assets/jquery.js" type="text/javascript"></script>
<script src="assets/coffee-script.js" type="text/javascript"></script>
<script src="assets/bootstrap.js" type="text/javascript"></script>
<script type="text/coffeescript">
$ ->
$("a[data-toggle=tab]").on "shown", (e) ->
href = $(e.target).attr("href")
if $(href).html() == ""
if href == "#t1"
$.ajax
url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&output=json&q=" + encodeURIComponent("http://b.hatena.ne.jp/hotentry.rss") + "&callback=?"
dataType: "json"
success: (data) ->
$.each data.responseData.feed.entries, (i, entry) ->
$(href).append(entry.content)
if href == "#t2"
$.ajax
url: "https://ajax.googleapis.com/ajax/services/search/images?v=1.0&num=10&q=" + encodeURIComponent("初音ミク") + "&callback=?"
dataType: "json"
success: (data) ->
$(href).append("<ul class='thumbnails'></ul>")
$.each data.responseData.results, (i, entry) ->
$(".thumbnails", href).append('<li><a href="#"><img src="' + entry.url + '" height="128" /></a></li>')
if href == "#t3"
$(href).append('<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?f=q&source=s_q&hl=ja&geocode=&q=%E7%A7%8B%E8%91%89%E5%8E%9F&aq=&sll=35.680377,139.730215&sspn=0.033116,0.077162&vpsrc=0&brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&ie=UTF8&hq=&hnear=%E7%A7%8B%E8%91%89%E5%8E%9F%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&t=m&ll=35.69871,139.774246&spn=0.033457,0.054932&z=14&iwloc=A&output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps?f=q&source=embed&hl=ja&geocode=&q=%E7%A7%8B%E8%91%89%E5%8E%9F&aq=&sll=35.680377,139.730215&sspn=0.033116,0.077162&vpsrc=0&brcurrent=3,0x60188c0c0b13f54d:0xb630953beee48188,0&ie=UTF8&hq=&hnear=%E7%A7%8B%E8%91%89%E5%8E%9F%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&t=m&ll=35.69871,139.774246&spn=0.033457,0.054932&z=14&iwloc=A" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>')
# $(".tabs a[href=#t1]").click()
</script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li><a href="#t1" data-toggle="tab">はてブ</a></li>
<li><a href="#t2" data-toggle="tab">画像検索</a></li>
<li><a href="#t3" data-toggle="tab">地図</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="t1"></div>
<div class="tab-pane" id="t2"></div>
<div class="tab-pane" id="t3"></div>
</div>
</div>
</body>
</html>