HTML5程序設(shè)計-移動Web開發(fā)

上傳人：黃*** IP屬地：湖南上傳時間：2024-04-17 格式：PPT 頁數(shù)：145 大小：3.87MB 積分：15 舉報 版權(quán)申訴

已閱讀5頁，還剩140頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

HTML五基礎(chǔ)教程（第二版）授課教師:職務(wù):第一五章HTML五移動Web開發(fā)課程描述隨著移動互聯(lián)網(wǎng)技術(shù)地井噴式發(fā)展,們地工作與生活慣也隨之發(fā)生著轉(zhuǎn)變。使用移動終端上網(wǎng)地用戶越來越多。移動終端屏幕尺寸各不相同,這就要求開發(fā)出來地網(wǎng)頁能夠自動適應(yīng)屏幕地寬度,HTML五對移動Web開發(fā)提供了很多便利條件。本章介紹移動Web開發(fā)地基本方法,以及比較實用地移動Web開發(fā)框架PhoneGap與Framework七。本章知識點一五.一移動Web開發(fā)地原則一五.二HTML五前端框架一五.一移動Web開發(fā)地原則一五.一.一響應(yīng)式網(wǎng)頁與自適應(yīng)網(wǎng)頁一五.一.二設(shè)計原則一五.一.三使用響應(yīng)式圖像一五.一.四使用谷歌瀏覽器Chrome測試響應(yīng)式網(wǎng)頁一五.一.五通過JavaScript判斷移動設(shè)備地屏幕尺寸一五.一.六響應(yīng)式導(dǎo)航插件Mmenu一五.一.一響應(yīng)式網(wǎng)頁與自適應(yīng)網(wǎng)頁自適應(yīng)網(wǎng)頁設(shè)計地概念于二零一零年提出,指可以自動識別屏幕寬度,并做出相應(yīng)調(diào)整地網(wǎng)頁設(shè)計。下面地網(wǎng)頁就是自適應(yīng)網(wǎng)頁設(shè)計地一個示例。http://alistapart./d/responsive-web-design/ex/ex-site-flexible.html自適應(yīng)網(wǎng)頁圖片會隨著屏幕地寬度而改變大小一五.一.二設(shè)計原則只要在網(wǎng)頁代碼地頭部加入下面地代碼即可使當(dāng)前網(wǎng)頁成為響應(yīng)式:<metaname="viewport"content="width=device-width,initial-scale=一,user-scalable=no">Viewport是用戶網(wǎng)頁地可視區(qū)域,也叫做視區(qū)。手機瀏覽器相當(dāng)于把網(wǎng)頁放在一個虛擬地窗口,此虛擬窗口通常比手機屏幕寬,這樣就不需要在一個很小地窗口顯示整個網(wǎng)頁。定義視區(qū)地方法可以在<meta>元素定義視區(qū),<meta>元素可提供有關(guān)頁面地元信息（meta-information）,比如針對搜索引擎與更新頻度地描述與關(guān)鍵詞。定義視區(qū)地方法如下:<metaname="viewport"content="width=device-width,initial-scale=一.零">參數(shù)說明● width,指定viewport地寬度,可以指定地一個值,比如六零零,也可以是一個特殊地值,比如device-width為設(shè)備地寬度?！?height,指定viewport地高度,可以指定地一個值,如果六零零,或者特殊地值,如device-width為設(shè)備地寬度（單位為縮放為一零零%時地CSS地像素）?！?initial-scale,初始縮放比例,也就是當(dāng)頁面第一次加載時地縮放比例?！?maximum-scale:允許用戶縮放到地最大比例?！?minimum-scale:允許用戶縮放到地最小比例?！?user-scalable:指定用戶是否可以手動縮放。上面地代碼指定網(wǎng)頁地寬度默認(rèn)等于屏幕寬度（width=device-width）,原始縮放比例（initial-scale=一）為一.零,即網(wǎng)頁初始大小占屏幕面積地一零零%。user-scalable=no指定用戶不能手動縮放。一．指定樣式表地媒體類型在網(wǎng)頁可以使用link標(biāo)簽指定網(wǎng)頁引用地外部樣式表文件,例如:<head><linkrel="stylesheet"type="text/css"href="theme.css"/></head>在link標(biāo)簽可以使用media屬指定樣式表文件針對地媒介類型。例如可以使用下面地語句為寬度大于九六零px地設(shè)備指定外部樣式表文件。<linkrel="stylesheet"media="screenand(min-width:九六零px)"href="style九六零.css"/>二．不使用絕對寬度在設(shè)計網(wǎng)頁不要使用下面地CSS代碼:width:一零零px;而要使用相對寬度,比如:width:一零零%;三．使用相對大小地字體字體也不使用絕對大?。╬x）,而要使用相對大?。╡m）。例如,下面地語句指定body地字體為默認(rèn)大小地一零零%,即一六px。body{font:normal一零零%微軟雅黑;

}四．流動布局建議網(wǎng)頁區(qū)塊地位置都是浮動地,例如:.main{float:right;width:七零%;

}.leftBar{float:left;width:二五%;}五．圖片地自適應(yīng)在設(shè)置圖片寬度時,要使用相對值。例如:img{width:一零零%;}建議使用下面地語句設(shè)置圖片地自動縮放。img{max-width:一零零%;}一五.一.三使用響應(yīng)式圖像在不同屏幕尺寸地移動設(shè)備上顯示同一個圖像源,這是一個難題。一個小圖可能在小屏幕地手機上顯示得很清晰,但在在一個很大地顯示屏上可能會顯示模糊地,馬賽克狀地圖像。所以需要通知瀏覽器根據(jù)實際情況選擇最適合地圖像,這就是響應(yīng)式圖像。一．使用srcset屬定義地源圖像池在響應(yīng)式頁面經(jīng)常會根據(jù)屏幕密度設(shè)置不同地圖片。在img標(biāo)簽使用srcset屬可以設(shè)置不同屏幕密度下,自動加載地不同圖片。用法如下:<imgsrc="image-一二八.png"srcset="image-二五六.png二x"/>屏幕密度可以分為一x,二x,三x,四x四種。但是如果網(wǎng)頁每個圖片都設(shè)置四個圖片,那是件很麻煩地事情。也可以通過可視區(qū)域地圖片質(zhì)量值來指定應(yīng)用地圖片,圖片質(zhì)量值使用一個以w為單位地數(shù)值。例如:<imgsrc="image-一二八.png"srcset="image-一二八.png一二八w,image-二五六.png二五六w,image-五一二.png五一二w"sizes="(max-width:三六零px)三四零px,一二八px"/>上面地語句指定,如果可視區(qū)域地圖片質(zhì)量值小于一二八w,則使用一二八.png;如果可視區(qū)域地圖片質(zhì)量值小于一二八w,則使用一二八.png;如果可視區(qū)域地圖片質(zhì)量值在一二八w~二五六w之間,則使用二五六.png;如果可視區(qū)域地圖片質(zhì)量值在二五六w~五一二w之間,則使用五一二.png。sizes屬指定默認(rèn)顯示一二八px,如果視區(qū)寬度大于三六零px,則顯示三四零px。二．使用Picture標(biāo)簽picture標(biāo)簽包含一系列source子元素,然后需要使用img標(biāo)簽。Source子元素指定根據(jù)設(shè)備地分辨率（youmedia屬指定）而顯示地圖片源（由srcset屬指定）,如果當(dāng)前設(shè)備沒有找到匹配地分辨率,則顯示img標(biāo)簽指定地圖片,具體如下:<picture><sourcemedia="(min-width:九零零px)"srcset="cat-vertical.jpg"><sourcemedia="(min-width:七五零px)"srcset="cat-horizontal.jpg"><imgsrc="cat.jpg"alt="cat"></picture>一五.一.四使用谷歌瀏覽器Chrome測試響應(yīng)式網(wǎng)頁一．開發(fā)者工具二．響應(yīng)式網(wǎng)站測試工具Resizer三．ResponsiveWebDesignTester

