首頁 > 開發者 > JavaScript
標籤：函數 title font 賦值 執行個體 text lock 跳轉 family
實現首頁面和分類頁面的之後，最後來看一下菜肴頁面的實現，這個頁面用於詳細介紹某項菜肴或主食，如名稱、圖片和具體做法等。在pages檔案夾裡面添加一個名為foodDetail的檔案夾，並在foodDetail檔案夾裡添加一個"頁面控制"項，將其命名為foodDetail。
開啟預設產生的foodDetail.html檔案，向檔案的body元素中添加一個div元素，在div元素內部添加一個button元素和一個h1元素，其中button元素是回退按鈕，h1元素用於顯示類別名稱，接著再在此div元素中嵌套添加一個div元素，並在剛添加的div元素內部添加一個h2元素、一個img控制項和一個class屬性值為"item-content"的div元素，其中h2元素用於顯示菜肴名稱，img控制項用於顯示菜肴圖片，而div元素用於顯示菜肴的做法，相關代碼如下所示：
<body>
<div class="foodDetail fragment">
<header aria-label="Header content" role="banner">
<!--定義回退按鈕-->
<button class="win-backbutton" aria-label="Back" ></button>
<!--顯示類別名稱-->
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
</h1>
</header>
<div class="content" aria-label="Main content" role="main">
<article>
<header>
<!--顯示菜肴名稱-->
<h2 class="item-title"></h2>
</header>
<!--顯示圖片-->
<img class="item-image" src="#" />
<!--顯示菜肴的具體做法-->
<div class="item-content"></div>
</article>
</div>
</div>
</body>
為了控制菜肴頁面的顯示外觀，在foodDetail.css檔案中設定相應的外觀屬性，相關代碼如下所示：
/*設定菜肴的整體布局，包括位置和大小等*/
.foodDetail .content {
-ms-grid-row: 2;
position: relative;
height: 100%;
width: 100%;
display: block;
overflow-x: auto;
z-index: 0;
}
/*進一步設定菜肴的列寬、所佔據的空間和邊距等*/
.foodDetail .content article {
column-fill: auto;
column-gap: 80px;
column-width: 480px;
height: calc(100% - 50px);
width: 480px;
margin-left: 120px;
margin-top: 5px;
}
/*進一步設定菜肴名稱的邊距*/
.foodDetail .content article header .item-title {
margin-bottom: 20px;
margin-top: 0;
}
/*進一步設定菜肴圖片的大小和邊距*/
.foodDetail .content article .item-image {
height: 240px;
width: 460px;
margin-bottom: 3px;
}
/*設定菜肴做法的邊距和對齊*/
.foodDetail .content article .item-content {
margin-bottom: 20px;
margin-right: 20px;
vertical-align: baseline;
}
定義了前台頁面樣式之後，開啟foodDetail.js檔案，在ready函數內添加如下代碼，為介面元素設定資料來源。
ready: function (element, options) {
//根據傳遞的參數來擷取某項菜肴。如果沒有傳遞參數，則擷取第一項菜肴
var item = options && options.item ? menuData.resolveItemReference(options.item) : menuData.items.getAt(0);
//設定菜肴的類別名稱
element.querySelector(".pagetitle").textContent = item.group.title;
//設定菜肴的名稱
element.querySelector(".item-title").textContent = item.title;
//設定菜肴的圖片
element.querySelector(".item-image").src = item.backgroundImage;
//設定菜肴的描述資訊（即菜肴的具體作法）
element.querySelector(".item-content").innerHTML = item.content;
}
上面代碼中，在ready函數裡對options 和options.item進行判斷，當參數options和options.item都不為空白時，調用menuData命名空間裡的resolveItemReference函數來根據某項菜肴的標識擷取該項菜肴並賦值給變數item；否則擷取第一項菜肴同樣賦值給變數item。接下來調用element.querySelector函數來擷取class屬性為"pagetitle"的h1元素和class屬性值為"item-title"的h2元素，並分別設定這兩個元素的textContent屬性值為item.group.title和item.title，用於顯示菜肴類別名稱和菜肴名稱。然後使用element.querySelector函數來擷取class屬性為"item-image"的img控制項，設定其src屬性值為"item.backgroundImage"用於顯示菜肴的圖片。最後調用element.querySelector函數來擷取class屬性為"item-content"的div元素，設定其innerHTML 屬性值為item.content用於顯示菜肴的做法資訊。
啟動調試，當點擊某項菜肴時，如點擊"紅燒肉"這項菜肴，就會跳轉到紅燒肉詳細頁面，得到的效果19-36所示：
圖19-36詳細介紹紅燒肉的頁面
Win10系列：JavaScript綜合執行個體4
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
