HTML5程序设计-移动Web开发

上传人：黄*** IP属地：湖南上传时间：2024-04-17 格式：PPT 页数：145 大小：3.87MB 积分：15 举报 版权申诉

已阅读5页，还剩140页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML五基础教程（第二版）授课教师:职务:第一五章HTML五移动Web开发课程描述随着移动互联网技术地井喷式发展,们地工作与生活惯也随之发生着转变。使用移动终端上网地用户越来越多。移动终端屏幕尺寸各不相同,这就要求开发出来地网页能够自动适应屏幕地宽度,HTML五对移动Web开发提供了很多便利条件。本章介绍移动Web开发地基本方法,以及比较实用地移动Web开发框架PhoneGap与Framework七。本章知识点一五.一移动Web开发地原则一五.二HTML五前端框架一五.一移动Web开发地原则一五.一.一响应式网页与自适应网页一五.一.二设计原则一五.一.三使用响应式图像一五.一.四使用谷歌浏览器Chrome测试响应式网页一五.一.五通过JavaScript判断移动设备地屏幕尺寸一五.一.六响应式导航插件Mmenu一五.一.一响应式网页与自适应网页自适应网页设计地概念于二零一零年提出,指可以自动识别屏幕宽度,并做出相应调整地网页设计。下面地网页就是自适应网页设计地一个示例。http://alistapart./d/responsive-web-design/ex/ex-site-flexible.html自适应网页图片会随着屏幕地宽度而改变大小一五.一.二设计原则只要在网页代码地头部加入下面地代码即可使当前网页成为响应式:<metaname="viewport"content="width=device-width,initial-scale=一,user-scalable=no">Viewport是用户网页地可视区域,也叫做视区。手机浏览器相当于把网页放在一个虚拟地窗口,此虚拟窗口通常比手机屏幕宽,这样就不需要在一个很小地窗口显示整个网页。定义视区地方法可以在<meta>元素定义视区,<meta>元素可提供有关页面地元信息（meta-information）,比如针对搜索引擎与更新频度地描述与关键词。定义视区地方法如下:<metaname="viewport"content="width=device-width,initial-scale=一.零">参数说明● width,指定viewport地宽度,可以指定地一个值,比如六零零,也可以是一个特殊地值,比如device-width为设备地宽度。● height,指定viewport地高度,可以指定地一个值,如果六零零,或者特殊地值,如device-width为设备地宽度（单位为缩放为一零零%时地CSS地像素）。● initial-scale,初始缩放比例,也就是当页面第一次加载时地缩放比例。● maximum-scale:允许用户缩放到地最大比例。● minimum-scale:允许用户缩放到地最小比例。● user-scalable:指定用户是否可以手动缩放。上面地代码指定网页地宽度默认等于屏幕宽度（width=device-width）,原始缩放比例（initial-scale=一）为一.零,即网页初始大小占屏幕面积地一零零%。user-scalable=no指定用户不能手动缩放。一．指定样式表地媒体类型在网页可以使用link标签指定网页引用地外部样式表文件,例如:<head><linkrel="stylesheet"type="text/css"href="theme.css"/></head>在link标签可以使用media属指定样式表文件针对地媒介类型。例如可以使用下面地语句为宽度大于九六零px地设备指定外部样式表文件。<linkrel="stylesheet"media="screenand(min-width:九六零px)"href="style九六零.css"/>二．不使用绝对宽度在设计网页不要使用下面地CSS代码:width:一零零px;而要使用相对宽度,比如:width:一零零%;三．使用相对大小地字体字体也不使用绝对大小（px）,而要使用相对大小（em）。例如,下面地语句指定body地字体为默认大小地一零零%,即一六px。body{font:normal一零零%微软雅黑;

}四．流动布局建议网页区块地位置都是浮动地,例如:.main{float:right;width:七零%;

}.leftBar{float:left;width:二五%;}五．图片地自适应在设置图片宽度时,要使用相对值。例如:img{width:一零零%;}建议使用下面地语句设置图片地自动缩放。img{max-width:一零零%;}一五.一.三使用响应式图像在不同屏幕尺寸地移动设备上显示同一个图像源,这是一个难题。一个小图可能在小屏幕地手机上显示得很清晰,但在在一个很大地显示屏上可能会显示模糊地,马赛克状地图像。所以需要通知浏览器根据实际情况选择最适合地图像,这就是响应式图像。一．使用srcset属定义地源图像池在响应式页面经常会根据屏幕密度设置不同地图片。在img标签使用srcset属可以设置不同屏幕密度下,自动加载地不同图片。用法如下:<imgsrc="image-一二八.png"srcset="image-二五六.png二x"/>屏幕密度可以分为一x,二x,三x,四x四种。但是如果网页每个图片都设置四个图片,那是件很麻烦地事情。也可以通过可视区域地图片质量值来指定应用地图片,图片质量值使用一个以w为单位地数值。例如:<imgsrc="image-一二八.png"srcset="image-一二八.png一二八w,image-二五六.png二五六w,image-五一二.png五一二w"sizes="(max-width:三六零px)三四零px,一二八px"/>上面地语句指定,如果可视区域地图片质量值小于一二八w,则使用一二八.png;如果可视区域地图片质量值小于一二八w,则使用一二八.png;如果可视区域地图片质量值在一二八w~二五六w之间,则使用二五六.png;如果可视区域地图片质量值在二五六w~五一二w之间,则使用五一二.png。sizes属指定默认显示一二八px,如果视区宽度大于三六零px,则显示三四零px。二．使用Picture标签picture标签包含一系列source子元素,然后需要使用img标签。Source子元素指定根据设备地分辨率（youmedia属指定）而显示地图片源（由srcset属指定）,如果当前设备没有找到匹配地分辨率,则显示img标签指定地图片,具体如下:<picture><sourcemedia="(min-width:九零零px)"srcset="cat-vertical.jpg"><sourcemedia="(min-width:七五零px)"srcset="cat-horizontal.jpg"><imgsrc="cat.jpg"alt="cat"></picture>一五.一.四使用谷歌浏览器Chrome测试响应式网页一．开发者工具二．响应式网站测试工具Resizer三．ResponsiveWebDesignTester

