如何插入多頁(yè)在Dreamweaver中

插入多頁(yè)

一個(gè)jQuery Mobile文檔可以包含多頁(yè)結(jié)構(gòu)（多視圖頁(yè)面），即一個(gè)文檔可以包含多個(gè)標(biāo)益屬性 data-role為page的容器，從而形成多容器頁(yè)面結(jié)構(gòu)。容器之間各自獨(dú)立，擁有唯一的ID值。當(dāng)頁(yè)面 加載時(shí)，會(huì)同時(shí)加載；容器被訪問(wèn)時(shí)，以錨點(diǎn)鏈接實(shí)現(xiàn)，即以內(nèi)部鏈接#加對(duì)應(yīng)ID值的方式進(jìn)行設(shè)置。 單擊該鏈接時(shí)，jQuery Mobile將在文檔中尋找對(duì)應(yīng)ID的容器，以動(dòng)畫(huà)的效果切換至該容器中，實(shí)現(xiàn) 容器間內(nèi)容的互訪。

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC,新建HTML5文檔，保存為index.html。在頁(yè)面中添加兩個(gè)data_role 屬性為page 的<div>標(biāo)簽，定義兩個(gè)頁(yè)面容器,用戶在第一個(gè)容器中選擇需要查看的新聞列表，單擊 某條新聞后，切換至第二個(gè)容器，顯示所選新聞的詳細(xì)內(nèi)容。

第2步，在頭部完成jQuery Mobile技術(shù)框架的導(dǎo)入工作。

第3步，配置頁(yè)面視圖，在頭部位置輸入下面代碼，設(shè)置頁(yè)面在不同設(shè)備中都是滿屏顯示。

第4步，介紹的單頁(yè)結(jié)構(gòu)模型，完成首頁(yè)視圖設(shè)置，

第5步，在首頁(yè)視圖底部輸入下面代碼，設(shè)計(jì)詳細(xì)頁(yè)視圖。

在上面代碼中包含了兩個(gè)Page視圖頁(yè)：主頁(yè)（ID為home)和詳細(xì)頁(yè)（ID為newl)。從首頁(yè)鏈 接跳轉(zhuǎn)到詳細(xì)頁(yè)面采用的是鏈接地址為如ewL jQuery Mobile會(huì)自動(dòng)切換鏈接的目標(biāo)視圖顯示到移動(dòng) 瀏覽器中。該框架會(huì)隱藏除第一個(gè)包含data-role=“page”的<div>標(biāo)簽以外的其他視圖頁(yè)

第6步，在移動(dòng)瀏覽器中預(yù)覽，在屏幕中央單擊超鏈接文本即可跳轉(zhuǎn)到第二個(gè)視圖頁(yè)面。