如何插入多頁在Dreamweaver中

插入多頁

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

【操作步驟】

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

第2步，在頭部完成jQuery Mobile技術框架的導入工作。

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

第4步，介紹的單頁結構模型，完成首頁視圖設置，

第5步，在首頁視圖底部輸入下面代碼，設計詳細頁視圖。

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

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