1.html
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
3
<html xmlns="http://www.w3.org/1999/xhtml">4
<head runat="server">5
<title></title>6
<script type="text/javascript" src="JS/jquery.js"></script>7
<script type="text/javascript" src="JS/alice.js"></script>8
9
<link href="css/alice.css" rel="stylesheet" type="text/css" />10
</head>11
<body>12
<form id="form1" runat="server">13
<div id="dictionary"></div>14
<div class="letters">15
<div class="letter" id="letter-a">16
<h3>A</h3>17
<div class="button">Load</div>18
</div>19
<div class="letter" id="letter-b">20
<h3>B</h3>21
<div class="button">Load</div>22
</div>23
<div class="letter" id="letter-c">24
<h3>C</h3>25
<div class="button">Load</div>26
</div>27
<div class="letter" id="letter-d">28
<h3>D</h3>29
<div class="button">Load</div>30
</div>31
</div>32
</form>33
</body>34
</html>
2.html
Code1
<div class="entry">2
<h3 class="term">ABDICATION</h3>3
<div class="part">n.</div>4
<div class="definition">5
An act whereby a sovereign attests his sense of the high temperature of the throne.6
<div class="quote">7
<div class="quote-line">Poor Isabella's Dead,whose abdication</div>8
<div class="quote-line">Set all tongues wagging in the Spanish nation.</div>9
<div class="quote-line">For that performance 'twere unfair to scold her:</div>10
<div class="quote-line">She wisely left a throne too hot to hold her.</div>11
<div class="quote-line">To History she'll be no royal riddle—</div>12
<div class="quote-author">G.J.</div>13
</div>14
</div>15
</div>16
17
<div class="entry">18
<h3 class="term">ABSOLUTE</h3>19
<div class="part">adj.</div>20
<div class="definition">21
Independent,irresponsible.An absolute monarchy is one in which th soverign does as he pleases so long as he pleases the assassins.22
Not many absolute monarchies are left,most of them having been replaced by limited monarchies,where th soveregin's power for evil(and for good)23
is greatly curtailed,and by republics,which are governed by chance.24
</div>25
</div>
alice.css
Code1
.button2
{
}{3
position:relative;4
width:140px;5
padding-top:5px;6
padding-right:5px;7
padding-bottom:5px;8
padding-left:5px;9
border-top-width:1px;10
border-right-width:1px;11
border-bottom-width:1px;12
border-left-width:1px;13
border-style:solid;14
border-color:#e3e3e3;15
margin:5em 0;16
17
}b.json
Code1
[{2
"term":"BACCHUS",3
"part": "n.",4
"definition": "A convenient deity invented by the ancients as an excuse for getting drunk.",5
"quote": [6
"Is public worship,then,a sin,",7
"That for devotions paid to Bacchus",8
"The lictors dare to run us in,",9
"And resolutely thump and whack us?"],10
11
"author": "Jorace"12
},13
{14
"term": "BACKBITE",15
"part": "v.t.",16
"definition": "To speak of a man as you find him when he can't find you."17
}, 18
{19
"term":"BEARD",20
"part":"n.",21
"definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the head."22
}]23
alice.js
Code1
$(document).ready(function(){2
//把2.html中的内容嵌入到1.html3
$('#letter-a .button').click(function() {4
$('#dictionary').load('2.html');5
});6
//读取json文件7
$('#letter-b .button').click(function() {8
$.getJSON('JS/b.json',function(data) {9
$('#dictionary').empty();10
$.each(data, function(entryIndex, entry) {11
//声明一个HTML12
var html = '<div class="entry">';13
html += '<h3 class="term">' + entry['term'] + '</h3>';14
html += '<div class="part">' + entry['part'] + '</div>';15
html += '<div class="definition">';16
html += entry['definition'];17
18
if (entry['quote']) {19
html += '<div class="quote">';20
$.each(entry['quote'], function(lineIndex, line) {21
html += '<div class="quote-line">' + line + '</div>';22
});23
if (entry['author']) {24
html += '<div class="quote-author">' + entry['author'] + '</div>';25
}26
html += '</div>';27
}28
html += '</div>';29
html += '</div>';30
//把HTML添加到层里31
$('#dictionary').append(html);32
});33
});34
});35
36
});each():循环遍历