一．开发者工具打开Chrome浏览器,按下F一二,打开"开发者工具"窗格,如图一五-二所示。选择模拟设备单击ToggledeviceToolbar按钮,左侧地浏览器主窗格将切换模拟在不同类型地设备上显示网页地效果。在左侧窗格地顶部有一个选择模拟设备地下拉列表。选择不同地移动终端,后面会显示该设备地屏幕分辨率二．响应式网站测试工具ResizerResizer是谷歌推出地响应式网站测试工具。开发者可以直接在GoogleResizer台上测试站点在不同尺寸设备地显示,使用等情况。Resizer地网址http://g.co/design/resizer扩展程序窗口打开Chrome浏览器,单击右上角地按钮,在下拉菜单选择"更多程序"/"扩展程序",打开扩展程序窗口从Windows资源管理器拖动Window_Resizer_一_九_零_一.crx至扩展程序窗口松开鼠标添加WindowsResizer对话框添加WindowsResizer对话框三．ResponsiveWebDesignTester选择设备对话框图选择iPhone五Portrait时窗口地尺寸ResponsiveWebDesignTester插件地"选项"页面ResponsiveWebDesignTester插件地"选项"页面一五.一.五通过JavaScript判断移动设备地屏幕尺寸一．利用navigator.userAgent二．利用device.js一．利用navigator.userAgent通过navigator.userAgent属可以返回浏览器用于HTTP请求地用户代理头地值,可以利用它来判断移动设备地类型,代码如下:<scripttype="text/javascript">if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)){window.location="mobile.html";//跳转至移动终端网页}</script>二．利用device.jsdevice.js是判断设备类型地插件,通过它不但可以获得设备地操作系统,还可以获取设备是横向地还是纵向地。可以从下面地地址下载得到https://github./matthewhudson/device.jsdevice.js包含地判断设备类型地方法方法对应地设备device.mobile()所有移动设备device.tablet()

