《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结

9.22 小结

本章以jQuery Mobile的基本简介开始。jQuery的这部分内容与jQuery Core和jQuery UI有所不同。它要求你将整个HTML更改为JavaScript框架容易处理的结构。

简介之后,介绍了基本的页面导航机制,包括底层的AJAX调用和过渡动画。接着,讨论了页面的基本元素,比如header和footer。有多个更改header和footer行为的选项。可以把它们设置成固定的位置,甚至在导航至别的页面时也保持不变,也可以根据需要隐藏它们。

本章的结尾有许多自定义的JavaScript调用示例,可以使用它们来更改jQuery Mobile的默认行为。

时间: 2024-10-30 00:11:46

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结的相关文章

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.6 技巧:使用对话框微件引起注意

7.6 技巧:使用对话框微件引起注意 如果想使网页中的一小部分内容脱颖而出,有几种方法可以实现它.其中一个方法是用对话框的形式显示内容.jQuery UI提供了这样一个对话框组件(dialog).代码清单7-6演示了如何从一个常见的段落元素创建对话框. 代码清单7-6 将段落元素转换为对话框 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Di

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.8 技巧:使用滑块微件获取数字

7.8 技巧:使用滑块微件获取数字 在客户端应用程序中,你有时会发现滑块用做输入数字的元素.滑块的优点是,它比数字输入框更可视化和更直观. 代码清单7-8展示了如何将div改成滑块(slider)微件. 代码清单7-8 将 元素转换为滑块并显示其值 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Slider</title> 05

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.5 技巧:使用日历微件选择日期

7.5 技巧:使用日历微件选择日期 在HTML5之前,在Web页面中选择日期是很痛苦的.甚至支持了HTML5的浏览器中仍有一些不能提供一个好用的日历. 代码清单7-5展示了jQuery UI提供的datepicker,它可以用于传统的输入框. 代码清单7-5 帮助网站用户输入日期 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Datepick

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2 技巧:使用自动补全微件提示输入值

7.2 技巧:使用自动补全微件提示输入值 在一些网站上,你可以找到用于选择的下拉菜单,它们包含了极长的选项列表.在许多情况下,可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户.省去了滚动选择,用户只要输入目标选项的第一个字符,然后自动补全组件便可以完成剩下的事. 代码清单7-2提供了一个自动补全的例子,它使用一段称为"Lorem Ipsum"的文字来实现输入第一个字后的补全.这段文字起源于两千年前,但仍然使用在图形设计和排版行业(通常被称为"假文"或&quo

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.7 技巧:使用进度条微件显示进程的状态

7.7 技巧:使用进度条微件显示进程的状态 当Web应用程序执行一个动作的持续时间超过大约两秒钟时,为用户显示动作状态是一个很好的做法.如果不知道动作的状态,通常会改变鼠标光标或显示一个旋转的效果. 在某些情况下,你能知道进程的进度.在这种情况下,最好尽可能准确地满足用户的期待.代码清单7-7介绍了jQuery UI的进度条(progressbar),可以使用它实现这样的目的. 代码清单7-7 将一个 元素转换为进度条 00 <!DOCTYPE html> 01 02 <html lan

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.3 技巧:将元素转换为按钮微件

7.3 技巧:将元素转换为按钮微件 一般情况下,HTML提供了多种方法创建看似按钮的元素,甚至不使用CSS样式或JavaScript.回想一下,比如button元素.类型为button和submit的输入框. 通过结合CSS和JavaScript,任何元素都可以做成如按钮一样的外观.代码清单7-3演示了jQuery UI如何帮助你创建按钮. 代码清单7-3 选取一列元素并装饰成按钮 00 <!DOCTYPE html> 01 02 <html lang="en">

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4 示例:使用按钮集装饰单选框

7.4 示例:使用按钮集装饰单选框 除了button,jQuery UI还提供了buttonset(按钮集).代码清单7-4演示了如何使用buttonset将一组单选框装饰成普通按钮的样式,其中每次只能选中一个按钮. 代码清单7-4 装饰一组单选框 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Radio</title> 05 &

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第9章 使用jQuery Mobile来导航页面 9.1技巧:搭建jQuery Mobile基础页面

第9章 使用jQuery Mobile来导航页面 本章介绍jQuery Mobile的基础知识,讲述了使用该框架来搭建页面,导航至其他页面,使用AJAX请求加载内容,以及提供平滑的过渡动画.在页面中,有确定的基础元素(如header1.footer),它们的行为会根据指定的选项而有所不同.这里的"页面搭建,组合基础元素(如column).事件以及最少量的自定义JavaScript代码"是使用jQuery Mobile的基本要素. 9.1 技巧:搭建jQuery Mobile基础页面 j

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15 技巧:优化header和footer以便全屏查看

9.15 技巧:优化header和footer以便全屏查看 jQuery Mobile提供了一个叫做"全屏模式"的功能.它表示,在默认情况下header和footer是覆盖在content上面的,当点击了content区时,header和footer会消失.如果你在手机上安装了Web应用程序(应用程序间有书签图标)或者当你将自己的Web应用程序与原生的Web应用程序框架(比如Phonegap)集成时,你的应用程序就可以全屏显示:没有浏览器的地址栏.工具栏以及状态栏.为了能最佳利用&qu