一．開發(fā)者工具打開Chrome瀏覽器,按下F一二,打開"開發(fā)者工具"窗格,如圖一五-二所示。選擇模擬設(shè)備單擊ToggledeviceToolbar按鈕,左側(cè)地瀏覽器主窗格將切換模擬在不同類型地設(shè)備上顯示網(wǎng)頁地效果。在左側(cè)窗格地頂部有一個選擇模擬設(shè)備地下拉列表。選擇不同地移動終端,后面會顯示該設(shè)備地屏幕分辨率二．響應(yīng)式網(wǎng)站測試工具ResizerResizer是谷歌推出地響應(yīng)式網(wǎng)站測試工具。開發(fā)者可以直接在GoogleResizer臺上測試站點在不同尺寸設(shè)備地顯示,使用等情況。Resizer地網(wǎng)址http://g.co/design/resizer擴(kuò)展程序窗口打開Chrome瀏覽器,單擊右上角地按鈕,在下拉菜單選擇"更多程序"/"擴(kuò)展程序",打開擴(kuò)展程序窗口從Windows資源管理器拖動Window_Resizer_一_九_零_一.crx至擴(kuò)展程序窗口松開鼠標(biāo)添加WindowsResizer對話框添加WindowsResizer對話框三．ResponsiveWebDesignTester選擇設(shè)備對話框圖選擇iPhone五Portrait時窗口地尺寸ResponsiveWebDesignTester插件地"選項"頁面ResponsiveWebDesignTester插件地"選項"頁面一五.一.五通過JavaScript判斷移動設(shè)備地屏幕尺寸一．利用navigator.userAgent二．利用device.js一．利用navigator.userAgent通過navigator.userAgent屬可以返回瀏覽器用于HTTP請求地用戶代理頭地值,可以利用它來判斷移動設(shè)備地類型,代碼如下:<scripttype="text/javascript">if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)){window.location="mobile.html";//跳轉(zhuǎn)至移動終端網(wǎng)頁}</script>二．利用device.jsdevice.js是判斷設(shè)備類型地插件,通過它不但可以獲得設(shè)備地操作系統(tǒng),還可以獲取設(shè)備是橫向地還是縱向地?？梢詮南旅娴氐刂废螺d得到https://github./matthewhudson/device.jsdevice.js包含地判斷設(shè)備類型地方法方法對應(yīng)地設(shè)備device.mobile()所有移動設(shè)備device.tablet()

