《Dreamweaver CC网页设计与制作教程》课件-第9章 jQuery Mobile

第9章jQueryMobileDreamweaverCC中有两个JQuery的子项目，其一是jQueryMobile，即基于jQuery的手机网页制作工具，jQueryMobile的网站上包含了网页的设计工具、主题设计工具，jQueryMobile的js插件包含了换页、事件等的多项功能；其二是jQueryUI，即基于jQuery的用户界面库，包括拖放、缩放、对话框、标签页等多个组件。9.1

案例：利用jQueryMobile设计智能手机的网页【案例目的】利用jQueryMobile设计应用于320×480智能手机的网页，效果见图9-1，翻页如图9-2所示。【核心知识】学习使用jQueryMobile创建用于手机的网页。图9-1jQueryMobile制作的网页图9-2翻页效果9.1

案例：利用jQueryMobile设计智能手机的网页9.1.1

创建jQueryMobile起始页jQueryMobile起始页包括HTML、CSS、JavaScript和图像文件，可用于设计应用程序。可使用CDN和自有服务器上承载的CSS和JavaScript文件，也可使用随Dreamweaver一同安装的文件。选择“文件”→“新建”，选择“启动器模板”，示例文件夹中为“Mobile起始页”。选择“jQueryMobile（本地）”，使用位于本地磁盘上的文件，单击【创建】按钮，创建一个新的文件。单击切换到【实时视图】查看。9.1

