目录
15.1 突出显示新元素
黄色淡出”差不多已经成了 Web 设计的标志：当页面上出现新内容时，它会先显示在黄色背景上，然后黄色背景慢慢蜕变为白色（即站点的一般背景颜色）。
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Text</title>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script01.js"></script>
</head>
<body>
<a href="#" id="textToggle">show/hidetext</a><br>
<div id="bodyText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet
➝ mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae,
➝ nisi. Duis nulla lectus, feugiat et, tincidunt nec,iaculis vehicula, tortor. Sed tortor felis,
➝ viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque
➝ odio massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus
➝ mi. Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium
➝ posuere, tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet
➝ ligula.</div>
</body>
</html>
$(document).ready(function() {
$("#bodyText").hide();
$("#textToggle").click(
function() {
$("#bodyText").toggle("highlight",{}, 2000);
return false
}
);
});
$(“#bodyText”).hide();
jQuery 最有用的特性之一是指定要操作的对象的方式。这种方式实际上很像 CSS。在编写 CSS规则时，如果希望隐藏 id 为 bodyText 的元素，可能会编写下面这样的代码：#bodyText { display:none; }可以看到， CSS 比等效的 JavaScript 命令简短得多：document.getElementById(“bodyText”).style.display = “none”;这一步中代码行的作用与上面的标准 JavaScript 和 CSS 规则的相同：它告诉浏览器不显示指定的元素。它使用 jQuery 内置的 hide()方法，这个方法不需要参数。
function() {
$("#bodyText").toggle("highlight", {}, 2000);
return false;
}
这是传递给 click()的第一个函数。首先，让 jQuery 寻找 id 为 bodyText 的元素， 这是在调用 toggle()时要显示的元素。 toggle()方法有 3 个参数。
“highlight”，我们需要的效果。
{}，所需的效果选项。黄色淡出技术非常流行，所以黄色是默认颜色，因此这里不需要修改任何选项。
2000，希望显示效果的速度。这个值以毫秒为单位，所以 2000 意味着希望在两秒内显示淡出效果。最后返回 false 值，这样浏览器就不会跟踪链接了。
15.2 创建可折叠菜单
添加可折叠菜单（ accordion menu）。在这种菜单中，当打开一个部分时，其他部分会自动关闭。与选项卡式界面相似，它也是一种常用的设计元素。
<!DOCTYPE html>
<html>
<head>
<title>Accordion Menus</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css">
<link rel="stylesheet" href="script02.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script02.js"></script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<ul id="theMenu">
<li><a href="menu1.html" class="menuLink">Comedies</a>
<ul>
<li><a href="pg1.html">All's Well That Ends Well</a></li>
<li><a href="pg2.html">As You Like It</a></li>
<li><a href="pg3.html">Love's Labour's Lost</a></li>
<li><a href="pg4.html">The Comedy of Errors</a></li>
</ul>
</li>
<li><a href="menu2.html" class="menuLink">Tragedies</a>
<ul>
<li><a href="pg5.html">Anthony & Cleopatra</a></li>
<li><a href="pg6.html">Hamlet</a></li>
<li><a href="pg7.html">Romeo & Juliet</a></li>
</ul>
</li>
<li><a href="menu3.html" class="menuLink">Histories</a>
<ul>
<li><a href="pg8.html">Henry IV, Part 1</a></li>
<li><a href="pg9.html">Henry IV, Part 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
#theMenu {
width: 400px;
}
$(document).ready(function() {
$("#theMenu").accordion({
animated: false,
collapsible: true,
header: ".menuLink"
heightStyle: "content"
});
});
$("#theMenu").accordion({
通过一个大纲构造菜单，并用无序列表项构造每个菜单的内容。这个示例展示了 jQuery的简洁性： 只需获得顶层 ul 的 id（这里是 theMenu），然后对它应用内置的 accordion()方法。
animated: false,
collapsible: true,
header: ".menuLink"
heightStyle: "content"
我们需要设置几个选项，这在 accordion()内部进行。它们如下所示。
animate：如果希望在显示菜单项时具有动画效果，那么把这个选项设置为所需的效果名称（例如， “slide"和"easeslide”）。
collapsible：允许用户折叠所有菜单选项，这样就可以不必总是显示某些菜单。
header： jQuery 如何识别每个菜单的标题？在这里，所有菜单标题的类都是"menuLink"，
heightStyle：将它的值设置为"content"迫使可折叠区域总是具有固定的高度（基于所需的最大
区域）。
15.3 创建更漂亮的对话框
对于模态对话框，用户必须作出响应，然后才能返回到网页。同样，在 jQuery 中完成这个任务会更简便。
<!DOCTYPE html>
<html>
<head>
<title>Modal Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href=script03.css>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script03.js"></script>
</head>
<body>
<div id="example" title="This is a modal dialog">
So long as you can see this dialog,you can't touch the page below
</div>
<h1>Welcome to my page</h1>
<div id="bodyText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla viverra aliquet
➝ mi. Cras urna. Curabitur diam. Curabitur eros nibh, condimentum eu, tincidunt at, commodo vitae,
➝ nisi. Duis nulla lectus, feugiat et, tincidunt nec, iaculis vehicula, tortor. Sed tortor felis,
➝ viverra vitae, posuere et, ullamcorper a, leo. Suspendisse euismod libero at orci. Pellentesque odio
➝ massa, condimentum at, pellentesque sed, lacinia quis, mauris. Proin ultricies risus cursus mi.
➝ Cras nibh quam, adipiscing vel, tincidunt a, consequat ut, mi. Aenean neque arcu, pretium posuere,
➝ tincidunt non, consequat sit amet, enim. Duis fermentum. Donec eu augue. Mauris sit amet ligula.</div>
</body>
</html>
.ui-widget-overlay {
background: #000 none;
}
$(document).ready(function() {
$("#example").dialog({
modal: true,
resizable: false,
buttons: [{
text: "OK"
click: function() {
$(this).dialog("close");
}
}]
});
});
可选的主题有很多： Dark Hive、 Hot Sneaks、 Humanity、 Le Frog、 Overcast、South Street、 Swanky Purse、 Vader。
15.4 自动完成字段
我们编写了大量的代码来阻止用户输入无效的美国州名。而在这里，你将看到如何利用 jQuery 来化繁为简。
<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script04.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="searchField">Please enter your state:</label>
<input id="searchField">
</div>
</body>
</html>
$(function(){
var stateList = "Alabama*Alaska*Arizona*Arkansas*California*Colorado*Connecticut*Delaware*
➝ Florida*Georgia*Hawaii*Idaho*Illinois*Indiana*Iowa*Kansas*Kentucky*Louisiana*Maine*
➝ Maryland*Massachusetts*Michigan*Minnesota*Mississippi*Missouri*Montana*Nebraska*Nevada*New
➝ Hampshire*New Jersey*New Mexico*New York*North Carolina*North Dakota*Ohio*Oklahoma*Oregon*
➝ Pennsylvania*Rhode Island*South Carolina*South Dakota*Tennessee*Texas*Utah*Vermont*Virginia*
➝ Washington*West Virginia*Wisconsin*Wyoming*";
$("#searchField").autocomplete({
source: stateList.split("*")
});
});
15.5 添加可排序选项卡
<!DOCTYPE html>
<html>
<head>
<title>Sortable Tabs</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/pepper-grinder/jquery-ui.css">
<link rel="stylesheet" href="script05.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script05.js"></script>
</head>
<body>
<h2>Compact Stars</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Neutron Star</a></li>
<li><a href="#tabs-2">Pulsar</a></li>
<li><a href="#tabs-3">Black Hole</a></li>
</ul>
<div id="tabs-1">
<p><span><img src="images/Neutron_star.png" alt="neutron star"><br>Wikimedia Commons</span> A
➝ <b>neutron star</b> is a type of stellar remnant that can result from the gravitational
➝ collapse of a massive star during some kinds of supernova events. Neutron stars are
➝ the densest and tiniest stars known to exist in the universe; although having only
➝ the diameter of about 10 km (6 mi), they may have a mass of several times that of the
➝ Sun. Neutron stars probably appear white to the naked eye.
</p>
</div>
<div id="tabs-2">
<p><span><img src="images/pulsar.jpg" alt="pulsar"><br>NASA's Marshall Space Flight
➝ Center</span>A <b>pulsar</b> is a highly magnetized, rotating neutron star that emits
➝ a beam of electromagnetic radiation. This radiation can only be observed when the beam
➝ of emission is pointing toward the Earth, much the way a lighthouse can only be seen
➝ when the light is pointed in the direction of an observer, and is responsible for
➝ the pulsed appearance of emission.
</p>
</div>
<div id="tabs-3">
<p><span><img src="images/blackhole.jpg" alt="black hole"><br>NASA's Marshall Space
➝ Flight Center</span>A <b>black hole</b> is defined as a region of spacetime from which
➝ gravity prevents anything, including light, from escaping. The theory of general
➝ relativity predicts that a sufficiently compact mass will deform spacetime to form
➝ a black hole. The hole is called "black" because it absorbs all the light that hits
➝ its event horizon, reflecting nothing, just like a perfect black body in thermodynamics.
➝ The discovery of neutron stars sparked interest in gravitationally collapsed compact
➝ objects as a possible astrophysical reality. Black holes of stellar mass are expected
➝ to form when very massive stars collapse at the end of their life cycle. After a black
➝ hole has formed it can continue to grow by absorbing mass from its surroundings. By
➝ absorbing other stars and merging with other black holes, supermassive black holes
➝ of millions of solar masses may form. There is general consensus that supermassive
➝ black holes exist in the centers of most galaxies.
</p>
</div>
</div>
</body>
</html>
span {
float: right;
margin-left: 1em;
font-size: .75em;
text-align: center;
}
img {
width: 300px;
}
p::after {
clear: both;
content: "";
display: block;
}
$(function() {
var tabs = $("#tabs").tabs();
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function() {
tabs.tabs("refresh");
}
});
});
tabs.find(".ui-tabs-nav").sortable({
axis: "x",
stop: function() {
tabs.tabs("refresh");
}
});
这是处理排序的代码。 ui-tabs-nav 类通过 jQuery 在上一步被应用到了选项卡上，之后我们使用它的 sortable()方法定义用户如何重新调整选项卡。此处， 我们声明了排序只能沿 x 轴进行，。用户一旦停止拖动选项卡，页面应该马上刷新。
15.6 使用复选框作为按钮
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Buttons</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css">
<link rel="stylesheet" href="script06.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script06.js"></script>
</head>
<body>
<div id="stylemenu">
<input type="checkbox" id="check1"><label for="check1">B</label>
<input type="checkbox" id="check2"><label for="check2">I</label>
<input type="checkbox" id="check3"><label for="check3">U</label>
<input type="checkbox" id="check4"><label for="check4">Code</label>
<input type="checkbox" id="check5"><label for="check5">ABC</label>
<input type="checkbox" id="check6"><label for="check6">Abc</label>
</div>
<textarea cols="45" rows="10">
</textarea>
</body>
</html>
#stylemenu {
padding: 2em 0;
}
#stylemenu input + label {
font-weight: normal;
}
#stylemenu #check1 + label {
font-weight: bold;
}
#stylemenu #check2 + label {
font-style: italic;
}
#stylemenu #check3 + label {
text-decoration: underline;
}
#stylemenu #check4 + label {
font-family: monospace;
font-size: 1.4em;
}
#stylemenu #check5 + label {
text-decoration: line-through;
}
#stylemenu #check6 + label {
font-variant: small-caps;
}
$(function() {
$("#stylemenu").buttonset();
});
$("#stylemenu").buttonset();
这一行 jQuery 代码告诉浏览器找到 id 为 stylemenu 的元素的内容，并将其转变为标准文本格式化的按钮。
15.7 在页面中添加日历
许多 Web 应用程序都需要一个用户能够参考与交互的日历，如预约表单、待办清单、博客上的博文导航等。 jQuery 库包含了一个好用且易于实现的日历控件。最棒的是它非常灵活，编写寥寥几行代码即可改变它的外观和功能。
<!DOCTYPE html>
<html>
<head>
<title>1-up Date Picker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script07.js"></script>
</head>
<body>
<h2>Date: <span id="datepicked"></span></h2>
<div id="datepicker"></div>
</body>
</html>
$(function() {
$("#datepicker").datepicker({
dateFormat: 'DD, MM dd, yy',
onSelect: function(selectedDate) {
$("#datepicked").empty().append(selectedDate);
}
});
});
$("#datepicked").empty().append(selectedDate);
选中日期时，我们想要更新页面上的显示，这行代码正是用来做这件事情的。我们会更新 id 值为 datepicked 的 span 标签，首先清空当前值（如果存在的话），然后将 selectedDate 写入其中。
有时，你只需要一个日历，如约会、预订餐厅等。不过，双联日历也很常见。它们通常会被用于那些起止日期不同的事件。例如，预订酒店和购买机票的时候，你常会见到它们.
<!DOCTYPE html>
<html>
<head>
<title>2-up Date Picker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
Link rel="stylesheet"href="script08.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="script08.js"></script>
</head>
<body>
<h1>Select your check in and check out dates:</h1>
<label for="from">From</label> <input type="text" id="from" name="from">
<label for="to">to</label> <input type="text" id="to" name="to">
</body>
</html>
div#ui-datepicker-div {
margin-top: 10px;
}
$(function() {
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
numberOfMonths: 2,
onSelect: function(selectedDate) {
var option = (this.id == "from") ? "minDate" : "maxDate",
date = $.datepicker.parseDate ($.datepicker._defaults. dateFormat, selectedDate);
dates.not(this).datepicker ("option", option, date);
}
});
});
defaultDate: "+1w",
通过 datepicker 部件，我们可以设置默认的开始日期。这里，我们将其设为下周的今天
numberOfMonths: 2,
使用 jQuery 的原因之一在于它的灵活性， datepicker 部件灵活性的具体表现之一是它可以轻易地修改每次显示的月份数。此处，我们要一次显示两个月。
onSelect: function(selectedDate) {
与之前的示例一样，我们希望在日期被选中的同时做一些事情，具体而言，就是在这个位置编写相应的代码。
date = $.datepicker.parseDate($.datepicker._defaults.dateFormat, selectedDate);
我们能够自动获取到 selectedDate 的值，但其格式并非我们所需的格式。此处，我们使用 datepicker的 parseDate()函数来转换日期格式，并将结果保存到 date 变量中。
dates.not(this).datepicker("option", option, date);
最后，我们用刚刚赋过值的 option 变量和 date 变量来辅助设置可选范围的开始日期（ minDate）。
15.8 使用 ThemeRoller 定制外观
作为 Web 开发人员，你需要与设计师一起为网站创建统一的外观。令人高兴的是， jQuery 的作者明白仅为网站添加功能是不够的，还必须考虑这些功能对网站观感的影响。而这正是创建 ThemeRoller的原因。作为一个工具， ThemeRoller 允许用户根据项目需要来定制 jQuery 的用户界面主题。你可以新建一个完全自定义的主题，也可以修改任意预先设计好的主题。
创建自定义主题的最简单的方式莫过于以现有 jQuery 主题中的某一个为基础。单击左侧边栏中的 Gallery，查看你的选择。
2. 查看可用主题，找到与期望外观最相近的主题。单击主题右下方的 Edit 按钮。随后，左侧边栏会切换至 Roll Your Own 面板。
3. 此时，你可以选择面板上的可折叠菜单项，单击后会出现相应项的设置。
4. 编辑侧边栏中的值时，页面的主体部分会进行相应的更新匹配，你可以立即看到（并判断）其
差异。
5. 如果你对结果满意，单击面板上方的 Download Theme 按钮，页面会跳转至 Download Builder
页面
6. 在这个页面上，你能够控制 CSS 的“轻”与“重”。如果你选择全部组件，那么相比于选择最小集，你的页面会在下载和呈现上花费更长的时间。那就是说，如果你知道自己的网站永远不会用到Shake 或 Pulsate 效果（晃动或跳动效果），只要不勾选它们前面的复选框，它们就不会被包含在下载范围之内。
7. 选定了所需的全部内容后，单击 Download 按钮。最终，你会获得一个 jQuery 相关的下载文件夹，在其根目录下，有一个名为 index.html 的文件。在浏览器中打开 index.html，它会精确显示出你所下载的内容，此外，它还会指导你如何将新主题添加到网站页面中。
1567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