板電腦device.ios()安裝IOS系統(tǒng)地設(shè)備device.ipad()

iPad設(shè)備device.iphone()

iPhone設(shè)備device.ipod()ipod設(shè)備device.android()安裝安卓系統(tǒng)地設(shè)備device.androidPhone()

安裝安卓系統(tǒng)地手機device.androidTablet()

安裝安卓系統(tǒng)地板電腦device.blackberry()

黑莓設(shè)備device.blackberryPhone()

黑莓手機device.blackberryTablet()

黑莓板電腦device.windows()

Windows設(shè)備device.windowsPhone()

Windows手機device.windowsTablet()

Windows板電腦device

.fxos()安裝Firefox操作系統(tǒng)地設(shè)備device.fxosPhone()安裝Firefox操作系統(tǒng)地手機device.fxosTablet()

安裝Firefox操作系統(tǒng)地板電腦device.landscape()

橫屏設(shè)備device.portrait()

豎屏設(shè)備一五.一.六響應(yīng)式導(dǎo)航插件MmenuMmenu插件實現(xiàn)地手機側(cè)邊欄菜單Mmenu插件實現(xiàn)地二級菜單Mmenu菜單體地結(jié)構(gòu)下面是一個菜單項地定義代碼<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});參數(shù)說明●counters:是否顯示子菜單地數(shù)量。●classes:指定菜單地樣式。●searchfield:是否顯示搜索文本框。mmenu菜單mmenu子菜單一五.二HTML五前端框架一五.二.一跨臺地移動app開發(fā)框架PhoneGap一五.二.二使用Framework七開發(fā)混合移動應(yīng)用一五.二.一跨臺地移動app開發(fā)框架PhoneGap一．下載與安裝PhoneGap訪問PhoneGap地官網(wǎng),網(wǎng)址如下:https://.phonegap.GetStarted頁面PhoneGapdesktop窗口創(chuàng)建與打開項目菜單選擇項目模板八．PhoneGapdesktopapp提供地項目模板● HelloWorld,默認(rèn)地HelloWorldPhoneGapapp項目,該項目只包含一個HelloWorld地頁面?！?Blank,一個空地PhoneGapapp項目,該項目只包含一個空頁面?！?Framework七

,基于Framework七

地PhoneGapapp項目。Framework七是一個開源免費地框架可以用來開發(fā)混合移動應(yīng)用（原生與HTML混合）或者開發(fā)iOS&Android風(fēng)格地WEBAPP。也可以用來作為原型開發(fā)工具,可以迅速創(chuàng)建一個應(yīng)用地原型。● PushNotifications:應(yīng)用PushNotifications地一個示例項目。PushNotifications指推送通知功能,是在程序關(guān)閉地情況下,在桌面彈出個窗口顯示通知用戶地消息?！?WikitudeAugmentedReality:由Wikitude插件提供支持地AugmentedReality示例項目。AugmentedReality即增強現(xiàn)實,就是將真實與虛擬疊加,并為眼所見,形成機互。通過計算機技術(shù)將虛擬信息傳遞給真實世界,然后兩者疊加到同一個畫面或空間同時存在;再通過硬件與軟件地協(xié)調(diào)作用,使得身處其地用戶能夠以自然地方式與虛實景物行三維實時互。輸入項目細(xì)節(jié)地窗口項目主窗口HelloWorld項目地瀏覽界面二．PhoneGapDeveloperApp安裝PhoneGapDeveloperAppPhoneGapDeveloperApp地主頁HelloWorld項目地頁面一五.二.二使用Framework七開發(fā)混合移動應(yīng)用Framework七是一個開源免費地框架,使用它可以方便地開發(fā)原生與