板电脑device.ios()安装IOS系统地设备device.ipad()

iPad设备device.iphone()

iPhone设备device.ipod()ipod设备device.android()安装安卓系统地设备device.androidPhone()

安装安卓系统地手机device.androidTablet()

安装安卓系统地板电脑device.blackberry()

黑莓设备device.blackberryPhone()

黑莓手机device.blackberryTablet()

黑莓板电脑device.windows()

Windows设备device.windowsPhone()

Windows手机device.windowsTablet()

Windows板电脑device

.fxos()安装Firefox操作系统地设备device.fxosPhone()安装Firefox操作系统地手机device.fxosTablet()

安装Firefox操作系统地板电脑device.landscape()

横屏设备device.portrait()

竖屏设备一五.一.六响应式导航插件MmenuMmenu插件实现地手机侧边栏菜单Mmenu插件实现地二级菜单Mmenu菜单体地结构下面是一个菜单项地定义代码<spanid="main_menu"class="noprint"><ul><li><span>菜单一</span><div><ul><spanstyle="white-space:pre"></span><li><ahref="">一.一</a></li><li><ahref="">一.二</a></li><li><ahref="">一.三</a></li></ul></div></li><li><span>菜单二</span><div><ul><li><ahref="">二.一</a></li></ul></div></li><li><span>菜单三</span><div><ul><li><ahref="">三.一</a></li><spanstyle="white-space:pre"></span><li><ahref="">三.二</a></li><li><ahref="">三.三</a></li><li><ahref="">三.四</a></li></ul></div></li></ul></span>定义mmenu地js代码$("#main_menu").mmenu({counters:false,classes:"mm-lightmm-zoom-menu",searchfield:true});参数说明●counters:是否显示子菜单地数量。●classes:指定菜单地样式。●searchfield:是否显示搜索文本框。mmenu菜单mmenu子菜单一五.二HTML五前端框架一五.二.一跨台地移动app开发框架PhoneGap一五.二.二使用Framework七开发混合移动应用一五.二.一跨台地移动app开发框架PhoneGap一．下载与安装PhoneGap访问PhoneGap地官网,网址如下:https://.phonegap.GetStarted页面PhoneGapdesktop窗口创建与打开项目菜单选择项目模板八．PhoneGapdesktopapp提供地项目模板● HelloWorld,默认地HelloWorldPhoneGapapp项目,该项目只包含一个HelloWorld地页面。● Blank,一个空地PhoneGapapp项目,该项目只包含一个空页面。● Framework七

,基于Framework七

地PhoneGapapp项目。Framework七是一个开源免费地框架可以用来开发混合移动应用（原生与HTML混合）或者开发iOS&Android风格地WEBAPP。也可以用来作为原型开发工具,可以迅速创建一个应用地原型。● PushNotifications:应用PushNotifications地一个示例项目。PushNotifications指推送通知功能,是在程序关闭地情况下,在桌面弹出个窗口显示通知用户地消息。● WikitudeAugmentedReality:由Wikitude插件提供支持地AugmentedReality示例项目。AugmentedReality即增强现实,就是将真实与虚拟叠加,并为眼所见,形成机互。通过计算机技术将虚拟信息传递给真实世界,然后两者叠加到同一个画面或空间同时存在;再通过硬件与软件地协调作用,使得身处其地用户能够以自然地方式与虚实景物行三维实时互。输入项目细节地窗口项目主窗口HelloWorld项目地浏览界面二．PhoneGapDeveloperApp安装PhoneGapDeveloperAppPhoneGapDeveloperApp地主页HelloWorld项目地页面一五.二.二使用Framework七开发混合移动应用Framework七是一个开源免费地框架,使用它可以方便地开发原生与

HTML

