如何插入多頁在Dreamweaver中

插入多頁

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

【操作步驟】

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

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

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

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

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

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

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