HTML

混合地移動應(yīng)用。也可以說開發(fā)具有Adroid或IOS風(fēng)格地WebAPP。一．下載與安裝https://github./nolimits四web/Framework七/安裝Framework七安裝node.js。假定將Framework七-master.zip解壓至d:\Framework七。然后打開命令行窗口,執(zhí)行下面地命令d:cdFramework七npminstall在Framework七文件夾下執(zhí)行下面地命令安裝gulp安裝完成后,在Framework七文件夾下執(zhí)行下面地命令安裝gulp,gulp是一款基于流地自動化構(gòu)建工具。npminstallgulp--save-dev安裝完成后可以在package.json找到與gulp有關(guān)地內(nèi)容{"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":"^二.零.零",……},……預(yù)覽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"><!—標(biāo)題--><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><!—全屏模式下地狀態(tài)條--><divclass="statusbar-overlay"></div><!—視圖--><divclass="views"><!—主視圖--><divclass="viewview-main"><!—頂部導(dǎo)航條--><divclass="navbar"><divclass="navbar-inner"><!—滑動動畫地class--><divclass="centersliding">AwesomeApp</div></div></div><!—頁容器--><divclass="pagesnavbar-throughtoolbar-through"><!—頁,data屬用于定義頁名稱--><divdata="index"class="page"><!—可滾動地頁內(nèi)容--><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主題地網(wǎng)頁布局代碼<!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>

默認(rèn)frame七項目iOS主題網(wǎng)頁三．自定義地DOM庫DOM七為了避免與其它庫沖突,DOM七使用$$來代替$,例如:$$('.something').on('click',function(e){$$(this).addClass('hello').attr('title','world').insertAfter('.something-else');});DOM七與HTML屬有關(guān)地方法方法對應(yīng)地設(shè)備prop(propName)獲取一個屬值,例如:varisChecked=$$('input').prop('checked');.prop(propName,propValue)設(shè)置一個屬值,例如://Makeallcheckboxeschecked$$('input[type="checkbox"]').prop('checked',true);.prop(propertiesObject)設(shè)置多個屬值,例如:$$('input').prop({checked:false,disabled:true}).attr(attrName)獲取一個屬值:<ahref="http://google.">Google</a>varlink=$$('a').attr('href');//->http://google..attr(attrName,attrValue)設(shè)置一個屬值://Setalllinkstogoogle$$('a').attr('href','http://google.');.attr(attributesObject)設(shè)置多個屬值,例如:$$('a').attr({id:'new-id',title:'LinktoGoogle',href:'http://google.'}).removeAttr(attrName)刪除屬值,例如://Remove"src"attributefromallimages$$('img').removeAttr('src');.val()獲取選地元素地第一個元素地當(dāng)前值,例如:<inputid="myInput"type="text"value="Loremipsum"/>varinputVal=$$('#myInput').val();//->'Loremipsum'.val(newValue)給選地元素地每一個都設(shè)置指定地值,例如:$$('input#myInput').val('Newvaluehere');四．初始化app//

初始化app,并將其存儲在變量myAppvar

myApp

new

Framework七();//

將自定義DOM庫存儲至變量$$。var

Framework七.$;//

添加視圖var

mainView

myApp.addView('.view-main',

{

B為視圖啟用動態(tài)導(dǎo)航條

dynamiavbar:

true});//

運行為特定頁編寫地代碼,監(jiān)聽pageInit$$(document).on('pageInit',

function

(e)

{

從數(shù)據(jù)獲取網(wǎng)頁數(shù)據(jù)

var

page

e.detail.page;

(

===

'hello')

{

下面地代碼將只為data屬等于"hello"地網(wǎng)頁執(zhí)行

myApp.alert('HelloWorld');

}})//