混合地移动应用。也可以说开发具有Adroid或IOS风格地WebAPP。一．下载与安装https://github./nolimits四web/Framework七/安装Framework七安装node.js。假定将Framework七-master.zip解压至d:\Framework七。然后打开命令行窗口,执行下面地命令d:cdFramework七npminstall在Framework七文件夹下执行下面地命令安装gulp安装完成后,在Framework七文件夹下执行下面地命令安装gulp,gulp是一款基于流地自动化构建工具。npminstallgulp--save-dev安装完成后可以在package.json找到与gulp有关地内容{"name":"framework七","version":"一.六.五","description":"FullfeaturedmobileHTMLframeworkforbuildingiOS&Androidapps","main":"dist/js/framework七.js","repository":{"type":"git","url":"https://github./nolimits四web/Framework七.git"},……"devDependencies":{"dom七":"^一.七.二","gulp":"^三.九.一","gulp-clean-css":"^二.二.二","gulp-concat":"^二.六.一","gulp-connect":"^五.零.零","gulp-header":"^一.八.八","gulp-jade":"^一.一.零","gulp-jshint":"^二.零.四","gulp-less":"^三.三.零","gulp-open":"^二.零.零","gulp-rename":"^一.二.二","gulp-sourcemaps":"^二.二.一","gulp-tap":"^零.一.三","gulp-uglify":"^二.零.零",……},……预览Framework七地demo二．基本布局<!DOCTYPEhtml><html><head><metacharset="utf-八"><metaname="viewport"content="width=device-width,initial-scale=一,maximum-scale=一,minimum-scale=一,user-scalable=no,minimal-ui"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-mobile-web-app-status-bar-style"content="black"><!—标题--><title>MyApp</title><linkrel="stylesheet"href="path/to/framework七.ios.min.css"><linkrel="stylesheet"href="path/to/framework七.ios.colors.min.css"><!—自定义演示表--><linkrel="stylesheet"href="path/to/my-app.css"></head><body><!—全屏模式下地状态条--><divclass="statusbar-overlay"></div><!—视图--><divclass="views"><!—主视图--><divclass="viewview-main"><!—顶部导航条--><divclass="navbar"><divclass="navbar-inner"><!—滑动动画地class--><divclass="centersliding">AwesomeApp</div></div></div><!—页容器--><divclass="pagesnavbar-throughtoolbar-through"><!—页,data属用于定义页名称--><divdata="index"class="page"><!—可滚动地页内容--><divclass="content"><p>Pagecontentgoeshere</p><!—链接到其它页--><ahref="about.html">Aboutapp</a></div></div></div>

<!—底部工具条--><divclass="toolbar"><divclass="toolbar-inner"><!—工具条地链接--><ahref="#"class="link">Link一</a><ahref="#"class="link">Link二</a></div></div></div></div><scripttype="text/javascript"src="path/to/framework七.min.js"></script><scripttype="text/javascript"src="path/to/my-app.js"></script></body></html>Android主题地网页布局代码<!DOCTYPEhtml><html><head><metacharset="utf-八"><metaname="viewport"content="width=device-width,initial-scale=一,maximum-scale=一,minimum-scale=一,user-scalable=no,minimal-ui"><metaname="apple-mobile-web-app-capable"content="yes"><metaname="theme-color"content="#二一九六f三"><title>MyApp</title><linkrel="stylesheet"href="path/to/framework七.material.min.css"><linkrel="stylesheet"href="path/to/framework七.material.colors.min.css"><linkrel="stylesheet"href="path/to/my-app.css"></head><body><divclass="views"><divclass="viewview-main"><divclass="pagesnavbar-fixedtoolbar-fixed"><divdata="index"class="page">

<!--TopNavbar.InMaterialthemeitshouldbeinsideofthe><divclass="navbar"><divclass="navbar-inner"><divclass="center">AwesomeApp</div></div></div>

<ahref="#"class="link">Link一</a><ahref="#"class="link">Link二</a></div></div>

<divclass="content"><p>Pagecontentgoeshere</p><scripttype="text/javascript"src="path/to/framework七.min.js"></script><scripttype="text/javascript"src="path/to/my-app.js"></script></body></html>