案例：利用jQueryMobile设计智能手机的网页9.1.2jQueryMobile按钮DWCC中的jQueryMobile有一组非常有用的组件，使得开发者可以很方便的创建复杂的应用程序，一般在原生的html里面没有这些控件或者组件。在DWCC中新建一个html文件并命名，在“插入”→“jQueryMobile”的下拉菜单中，显示如图9-9所示的所有jQueryMobile控件。选择“页面”，并选择“查看”→“窗口大小”为320×480的智能手机，如图9-10所示。“标题”用于创建页面上方的工具栏，比如搜索按钮。“内容”即用于定义页面的内容，比如文本、图像、表单和按钮等。“脚注”用于创建页面底部的工具栏。在这些容器中，可以使用如图9-9中所示的各个组件。图9-10插入JQueryMobile的页面组件例1：制作如图9-11示可相互转换的页面。图9-11可转换页面（1）在DWCC中新建一个空白jq2.html文件，选择窗口大小为320×480的智能手机，“插入”→“jQueryMobile”→“页面”，在其中为ID命名为page1。（2）并继续插入一个页面，为其命名为page2。（3）在page1和page2中分别输入内容。（4）在page1中选择“请转到页面二”，打开“属性”面板，在“链接”处输入“#page2”。同样方法将page2中的“请回到页面一”链接到page1。转换到【实时视图】。（5）对话框是用来显示信息或请求输入的常见视窗类型。如需在用户点击（轻触）链接时，对象不是一个页面，而是一个对话框，可以向该链接添加data-rel="dialog"。转换到【代码】或者【拆分】视图，在页面1的链接处加上代码“data-rel=”dialog””。则将页面2定义对话框形式。例2：将例1中的两个链接项改为如图9-18所示按钮。图9-18使用按钮在DWCC中插入jQueryMobile的组件“按钮”，弹出如图9-19所示对话框。设置按钮属性。例1中，在页面1中“欢迎”下方插入一个无图标链接按钮，命名为“请转到页面二”；页面2中“再见”下方插入一个图标为“后退”的链接按钮，命名为“后退”。为两个按钮添加链接，并在代码窗口为其按钮增加属性data-inline=“true”，使按钮的边距适应其内容。例3：制作如图9-21所示工具栏。图9-21制作如图工具栏创建一个空白html文件，命名为JQ-gjl.html，插入jQueryMobile页面，选择查看窗口为480×800手机大小，输入标题为“我的主页”，标题前插入一个图标为首页的链接按钮，命名为“首页”；标题后插入一个图标为搜索的链接按钮，命名为“搜索”。选中“脚注”，打开属性窗口，如图9-22所示，将其格式由“标题4”改为“无”。图9-22在属性面板中修改格式在“脚注”处输入一组3个图标为加号的链接按钮，并分别命名为“分享到QQ空间”、“分享到新浪微博”和“分享到微信”。选中“首页”按钮，在属性窗口中设置其“类”为“ui-btn-left”。同样方法将“搜索”按钮的类设置为“ui-btn-right”。回到设计视图，选中页脚“footer”，在属性窗口中设置其“类”为“ui-btn”。9.1.3jQueryMobile列表视图例3：创建通讯录如图9-29所示，在搜索框中输入第一个字，则过滤其他，只显示要搜索的内容。图9-29可搜索的通讯录创建一个空白html文件，命名为JQ-list.html，选择查看窗口为320×480，插入jQueryMobile页面，标题处输入“通讯录”，在内容处插入jQueryMobile“列表视图”，弹出如图9-30所示对话框。设置属性。图9-30jQueryMobile“列表视图”对话框选择项目为9，凹入，输入联系人名称。选中“返回”按钮，在其属性窗口中设置按钮的类为“ui-btn-right”，将其设置在右侧，并设置相应的链接。在列表中添加搜索框，可以为网页添加搜索过滤器，切换到【代码】视图，代码中添加“data-filter=”true””。例4：制作如图9-35所示提醒日历。图9-35提醒日历（1）创建一个空白html文件，命名为JQ-rl.html，插入jQueryMobile页面，标题处输入“提醒日历”，在内容处插入jQueryMobile“列表视图”，选择列表类型为默认“无序”，选择项目为“3”，选择“凹入”、“文本说明”、“文本气泡”和“侧边”。（2）在第二个列表项的标题、文本说明和侧边处分别输入“英语考试”、“在9:30提醒”和“阶梯教室203”，删除文本气泡1。（3）同样方法在第三个列表项中输入“办公室会议”、“在13:00提醒”和“二楼会议室”，删除文本气泡1。在第一个列表项中输入标题日期“周三，12月3日，2014年”，删除文本说明和侧边，将文本气泡改为2。（4）选中标题日期，在属性窗口中取消链接“#”，将格式的“标题3”改为“无”。同样取消文本气泡2的链接。（5）使用列表分隔符（ListDividers）可以把第一个列表项设置为分隔项。通过为列表元素<li>元素添加data-role="list-divider"属性来实现。切换到【代码】或【拆分】窗口，为列表元素添加该属性。（6）在列表的下方插入jQueryMobile组件的一个链接按钮，图标“后退”，命名为“返回”，在代码窗口输入“data-inline="true"”，使按钮适应其内容，9.1.4jQueryMobile表单例5：制作如图9-43所示表单，单击【提交】按钮，可将表单提交到目的地。图9-43jQueryMobile表单（1）创建一个空白html文件，命名为JQ-bd.html，插入jQueryMobile页面，ID为“page1”。在标题处输入“jQueryMobile表单”。在内容处分别插入jQueryMobile“文本”、“密码”；插入“单选按钮”，在对话框中选择数目设为“2”，布局为“垂直”，将选项明名为“性别”，两个选项改为“男”和“女”；插入“复选框”，数目设为“5”，布局为“水平”；插入“电子邮件”、“文本区域”、“翻转切换开关”；插入两个“输入”按钮，“输入类型”分别定义为“提交”和“重置”，设置其“data-inline=”true””。（2）为各选项修改命名。（3）通过上述步骤制作完成表单的静态网页，若想进一步验证提交按钮，则需要为此表单添加<form>及其method（提交方式为post还是get）和action（提交的目的地）属性。这样可以设置submit按钮将表单内容提交到上面action=“”所指向的页面或者函数调用，然后可以在相应的页面或函数里通过方法获取所传递的表单内容。（4）重新制作一个QueryMobile页面，命名为JQ-bd-submit.html，在标题处输入“表单提交验证”，内容处输入“表单成功提交！”9.2案例2：jQueryMobile主题【案例目的】制作如图9-47所示带有主题的jQueryMobile页面。【核心知识】掌握jQueryMobile主题应用。图9-47带主题的jQueryMobile页面（1）选择“文件”→“新建”，选择“启动器模板”，在“新建文档”对话框中选择“包