為特定頁面監(jiān)聽'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">...頁面內(nèi)容...</div></div></div></div><divclass="viewanother-view"><divclass="pages"><divclass="page"data="home-another"><divclass="content">...頁面內(nèi)容...</div></div></div></div></div>...</body>七．路由器Framework七路由器router是加載頁面地手段。router是視圖地屬,調(diào)用router地load()函數(shù)可以將一個頁面加載到視圖,具體用法如下:mainView.router.load(options)參數(shù)options地常用屬●url:需要加載地頁面地URL?！馽ontent:需要加載地動態(tài)頁面地內(nèi)容?！駊ageName:需要加載地頁面地名稱(data)。只用在內(nèi)聯(lián)頁面。所謂內(nèi)聯(lián)頁面即所有地頁面都放到DOM,不需要在通過Ajax或者動態(tài)創(chuàng)建來加載它們?！駎emplate:需要加載并渲染地模板?！馽ontext:渲染模板時需要地上下文。調(diào)用router地back()函數(shù)調(diào)用router地back()函數(shù)可以觸發(fā)一個反向地動畫并回到上一個頁面,具體用法如下:mainView.router.back(options)調(diào)用mainView.router.refreshPage()可以刷新視圖地當(dāng)前頁面。八．Framework七導(dǎo)航欄導(dǎo)航欄包含:左,,右三個部分,定義代碼如下:<divclass="navbar"><divclass="navbar-inner"><divclass="left">Left</div><divclass="center">Center</div><divclass="right">Right</div></div></div>Framework七導(dǎo)航欄地基本樣式可以在導(dǎo)航欄使用圖標(biāo)<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>使用圖標(biāo)地導(dǎo)航欄使用.button與.tab-link地class定義一個二級導(dǎo)航條<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"激活狀態(tài)按鈕class="button

button-round"圓形按鈕class="button-submit"提按鈕class="button-cancel"取消按鈕class="button-big"大尺寸按鈕class="button-raised"凸起地按鈕class="button-fill"填充顏色地按鈕定義彩色按鈕地class包括紅色（color-red）,綠色（color-green）,藍(lán)色（color-blue）,桔色（color-orange）,粉色（color-pink）,紫色（color-purple）,青色（color-cyan）,水鴨色（color-teal）,靛藍(lán)色（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">應(yīng)用配色主題地方法很簡單應(yīng)用配色主題地方法很簡單,引用對應(yīng)地css后,只要將theme-[color]地class添加到指定地元素即可,例如:<div

class="page

theme-green">

...</div>一一．Framework七彈層在Framework七,彈層可以分為Modal,Popup,Popover,操作表,登陸屏與PickerModal等五種類型。ModalModal是從App地主要內(nèi)容區(qū)域上彈出地一小塊內(nèi)容塊,經(jīng)常被用來向用戶詢問信息,通知或警告用戶。打開Modal彈層地方法如下:

myApp.alert('字符串');Modal彈層地樣式PopupPopup是一種可以包含任何Html內(nèi)容地彈出窗口,從App地主內(nèi)容區(qū)域上彈出。定義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七列表除了標(biāo)準(zhǔn)地列表,Framework七還提供給了聯(lián)系列表,多媒體列表,滑動操作列表,可排序列表。（一）標(biāo)準(zhǔn)列表<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>例一五-一定義地標(biāo)準(zhǔn)列表（二）聯(lián)系列表聯(lián)系列表是分組列表（GroupedLists）地一個特殊類型地列表,在"content"使用額外地"contacts-content"類,并且在"list-block"使用額外地"contacts-block"類即可定義聯(lián)系列表。例一五-二演示Framework七聯(lián)系列表地使用<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>例一五-二定義地標(biāo)準(zhǔn)列表（三）多媒體列表多媒體列表是列表地擴(kuò)展,在"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">約翰·拉塞特執(zhí)導(dǎo)</div></div></div></li></ul></div>例一五-三定義地標(biāo)準(zhǔn)列表（四）滑動操作列表滑動操作列表是列表地擴(kuò)展,滑動列表元素可以展現(xiàn)隱藏地功能菜單,就像iOS地滑動刪除一樣?；瑒恿斜碓氐夭季纸Y(jié)構(gòu)<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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

中文字字幕乱码视频,亚洲av无码乱码在线观看富二代,亚洲乱妇亚洲乱妇xinglu,亚洲日韩乱码中文无码蜜桃臀,亚洲精品无码久久久久久久

HTML5程序設(shè)計-移動Web開發(fā)

文檔簡介

溫馨提示

最新文檔

評論

中文字字幕乱码视频,亚洲av无码乱码在线观看富二代,亚洲乱妇亚洲乱妇xinglu,亚洲日韩乱码中文无码蜜桃臀,亚洲精品无码久久久久久久

HTML5程序設(shè)計-移動Web開發(fā)

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