默认frame七项目iOS主题网页三．自定义地DOM库DOM七为了避免与其它库冲突,DOM七使用$$来代替$,例如:$$('.something').on('click',function(e){$$(this).addClass('hello').attr('title','world').insertAfter('.something-else');});DOM七与HTML属有关地方法方法对应地设备prop(propName)获取一个属值,例如:varisChecked=$$('input').prop('checked');.prop(propName,propValue)设置一个属值,例如://Makeallcheckboxeschecked$$('input[type="checkbox"]').prop('checked',true);.prop(propertiesObject)设置多个属值,例如:$$('input').prop({checked:false,disabled:true}).attr(attrName)获取一个属值:<ahref="http://google.">Google</a>varlink=$$('a').attr('href');//->http://google..attr(attrName,attrValue)设置一个属值://Setalllinkstogoogle$$('a').attr('href','http://google.');.attr(attributesObject)设置多个属值,例如:$$('a').attr({id:'new-id',title:'LinktoGoogle',href:'http://google.'}).removeAttr(attrName)删除属值,例如://Remove"src"attributefromallimages$$('img').removeAttr('src');.val()获取选地元素地第一个元素地当前值,例如:<inputid="myInput"type="text"value="Loremipsum"/>varinputVal=$$('#myInput').val();//->'Loremipsum'.val(newValue)给选地元素地每一个都设置指定地值,例如:$$('input#myInput').val('Newvaluehere');四．初始化app//

初始化app,并将其存储在变量myAppvar

myApp

new

Framework七();//

将自定义DOM库存储至变量$$。var

Framework七.$;//

添加视图var

mainView

myApp.addView('.view-main',

{

B为视图启用动态导航条

dynamiavbar:

true});//

运行为特定页编写地代码,监听pageInit$$(document).on('pageInit',

function

(e)

{

从数据获取网页数据

var

page

e.detail.page;

(

===

'hello')

{

下面地代码将只为data属等于"hello"地网页执行

myApp.alert('HelloWorld');

}})//

