jQuery开发基础教程（蔡艳桃 万木君）PPT全套完整教学课件.ppt

使用Chrome浏览器运行index.html，单击捐款额后面的上下箭头，可以改变捐款的额度，效果如图8-15所示。图8-15旋转器（Spinner）应用实例8.2.10标签页（Tabs）的使用标签页（Tabs）是一种多面板的单内容区，每个面板与列表中的标题相关，单击标签页，可以切换显示不同的逻辑内容。标签页（Tabs）有一组必须使用的特定标记，以便标签页能正常工作，分别如下：标签页（Tabs）必须在一个有序的（ol）或无序的（ul）列表中每个标签页的title必须在一个列表项（li）的内部，且必须用一个带有href属性的锚（a）包裹。每个标签页面板可以是任意有效的元素，但是它必须带有一个id，该id与相关标签页的锚中的哈希相对应。使用标签页（Tabs）时，当焦点在标签页上时，下面的键盘命令可用：UP/LEFT：移动焦点到上一个标签页。如果在第一个标签页上，则移动焦点到最后一个标签页。在一个短暂的延迟后激活获得焦点的标签页。DOWN/RIGHT：移动焦点到下一个标签页。如果在最后一个标签页上，则移动焦点到第一个标签页。在一个短暂的延迟后激活获得焦点的标签页。HOME：移动焦点到第一个标签页。在一个短暂的延迟后激活获得焦点的标签页。END：移动焦点到最后一个标签页。在一个短暂的延迟后激活获得焦点的标签页。SPACE：激活与获得焦点的标签页相关的面板。ENTER：激活或切换与获得焦点的标签页相关的面板。ALT+PAGEUP：移动焦点到上一个标签页，并立即激活。ALT+PAGEDOWN：移动焦点到下一个标签页，并立即激活。当焦点在面板上时，下面的键盘命令可用：CTRL+UP：移动焦点到相关的标签页。ALT+PAGEUP：移动焦点到上一个标签页，并立即激活。ALT+PAGEDOWN：移动焦点到下一个标签页，并立即激活。标签页部件（Tabs）使用jQueryUICSS框架来定义它的外观和感观的样式。如果需要使用标签页指定的样式，则可以使用下面的CSSclass名称：ui-tabs：标签页的外层容器。当设置了collapsible选项时，该元素会另外带有一个ui-tabs-collapsibleclass。ui-tabs-nav：标签页列表。导航中激活的列表项会带有一个ui-tabs-activeclass。内容通过Ajax调用加载的列表项会带有一个ui-tabs-loadingclass。ui-tabs-anchor：用于切换面板的锚。ui-tabs-panel：与标签页相关的面板，只有与其对应的标签页激活时才可见。【例8-10】本实例使用标签页（Tabs）制作了一个关于各种网页语言介绍的标签页，用户可以通过单击选中的标签页来切换内容的关闭/打开状态，另外，当鼠标在标签页上悬停时，也可以切换各部分的打开/关闭状态。程序开发步骤如下：（1）新建一个index.html文件，将其放到8-10文件夹中。（2）将jQueryUI文件夹jquery-ui-1.11.1.custom拷贝到8-10文件夹中。（3）使用Dreamweaver打开index.html文件，在index.html文件中编写如下代码，实现使用标签页（Tabs）显示各种网页语言介绍的功能。代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=/1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/linkrel=stylesheethref=jquery-ui-1.11.1.custom/jquery-ui.css/scriptsrc=jquery-ui-1.11.1.custom/external/jquery/jquery.js/scriptscriptsrc=jquery-ui-1.11.1.custom/jquery-ui.js/scripttitle标签页（Tabs）的使用/titlescript$(function(){$(#tabs).tabs({collapsible:true, event:mouseover});});/script/headbodydiv