《响应式网页开发实战》教学教案第9章 jQuery Mobile样式Word文件下载.docx

1、分别用Chrome模拟器Galaxy S5和iPad，得到了自适应的网页显示效果，如图9.2和图9.3所示。 图9.2 Galaxy S5效果图9.3 iPad效果9.1.2 任务知识1jQuery Mobile页面按钮的添加2内联按钮与按钮组3jQuery Mobile页面的网格样式设置方法4jQuery Mobile页面主题样式的设置方法9.1.3 任务实施任务描述中需完成的网页是一个点击“上一张”和“下一张”按钮可以进行图片的浏览，点击“更换主题”按钮可查看不一样的主题样式。三个按钮采用网格样式显示在头部栏中。在Dreamweaver CS6中，创建Task9-1.html，在与内添加标

2、签，导入jQuery Moblie函数库，其部分源代码如下。div id=page1 data-role=page data-theme=a div data-role=header align=center data-position=fixeddiv class=ui-grid-bui-block-aa href=# class=ui-btnbutton data-icon=arrow-l前一张/divui-block-b#page2ui-btn ui-corner-all ui-shadow后一张ui-block-c#page-theme更换主题footerh1页脚!-第二个页面-pag

3、e2 page-themeb/body/html页面完整的CSS代码为Task9-1.html。9.2制作音乐点评网页（1）熟悉jQuery Mobile中的各种表单元素（2）掌握各种表单元素的设置和使用方法（3）掌握jQuery Mobile中列表组件的创建方法（4）掌握jQuery Mobile中各种列表的设置和使用方法jQuery Mobile中的各种表单元素和列表组件的设置和使用方法4课时9.2.1 任务描述引入jQuery Mobile框架，制作如图9.4（1）所示的歌曲列表网页，列表进行分类，点击某首歌曲后，进入对该歌曲的评分页面，效果如图9.4（2）所示。图9.4（1）歌曲列表图

4、9.4（2）评分页面分别用Chrome模拟器图Galaxy S5和iPad，得到了自适应的网页显示效果，如图9.5和图9.6所示。图9.5 Galaxy S5效果图9.6（1） 首页iPad效果图9.6（2） 评分页iPad效果9.2.2 任务知识1 jQuery Mobile页面列表组件的设置方法2jQuery Mobile页面表单元素的设置方法9.2.3 任务实施任务描述中需完成的网页是一个展示音乐列表并点击进入列表项进行相关评论的网页。在Dreamweaver CS6中，创建Task9-3.html，在标签，导入jQuery Moblie函数库，其音乐列表li#page1_1images

5、/11.jpgh3卡路里p火箭少女101-西虹市首富电影插曲span class=ui-li-count10w#page1-2images/22.jpg斗罗大陆萧敬腾-斗罗大陆主题曲6w#page1-1images/33.jpg天后薛之谦-蒙面唱将猜猜猜第二季第十一期轻音乐images/44.jpgRobot MonsterDon Ross-Robot Monsterimages/55.jpgCrazy随心听音乐-page1-1开始-page1_1客官请留言label for=text1ui-hidden-accessible留言区textarea placeholder=留言区 name=text id=/textarearange评分:input type= value=0 min= max=10-网格样式按钮-ui-grid-asubmit提交 /取消-page1-1结束-页面完整的CSS代码为Task9-3.html。