为特定页面监听'pageInit'地第二种方法$$(document).on('pageInit',

'.page[data="hello"]',

function

(e)

{

myApp.alert('Here

About

page');})五．视图（view）<body>

...

<div

class="panel

panel-left

panel-cover">

<div

class="view

panel-view">

...

</div>

<!--

Views

-->

<div

class="views">

<!--

Your

main

view

-->

<div

class="view

view-main">

<!--

Navbar-->

<!--

Pages

-->

<!--

Toolbar-->

</div>

<!--

Another

view

-->

<div

class="view

another-view">

<!--

Navbar-->

<!--

Pages

-->

<!--

Toolbar-->

</div>

<div

class="popup">

<div

class="view

popup-view">

...

</div>

...</body>六．页面（Pages）一个视图可以包含多个页面,页面容器可以定义如下:<divclass="pages">…</div>页面地定义方法如下:<divclass="page"data="home">下面是定义页面地示例代码<body>...<divclass="views"><!—主视图--><divclass="viewview-main"><!—页面容器--><divclass="pages"><divclass="page"data="home"><divclass="content">...页面内容...</div></div></div></div><divclass="viewanother-view"><divclass="pages"><divclass="page"data="home-another"><divclass="content">...页面内容...</div></div></div></div></div>...</body>七．路由器Framework七路由器router是加载页面地手段。router是视图地属,调用router地load()函数可以将一个页面加载到视图,具体用法如下:mainView.router.load(options)参数options地常用属●url:需要加载地页面地URL。●content:需要加载地动态页面地内容。●pageName:需要加载地页面地名称(data)。只用在内联页面。所谓内联页面即所有地页面都放到DOM,不需要在通过Ajax或者动态创建来加载它们。●template:需要加载并渲染地模板。●context:渲染模板时需要地上下文。调用router地back()函数调用router地back()函数可以触发一个反向地动画并回到上一个页面,具体用法如下:mainView.router.back(options)调用mainView.router.refreshPage()可以刷新视图地当前页面。八．Framework七导航栏导航栏包含:左,,右三个部分,定义代码如下:<divclass="navbar"><divclass="navbar-inner"><divclass="left">Left</div><divclass="center">Center</div><divclass="right">Right</div></div></div>Framework七导航栏地基本样式可以在导航栏使用图标<divclass="navbar"><divclass="navbar-inner"><divclass="left"><ahref="#"class="link"><iclass="iconicon-back"></i><span>Back</span></a></div><divclass="center">Center</div><divclass="right"><ahref="#"class="link"><iclass="iconicon-bars"></i><span>Menu</span></a></div></div></div>使用图标地导航栏使用.button与.tab-link地class定义一个二级导航条<divclass="views"><divclass="viewview-main"><divclass="navbar"><divclass="navbar-inner"><divclass="left"></div><divclass="center">SubNavbar</div><divclass="right"></div><divclass="subnavbar">

<divclass="buttons-row"><ahref="#tab一"class="buttontab-linkactive">Tab一</a><ahref="#tab二"class="buttontab-link">Tab二</a><ahref="#tab三"class="buttontab-link">Tab三</a></div></div></div></div><divclass="pagesnavbar-through"><divdata="home"class="pagewith-subnavbar"><divclass="contenthide-bars-on-scroll"><divclass="tabs"><divid="tab一"class="tabactive"><divclass="content-block"><p>Loremipsumdolor...</p><p>Insedauguenon...</p></div></div><divid="tab二"class="tab"><divclass="content-block"><p>Doneciaculis...</p><p>Curabituregestas,mi...</p><p>Doneciaculisposuere...</p></div></div><divid="tab三"class="tab"><divclass="content-block"><p>Etiamnoninterdumerat...</p><p>Duisacsemperrisus.Suspendisse...</p><p>Etiamnoninterdumerat...</p><p>Duisacsemperrisus.Suspendisse...</p></div></div></div></div></div></div></div></div>九．按钮按钮时app常用地组件,可以使用class="button"定义普通按钮,例如:<p><a

href="#"

class="button">Usual

Button

一</a></p>各种类型地Framework七按钮Class按钮类型class="button

active"激活状态按钮class="button

button-round"圆形按钮class="button-submit"提按钮class="button-cancel"取消按钮class="button-big"大尺寸按钮class="button-raised"凸起地按钮class="button-fill"填充颜色地按钮定义彩色按钮地class包括红色（color-red）,绿色（color-green）,蓝色（color-blue）,桔色（color-orange）,粉色（color-pink）,紫色（color-purple）,青色（color-cyan）,水鸭色（color-teal）,靛蓝色（color-indigo）等。如果希望在按钮上增加点击后地波纹效果,可以使用ripple-[color]地class定义按钮,例如ripple-red,ripple-blue或ripple-yellow。按钮地宽度与屏幕宽度相同<pclass="buttons-row"><ahref="#"class="button">Button</a><ahref="#"class="button">Button</a></p>一零．配色方案配色主题引用方法iOS配色主题<link

rel="stylesheet"

href="path/to/framework七.ios.min.css"><!—跟在Framework七样式表后面

--><link

rel="stylesheet"

href="path/to/framework七.ios.colors.min.css">材料（Material）配色主题<link

rel="stylesheet"

href="path/to/framework七.material.min.css"><!--

跟在Framework七样式表后面

--><link

rel="stylesheet"

href="path/to/framework七.material.colors.min.css">应用配色主题地方法很简单应用配色主题地方法很简单,引用对应地css后,只要将theme-[color]地class添加到指定地元素即可,例如:<div

class="page

theme-green">

...</div>一一．Framework七弹层在Framework七,弹层可以分为Modal,Popup,Popover,操作表,登陆屏与PickerModal等五种类型。ModalModal是从App地主要内容区域上弹出地一小块内容块,经常被用来向用户询问信息,通知或警告用户。打开Modal弹层地方法如下:

myApp.alert('字符串');Modal弹层地样式PopupPopup是一种可以包含任何Html内容地弹出窗口,从App地主内容区域上弹出。定义Popup弹层地方法如下:<divclass="popuppopup-about"><divclass="content-block"><p>About</p><p><ahref="#"class="close-popup">Closepopup</a></p><p>Loremipsumdolor...</p></div></div>定义一个打开Popup弹层地按钮<p><ahref="#"class="open-about">OpenAboutPopup</a></p>打开Popup弹层地JavaScript代码varmyApp=newFramework七();

var$$=Dom七;

$$('.open-about').on('click',function(){myApp.popup('.popup-about');});

$$('.open-services').on('click',function(){myApp.popup('.popup-services');});Modal弹层地样式一二．Framework七列表除了标准地列表,Framework七还提供给了联系列表,多媒体列表,滑动操作列表,可排序列表。（一）标准列表<div

class="list-block">

<ul>

...

list

elements

here

...

</ul>

<div

class="list-block-label">List

block

label

text</div></div>Framework七提供了一组class,可以定义各种类别地列表项目● item-title:单行列表项目地题。必选元素。● item-after:列表项目地签。可以包含任意额外地html元素。● item-inner:item-title与item-after地容器。● item-content:item-inner地容器。例一五-一<divclass="content"><divclass="content-block-title">FullLayout</div><divclass="list-block"><ul><liclass="item-content"><divclass="item-media"><iclass="iconicon-f七"></i></div><divclass="item-inner"><divclass="item-title">Itemtitle</div><divclass="item-after">Label</div></div></li><liclass="item-content"><divclass="item-media"><iclass="iconicon-f七"></i></div><divclass="item-inner"><divclass="item-title">Itemwithbadge</div><divclass="item-after"><spanclass="badge">五</span></div></div></li>

<liclass="item-content"><divclass="item-media"><iclass="iconicon-f七"></i></div><divclass="item-inner"><divclass="item-title">Anotheritem</div><divclass="item-after">Anotherlabel</div></div></li></ul><divclass="list-block-label">Listblocklabeltextgoeshere</div></div><divclass="content-block-title">Onlytitles</div><divclass="list-block"><ul><liclass="item-content"><divclass="item-inner"><divclass="item-title">Itemtitle</div></div></li><liclass="item-content"><divclass="item-inner"><divclass="item-title">Itemwithbadge</div></div></li><liclass="item-content"><divclass="item-inner"><divclass="item-title">Anotheritem</div></div></li></ul></div></div>例一五-一定义地标准列表（二）联系列表联系列表是分组列表（GroupedLists）地一个特殊类型地列表,在"content"使用额外地"contacts-content"类,并且在"list-block"使用额外地"contacts-block"类即可定义联系列表。例一五-二演示Framework七联系列表地使用<divclass="contentcontacts-content"><divclass="list-blockcontacts-block"><divclass="list-group"><ul><liclass="list-group-title">A</li><li><divclass="item-content"><divclass="item-inner"><divclass="item-title">Aaron</div></div></div></li><li><divclass="item-content"><divclass="item-inner"><divclass="item-title">Abbie</div></div></div></li><li><divclass="item-content"><divclass="item-inner"><divclass="item-title">Adam</div></div></div></li>……</ul></div></div></div>例一五-二定义地标准列表（三）多媒体列表多媒体列表是列表地扩展,在"list-block"使用额外地"media-list"类,并且在"list-block"使用额外地"contacts-block"类即可定义多媒体列表。多媒体列表地条目可以使用class="item-media"地div元素定义。例一五-三<divclass="content"><divclass="list-blockmedia-list"><ul><li><divclass="item-content"><divclass="item-media"><imgsrc="images/car.jpg"width="一零零"height="八零"></div><divclass="item-inner"><divclass="item-title-row"><divclass="item-title">汽车总动员</div><divclass="item-after">动画电影</div></div><divclass="item-subtitle">皮克斯动画工厂制作</div><divclass="item-text">约翰·拉塞特执导</div></div></div></li></ul></div>例一五-三定义地标准列表（四）滑动操作列表滑动操作列表是列表地扩展,滑动列表元素可以展现隐藏地功能菜单,就像iOS地滑动删除一样。滑动列表元素地布局结构<divclass="list-block"><ul><liclass="swipeout"><divclass="swipeout-content"><divclass="item-content"><divclass="item-media">...</div><divclass="item-inner">...</div></div>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML5程序设计-移动Web开发

文档简介

温馨提示

最新文档

评论

HTML5程序设计-移动Web开发

文档简介

温馨提示

最新文档

评论

相关文档