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

第9章jQueryMobileDreamweaverCC中有两个JQuery的子项目，其一是jQueryMobile，即基于jQuery的手机网页制作工具，jQueryMobile的网站上包含了网页的设计工具、主题设计工具，jQueryMobile的js插件包含了换页、事件等的多项功能；其二是jQueryUI，即基于jQuery的用户界面库，包括拖放、缩放、对话框、标签页等多个组件。9.1??案例：利用jQueryMobile设计智能手机的网页【案例目的】利用jQueryMobile设计应用于320×480智能手机的网页，效果见图9-1，翻页如图9-2所示。【核心知识】学习使用jQueryMobile创建用于手机的网页。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中所示的各个组件。（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所示按钮。在DWCC中插入jQueryMobile的组件“按钮”，弹出如图9-19所示对话框。设置按钮属性。例1中，在页面1中“欢迎”下方插入一个无图标链接按钮，命名为“请转到页面二”；页面2中“再见”下方插入一个图标为“后退”的链接按钮，命名为“后退”。为两个按钮添加链接，并在代码窗口为其按钮增加属性data-inline=“true”，使按钮的边距适应其内容。例3：制作如图9-21所示工具栏。创建一个空白html文件，命名为JQ-gjl.html，插入jQueryMobile页面，选择查看窗口为480×800手机大小，输入标题为“我的主页”，标题前插入一个图标为首页的链接按钮，命名为“首页”；标题后插入一个图标为有哪些信誉好的足球投注网站的链接按钮，命名为“有哪些信誉好的足球投注网站”。选中“脚注”，打开属性窗口，如图9-22所示，将其格式由“标题4”改为“无”。在“脚注”处输入一组3个图标为加号的链接按钮，并分别命名为“分享到QQ空间”、“分享到新浪微博”和“分享到微信”。选中“首页”按钮，在属性窗口中设置其“类”为“ui-btn-left”。同样方法将“有哪些信誉好的足球投注网站”按钮的类设置为“ui-btn-right”。回到设计视图，选中页脚“footer”，在属性窗口中设置其“类”为“ui-btn”。9.1.3jQueryMobile列表视图例3：创建通讯录如图9-29所示，在有哪些信誉好的足球投注网站框中输入第一个字，则过滤其他，只显示要有哪些信誉好的足球投注网站的内容。创建一个空白html文