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

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

《《响应式网页开发实战》教学教案第9章 jQuery Mobile样式Word文件下载.docx》由会员分享，可在线阅读，更多相关《《响应式网页开发实战》教学教案第9章 jQuery Mobile样式Word文件下载.docx（14页珍藏版）》请在冰豆网上搜索。

分别用Chrome模拟器GalaxyS5和iPad，得到了自适应的网页显示效果，如图9.2和图9.3所示。

图9.2GalaxyS5效果

图9.3iPad效果

9.1.2任务知识

1jQueryMobile页面按钮的添加

2内联按钮与按钮组

3jQueryMobile页面的网格样式设置方法

4jQueryMobile页面主题样式的设置方法

9.1.3任务实施

任务描述中需完成的网页是一个点击“上一张”和“下一张”按钮可以进行图片的浏览，点击“更换主题”按钮可查看不一样的主题样式。

三个按钮采用网格样式显示在头部栏中。

在DreamweaverCS6中，创建Task9-1.html，在<

head>

与<

/head>

内添加<

meta>

标签，导入jQueryMoblie函数库，其部分源代码如下。

<

body>

divid="

page1"

data-role="

page"

data-theme="

a"

>

<

divdata-role="

header"

align="

center"

data-position="

fixed"

divclass="

ui-grid-b"

ui-block-a"

ahref="

#"

class="

ui-btn"

button"

data-icon="

arrow-l"

前一张<

/a>

/div>

ui-block-b"

#page2"

ui-btnui-corner-allui-shadow"

后一张<

ui-block-c"

#page-theme"

更换主题<

content"

style="

text-align:

imgsrc="

images/1.jpg"

width="

90%"

/>

footer"

h1>

页脚<

/h1>

!

--第二个页面-->

page2"

<

#page1"

images/2.jpg"

--主题为b页面-->

page-theme"

b"

/body>

/html>

页面完整的CSS代码为Task9-1.html。

9.2制作音乐点评网页

（1）熟悉jQueryMobile中的各种表单元素

（2）掌握各种表单元素的设置和使用方法

（3）掌握jQueryMobile中列表组件的创建方法

（4）掌握jQueryMobile中各种列表的设置和使用方法

jQueryMobile中的各种表单元素和列表组件的设置和使用方法

4课时

9.2.1任务描述

引入jQueryMobile框架，制作如图9.4

（1）所示的歌曲列表网页，列表进行分类，点击某首歌曲后，进入对该歌曲的评分页面，效果如图9.4

（2）所示。

图9.4

（1）歌曲列表

图9.4

（2）评分页面

分别用Chrome模拟器图GalaxyS5和iPad，得到了自适应的网页显示效果，如图9.5和图9.6所示。

图9.5GalaxyS5效果

图9.6

（1）首页iPad效果

图9.6

（2）评分页iPad效果

9.2.2任务知识

1jQueryMobile页面列表组件的设置方法

2jQueryMobile页面表单元素的设置方法

9.2.3任务实施

任务描述中需完成的网页是一个展示音乐列表并点击进入列表项进行相关评论的网页。

在DreamweaverCS6中，创建Task9-3.html，在<

标签，导入jQueryMoblie函数库，其<

之间实现的源代码如下。

--首页开始-->

音乐列表<

uldata-role="

listview"

data-divider-theme="

data-inset="

true"

lidata-role="

list-divider"

流行歌曲

/li>

li>

#page1_1"

images/11.jpg"

h3>

卡路里<

/h3>

p>

火箭少女101-《西虹市首富》电影插曲<

/p>

spanclass="

ui-li-count"

10w<

/span>

#page1-2"

images/22.jpg"

斗罗大陆<

萧敬腾-《斗罗大陆》主题曲<

6w<

#page1-1"

images/33.jpg"

天后<

薛之谦-《蒙面唱将猜猜猜》第二季第十一期<

轻音乐

images/44.jpg"

RobotMonster<

DonRoss-RobotMonster<

images/55.jpg"

Crazy<

DonRoss-BreakfastforDogs!

/ul>

随心听音乐<

--第一页结束-->

--page1-1开始-->

page1_1"

客官请留言<

form>

labelfor="

text1"

ui-hidden-accessible"

留言区<

/label>

textareaplaceholder="

留言区"

name="

text"

id="

/textarea>

range"

评分:

inputtype="

value="

0"

min="

max="

10"

--网格样式按钮-->

ui-grid-a"

submit"

提交"

/>

取消<

/form>

--page1-1结束-->

页面完整的CSS代码为Task9-3.html。