大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第8章.pptx
- 文档编号:18591972
- 上传时间:2023-08-19
- 格式:PPTX
- 页数:154
- 大小:1.73MB
大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第8章.pptx
《大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第8章.pptx》由会员分享,可在线阅读,更多相关《大学课程《基于新信息技术的jQuery开发基础教程》PPT课件:第8章.pptx(154页珍藏版)》请在冰点文库上搜索。
单元8jQueryUI常用组件,8.1按钮button8.2选项卡tabs8.3手风琴菜单accordionMenus8.4对话框dialogBoxes8.5日历datepicke8.6输入框自动补全autocomplete8.7进度条progressbar8.8滑块slider8.9jQueryUI提供的图标单元总结,8.1按钮button,8.1.1按钮的基本使用jQueryUI提供了button()方法,将HTML元素转换为按钮,并自动管理它们上面的鼠标移动,所有这些都是由jQueryUI隐式完成的。
比如下面的HTML代码中有多种类型的按钮,当然,一般的页面中我们一般不用span元素作为按钮,此处为了演示button()方法的作用特意把它也加进来。
超链接button按钮span文本容器,这些HTML元素的原本的样子大家应该非常清楚,接下来我们对这些元素使用jQuery代码:
$(document).ready(function()$(#mybtn1,#mybtn2,#mybtn3,#mybtn4,#mybtn5).button(););,只需对这些元素应用button()方法一个操作即可实现上述功能,页面效果如图8-1所示。
图8-1button()方法效果图,可以看到,所有的元素都被改变成了按钮的样子,包括span元素。
使用Chrome浏览器检查元素,可以看到HTML代码已经被修改了,如图8-2所示。
如图8-2页面实际显示的HTML代码,如果我们要对按钮进行样式修改,可以对class:
ui-button进行CSS编码,代码如下:
.ui-buttonbackground-color:
red;color:
white;font-weight:
bold;,此时,页面显示的元素如图8-3所示。
图8-3修改CSS代码后的元素,8.1.2button()方法上面已经介绍了button()方法的基本使用方法,接下来详细介绍button()方法。
此方法有两种形式:
$(selector).button(options);$(selector).button(action,param);,1.button(options)方法button(options)方法声明HTML元素应作为按钮进行管理。
options参数是一个指定按钮外观和行为的对象。
按钮可以用文本表示,也可以与jQueryUICSS文件中预定义的图标相关联(在这里,是jquery-ui.min.css文件),在该文件中包含了一组CSS类,用于访问images目录中的图标。
在这个CSS文件中,可以看到CSS类定义,例如下面的代码,是与图像文件中的图标相关联的CSS类的定义:
.ui-icon-calendarbackground-position:
32px112px;,jQueryUI中可用的图标如图8-4所示。
图8-4jQueryUI图标,options中的设置项见表8-1。
比如我们想给按钮加上小图标,可以将jQuery代码修改如下:
$(document).ready(function()$(#mybtn1).button(icons:
primary:
ui-icon-gear);$(#mybtn2).button(icons:
primary:
ui-icon-gear,secondary:
ui-icon-triangle-1-s);$(#mybtn3).button();$(#mybtn4,#mybtn5).button(icons:
secondary:
ui-icon-triangle-1-s););,页面显示效果如图8-5所示。
图8-5给按钮加上小图标,可以看到:
(1)除了input元素的按钮外,其他元素的按钮都可以添加小图标,如“#mybtn4”元素;
(2)同时给按钮添加主、副小图标,则只会显示主图标,如“#mybtn2”元素。
2.button(action,param)方法此方法允许对按钮执行方法,例如禁用或更改按钮文本。
方法在第一个参数中指定为字符串,例如,“disable”可禁用按钮;第二个参数是需要作为参数传递到方法中的内容。
表8-2列举了允许使用的方法及方法的作用。
3.为按钮绑定事件jQueryUI没有添加与按钮相关联的新事件。
实际上,鼠标操作的管理与jQuery通常使用的bind()方法所使用的现有事件(click、mouseover等)相对应。
因此要为按钮绑定事件只需直接使用jQuery代码绑定即可。
8.1.3单选按钮jQueryUI使用相同的方法可以让单选框拥有按钮的效果。
1.显示单选按钮使用单选按钮要比前面的按钮麻烦一点:
必须只使用input元素来表示单选按钮,其中与单选按钮相关联的文本必须放在label元素中,并且label元素必须绑定input单选框。
例如要显示两个单选按钮来选择一个人的性别,我们编写HTML代码如下:
jQuery代码如下:
页面效果如图8-6所示。
图8-6单选框显示效果,2.buttonset()方法上面的单选按钮肯定比传统的单选按钮更具视觉上的享受,但最好将它们组织起来,以显示它们形成一个块。
我们可以通过稍微修改HTML和jQuery代码来实现这一点,更改以粗体显示:
页面显示效果如图8-7所示。
与前面的代码的不同之处在于,我们将input元素包装到div元素中,并应用jQueryUI的buttonset()方法使按钮看起来像单个块。
虽然按钮的显示不同,但它们的行为保持不变。
图8-7单选框效果,8.1.4复选按钮复选按钮的外观与单选按钮相同,但可以单独选择和取消选择每个复选框,此处不再赘述,大家可以将单选框代码修改为复选框代码即可看到对应的效果。
8.2选项卡tabs,选项卡(Tabs)有一组必须使用的特定标记,以便选项卡能正常工作:
选项卡(Tabs)必须在一个有序的(ol)或无序的(ul)列表中。
每个标签页的title必须在一个列表项(li)的内部,且必须用一个带有href属性的锚(a)包裹。
每个标签页面板可以是任意有效的元素,但是它必须带有一个id,该id与相关选项卡的锚中的href相对应。
8.2.1选项卡的基本使用下面的HTML代码是选项卡的模板代码,代码结构是jQueryUI所提供的,最简单的方法是按照模板编写代码,要增加或者减少选项卡只需要添加或删除对应的div和li元素即可。
jQuery代码如下:
页面显示效果如图8-8所示。
8.2.2修改选项卡样式使用tabs()方法可以极大地改变页面中HTML元素的外观。
实际上,这个方法会在jQueryUI内部遍历HTML元素,并向相关元素(选项卡)添加新的CSS类,以赋予它们适当的样式。
比如我们为上面的代码添加如下CSS:
页面效果将变成如图8-9所示的样式。
图8-9选项卡页面效果,8.2.3tabs()方法上面已经介绍了tabs()方法的基本使用,接下来详细介绍tabs()方法。
此方法有两种形式:
$(selector).tabs(options)$(selector).tabs(action,param),1.tabs(options)方法tabs(options)方法声明HTML元素(及其内容)应作为选项卡进行管理。
options参数是一个对象,用于指定与选项卡相关的外观和行为。
根据是直接管理选项卡还是管理与选项卡相关的事件,可以使用不同类型的选项。
options中的设置项见表8-3,其中的示例以上面的HTML代码为基础。
2.tabs(action,param)方法与前面的tabs(options)方法不同,该方法用于在创建选项卡后修改选项卡。
此方法允许通过JavaScript程序对选项卡执行操作,例如选择、禁用、添加或删除选项卡。
在第一个参数中,操作被指定为字符串(例如,“add”可以添加新的选项卡),而后面的参数与此操作的参数有关(例如,选项卡的索引等),如表8-4所示。
3.绑定事件除了tabs(options)方法的options中使用的事件方法外,jQueryUI还允许我们使用bind()方法管理这些事件。
jQueryUI创建了不同的事件,如表8-5所示。
8.2.4键盘交互当焦点在标签页上时,我们可以使用键盘按键控制选项卡切换:
UP/LEFT:
移动焦点到上一个标签页。
如果在第一个标签页上,则移动焦点到最后一个标签页。
在一个短暂的延迟后激活获得焦点的标签页。
DOWN/RIGHT:
移动焦点到下一个标签页。
如果在最后一个标签页上,则移动焦点到第一个标签页。
在一个短暂的延迟后激活获得焦点的标签页。
HOME:
移动焦点到第一个标签页。
在一个短暂的延迟后激活获得焦点的标签页。
END:
移动焦点到最后一个标签页。
在一个短暂的延迟后激活获得焦点的标签页。
SPACE:
激活与获得焦点的标签页相关的面板。
ENTER:
激活或切换与获得焦点的标签页相关的面板。
ALT+PAGEUP:
移动焦点到上一个标签页,并立即激活。
ALT+PAGEDOWN:
移动焦点到下一个标签页,并立即激活。
当焦点在面板上时,我们可以使用键盘按键控制选项卡切换:
CTRL+UP:
移动焦点到相关的标签页。
ALT+PAGEUP:
移动焦点到上一个标签页,并立即激活。
ALT+PAGEDOWN:
移动焦点到下一个标签页,并立即激活。
8.3手风琴菜单accordionMenus,8.3.1手风琴菜单的基本使用下面的HTML代码是手风琴菜单的模板代码,代码结构是jQueryUI所提供的,最简单的方法是按照模板编写代码,要增加或者删除菜单项只需要添加或删除对应的div和标题元素即可。
对应的jQuery代码如下:
$(document).ready(function()$(#accordion).accordion(););,jQueryUI要求我们为每个菜单编写以下内容,标题元素和div元素一个接一个重复:
一个包含整体的全局div元素。
一个将成为菜单标题的元素:
它可以是,它必须包含一个超链接(a元素),该链接将指示菜单文本(由于未使用href属性,因此不需要对其使用href属性)。
与内容菜单相对应的div元素。
页面效果如图8-10所示。
图8-10手风琴菜单效果,8.3.2修改手风琴菜单样式使用accordion()方法会显著改变呈现页面中HTML元素的外观。
实际上,这个方法扫描HTML并向元素(这里是accordion菜单)添加新的CSS类,以赋予它们适当的样式。
我们也可以使用元素的CSS类来订制显示效果。
例如,如果我们改变与h3元素相关联的ui-accordion-headerCSS类,我们可以改变菜单标题的样式。
类似地,如果我们更改与div元素相关联的ui-accordion-contentCSS类,我们将获得菜单内容的新样式。
比如下面的CSS代码:
上面的代码中,我们为标题h3添加了一个3px的红色边框,将内容区域的文字大小改为12px,刷新页面后页面效果如图8-11所示。
图8-11手风琴菜单效果,8.3.3accordion()方法上面已经介绍了accordion()方法的基本使用,接下来详细介绍accordion()方法。
此方法语法如下:
$(selector).accordion(options)$(selector).accordion(aciton,param),accordion(options)方法指定HTML元素(及其内容)应作为accordion菜单进行管理。
options参数是一个指定相关菜单的外观和行为的对象。
这些选项涉及菜单的行为、内容的高度或与这些菜单相关的事件。
表8-6描述了用于管理手风琴菜单行为的选项。
activate和beforeActivate事件的ui对象由以下属性组成:
oldHeader:
与正在关闭的菜单对应的jQuery类对象。
oldContent:
与正在关闭的内容菜单相对应的jQuery类对象。
newHeader:
与正在打开的菜单相对应的jQuery类对象。
newContent:
与正在打开的内容菜单相对应的jQuery类对象。
create事件的ui对象由以下属性组成:
header:
当前正在创建的标题。
panel:
当前正在创建的内容。
表8-7列出了管理菜单事件的选项。
上面的事件选项也可以使用jQuery提供的bind()方法进行绑定,对应的事件名称为:
accordionactivate事件:
对应activate。
accordionbeforeactivate事件:
对应beforeActivate。
accordioncreate事件:
对应create。
8.3.4键盘交互当焦点在标题(header)上时,下面的键盘命令可用:
UP/LEFT:
移动焦点到上一个标题。
如果在第一个标题上,则移动焦点到最后一个标题上。
DOWN/RIGHT:
移动焦点到下一个标题。
如果在最后一个标题(header)上,则移动焦点到第一个标题上。
HOME:
移动焦点到第一个标题上。
END:
移动焦点到最后一个标题上。
SPACE/ENTER:
激活与获得焦点的标题相关的面板(panel)。
当焦点在面板中时,下面的键盘命令可用:
CTRL+UP:
移动焦点到相关的标题上。
8.4对话框dialogBoxes,8.4.1对话框的基本使用图8-12是jQueryUI为我们提供的对话框,此对话框包括文本内容和包含关闭按钮的标题栏。
用户可以移动页面上的对话框并调整其大小。
如果内容长度超过最大高度,会自动出现滚动条。
一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。
图8-12对话框,要实现这样的对话框,jQueryUI对我们的页面有如下要求:
一个body元素下的div元素,它必须要有title属性指定窗口标题。
在div元素中有包含说明文字的元素,用于显示对话框的内容。
下面的HTML代码是对话框模板代码,代码结构是jQueryUI提供的,最简单的方法是按照模板编写代码,可以避免很多不必要的问题。
在页面中放入如下HTML元素:
使用jQuery代码对元素应用dialog()方法:
运行代码后就能看到如图8-12所示的对话框。
另外,我们可以在页面中定义多个对话框,比如下面的代码:
我们定义了两个对话框,打开页面后显示如图8-13所示。
图8-13对话框页面效果,此时我们只能看到第二个(后面代码定义的)对话框。
这是因为所有对话框在出现时都是默认出现在页面的正中间,而代码中后面的HTML元素的显示级别要比前面的HTML元素显示级别高,所以对话框2遮挡了对话框1。
我们移动(或者关闭)对话框2后就能看到对话框1了。
效果如图8-14所示。
图8-14对话框页面效果,8.4.2修改对话框样式我们可以通过修改CSS类在默认主题上修改对话框的样式。
例如,如果修改与div元素相关联的ui-dialog-titlebarCSS类,就可以修改窗口标题的样式。
类似地,如果我们更改与div元素相关联的ui-dialog-contentCSS类,就可以修改窗口内容的样式。
比如下面的CSS代码:
上面的代码将窗口标题的背景颜色修改为蓝色,文字修改为白色;将窗口内容的文字大小修改为12px,页面效果如图8-15所示。
图8-15对话框页面效果,如果需要修改对话框的样式,则可以使用下面的CSS类名称:
ui-dialog:
对话框的外层容器。
ui-dialog-titlebar:
包含对话框标题和关闭按钮的标题栏。
ui-dialog-title:
对话框文本标题周围的容器。
ui-dialog-titlebar-close:
对话框的关闭按钮。
ui-dialog-content:
对话框内容周围的容器。
这也是部件被实例化的元素。
ui-dialog-buttonpane:
包含对话框按钮的面板。
只有当设置了buttons选项时才呈现。
ui-dialog-buttonset:
按钮周围的容器。
8.4.3dialog()方法此方法用于设置一个对话框。
对话框将在一个交互覆盖层中打开内容。
语法如下:
$(selector).dialog(options)$(selector).dialog(aciton,param)对话框options对象的选项见表8-8。
dialog()还有一些控制的方法,可以使用JavaScript来控制dialog窗口。
这些方法同样是使用参数的方式传入dialog()方法中。
可用的方法见表8-9。
与dialog窗口相关的事件见表8-10。
8.4.4焦点当打开一个对话框时,焦点会自动移动到满足下面条件的第一个项目:
带有autofocus属性的对话框内的第一个元素。
对话框内容中的第一个“:
tabbable”元素。
对话框按钮面板内的第一个“:
tabbable”元素。
对话框的关闭按钮。
对话框本身。
8.4.5dialog窗口实例下面的代码创建了一个对话框,在页面打开时不显示对话。
按钮分别是打开和关闭对话框,如果重复点击则做出提示。
比如对话框已经打开时,再点打开按钮则会弹出提示“对话框已打开”。
点击两次“打开”按钮时,页面效果如图8-16所示。
图8-16对话框页面效果,8.5日历datepicker,8.5.1日历的基本使用jQueryUI提供的日历(datepicker)有两种使用方式:
(1)作为日期选择控件;
(2)作为日历模块。
1.作为日期选择控件当我们需要用户在页面中输入时间时,我们经常会使用日期选择控件,HTML5为我们提供了一个基本的日期选择控件,但它比较难以控制样式,和当前主题不符。
jQueryUI也为我们提供了一个日期选择控件,我们只需要在页面中加入一个input元素,并使用jQuery代码给元素应用一个方法(datepicker()即可。
比如下面的代码:
这样我们就将一个普通的输入框改造成了日期输入控件。
页面效果如图8-17和图8-18所示。
图8-17元素获得焦点时,图8-18选择时间后,2.作为日历模块当我们需要在页面上显示一个日历模块时,我们可以把上面代码中的input元素换成一个div元素或span元素(或其他这类型的元素),HTML代码修改如下:
页面效果如图8-19所示,日历将静态显示,用户无需单击输入字段即可访问它。
图8-19日历模块,8.5.2修改日历样式我们可以通过修改CSS类在默认主题上修改日历的样式。
比如我们可以使用下面的CSS代码修改日历的样式:
.ui-datepicker-headerfont-size:
20px;background-color:
orange;.ui-datepicker-calendarborder:
3pxblackdashed;,上面的代码给日历的头部添加了橙色的背景色,将日历的边框加粗并修改为虚线。
效果如图8-20所示。
图8-20日历模块,与日历相关的CSS类总结如下:
ui-datepicker:
日期选择器的外层容器。
如果日期选择器是内联的,该元素会另外带有一个ui-datepicker-inlineclass。
如果设置了isRTL选项,该元素会另外带有一个ui-datepicker-rtlclass。
ui-datepicker-header:
日期选择器的头部容器。
ui-datepicker-prev:
用于选择上一月的控件。
ui-datepicker-next:
用于选择下一月的控件。
ui-datepicker-title:
日期选择器包含月和年的标题容器。
ui-datepicker-month:
月的文本显示,如果设置了changeui-datepicker-year:
年的文本显示,如果设置了changeYear选项则显示元素。
ui-datepicker-calendar:
包含日历的表格。
ui-datepicker-week-end:
周末的单元格。
ui-datepicker-other-month:
发生在某月但不是当前月天数的单元格。
ui-datepicker-unselectable:
用户不可选择的单元格。
ui-datepicker-current-day:
已选中日期的单元格。
ui-datepicker-today:
当天日期的单元格。
ui-datepicker-buttonpane:
当设置showButtonPanel选项时使用按钮面板(buttonpane)。
ui-datepicker-current:
用于选择当天日期的按钮。
如果“numberOfMonths”选项用于显示多个月份,则会使用一些额外的类:
ui-datepicker-multi:
一个多月份日期选择器的最外层容器。
该元素会根据要显示的月份个数另外带有ui-datepicker-multi-2、ui-datepicker-multi-3或ui-datepicker-multi-4class名称。
ui-datepicker-group:
分组内单独的选择器。
该元素会根据它在分组中的位置另外带有ui-datepicker-group-first、ui-datepicker-group-middle或ui-datepicker-group-lastclass名称。
8.5.3datepicker()方法日历方法有两种形式:
$(selector).datepicker(options)$(selector).datepicker(aciton,param)options是以对象键值对的形式传参,每个键值对表示一个选项;action是操作对话框方法的字符串,param则是options的某个选项。
1.日期格式设置表8-11中列举了datepicker()方法对日期格式设置的属性,表8-12中列举了日期格式化代码。
比如我们可以使用jQuery代码对日历做如下设置:
页面显示效果及属性对应的位置如图8-21所示。
图8-21日历设置后效果,2.日历外观设置表8-13列出了日历外观设置选项。
比如使用如下jQuery代码对日历进行设置:
页面显示效果如图8-22所示。
图8-22日历设置后效果,3.日期选择设置我们还可以对日历能够选择的日期进行设置,表8-14列出了相关设置选项。
4.日历的动画效果表8-15列举了设置日历动画效果的选项。
5.日历的事件选项表8-16列举了日历的事件选项。
比如禁用每个月的1号,可以使用下面的jQuery代码:
页面效果如图8-23所示。
图8-23日历设置后效果,6.日历的操作选项表8-17中列出了日历的操作方法。
8.6输入框自动补全autocomplete,8.6.1自动补全功能的基本使用比如页面上有一个输入框,需要用户输入一种编程语言,这个时候我们可以编写如下代码:
当输入“c”时,页面显示效果如图8-23所示。
图8-23自动补全功能,输入由ID为language的input元素完成,在HTML页面的script元素中,我们需要同时定义建议列表(varlanguages)和必须匹配的输入字段才能显示建议列表。
为此,只需指明input元素由jQueryUI提供的autocomplete()方法管理,同时使用source属性(source:
books)指定显示建议列表即可。
当用户输入时会触发input元素的事件,将input元素的内容与建议列表中的内容进行比对,满足条件的建议列表中的项将会显示在input元素的下方供用户选择。
有时候我们希望选中的项显示的内容和值是不同的,类似select元素的option,此时我们可以使用下面的jQuery定义数据源:
8.6.2修改自动补全功能的样式autocomplete()方法在输入字段下面创建了一个建议列表,并向相关元素添加新的CSS类,以赋予它们适当的样式。
如果我们要修改它们的样式,可以通过修改ui-autocomplete来修改弹出的选项列表的样式;通过修改ui-autocomplete-input来修改输入框的样式。
比如下面的CSS代码:
上面的代码增大输入框中的字体大小,减小提示项的字体大小,页面效果如图8-24所示。
图8-24修改样式后的自动补全功能,8.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于新信息技术的jQuery开发基础教程 大学 课程 基于 信息技术 jQuery 开发 基础教程 PPT 课件