You are on page 1of 7

28 線上輕小說

28.1
28.1

功能導覽

28.2
28.2

頁面配置

28.3
28.3

功能實作

描繪篇章內容 / drawText_ multiline() 頁次導覽 字型與頁籤設定

/ drawText_ multiline() ⿠ 頁次導覽 ⿠ 字型與頁籤設定 28-2 SUMMARY HTML5 完美風暴(第二版)

28-2

SUMMARY

HTML5 完美風暴(第二版)

HTML5 完美風暴

11.1 進入 HTML5 之前必須瞭解的事實

PART 1

第二十八章

線上輕小說

HTML5 完美風暴(第二版)

 進入 HTML5 之前必須瞭解的事實 PART 1 第二十八章 線上輕小說 HTML5 完美風暴(第二版) 28-3

28-3

28 線上輕小說

本書的最後一章,以一本數位化的輕小說示範電子書的實作,透過 JSON 格式儲 存電子書的內容,然後再經由 Canvas 物件進行描繪展現電子書的內容。

28.1 功能導覽

此電子書案例的單一功能頁面中,主要呈現電子書的內容,同時支援字型變化與

頁次索引記錄等相關功能,網頁呈現的內容頁面如下:

字型 頁籤設定 操作 主內容 前一頁導覽 下一頁導覽 頁索引 章索引
字型
頁籤設定
操作
主內容
前一頁導覽
下一頁導覽
頁索引
章索引

網頁第一次載入時,畫面中主要內容區域呈現書籍的封面,右側邊欄則是提供字

型調整的功能,包含字體大小與所套用的字型,畫面下方則是導覽列,其中右邊

的灰色方塊是每一個獨立章的索引,左邊則是目前瀏覽篇章裡的頁次索引,這個

索引功能會根據使用者點選的章動態改變其頁數。

主內容下方則分別提供了前一頁與下一頁的導覽功能。

使用者可以選擇點選其中的任何一個功能,跳至所要閱讀的頁面,而在閱讀的過 程中,可以進一步點選大 A 按鈕,放大字級,或是小 A 按鈕縮小字級,如果想要 改變字型,則選擇所要閱讀的字型按下即可,如下頁圖:

改變字型,則選擇所要閱讀的字型按下即可,如下頁圖: 28-2 HTML5 完美風暴(第二版)

28-2

HTML5 完美風暴(第二版)

 
 

28.1 功能導覽

  28.1  功能導覽

左圖是大字級的新細明體,右圖則是小字級的標楷體,而當你調整字級,頁次索

引會動態隨著頁數改變異動。

除了固定的索引功能,電子書另外提供了設定動態索引的頁籤功能,由側邊欄的

黃色標籤支援設定,如下圖:

黃色標籤支援設定,如下圖:

當使用者按下其中的「頁籤」黃色標籤,此時出現一個訊息方塊,確認使用者是

HTML5 完美風暴(第二版)

HTML5 完美風暴(第二版) 2 8 - 3

28-3

28 線上輕小說

否真的想要新增一個頁籤,如果按下「確定」按鈕,目前閱讀的頁次將被記錄下 來,除了於左上角配置識別頁籤,同時新增一筆頁籤記錄,其中標示頁籤的關聯 頁次,此圖中的 2-3 表示第二章第三頁。

往後使用者只按下此頁籤即可直接前往此頁,如果不需要此頁籤,可以在側邊欄 中,針對此頁籤按一下右邊的 X 標示將其清除,此外,使用者可以針對一個以 上的頁次,進行標籤的設定,如果設定的標籤超過一個以上,則直接按下黃色的 「清空」標示,即可一次將所有的頁籤清空。

28.2 頁面配置

頁面的配置設計與前述案例章節並沒有太大的區別,如下圖:

由於透過分頁呈現小說的內容,因此中間的主要內容預先配置一個 <ul> ,而每一 次載入內容時,為每一頁文章建立其專屬的 <canvas> ,然後描繪分頁內容,最後 將其配置於 <li> ,加入至 <ul> 標籤中,如此一來即可建立分頁效果。

右側邊欄與頁尾則是配置必要的導覽列以及相關的資訊。

<body> <div id="contianer"> <div id="slide_section"> <div id="previous-bar" class="nav" style="left: 0px;"> <img id="previous" src="images/previous.png" onclick="pre_next_handler(this)" />

</div>

onclick="pre_next_handler(this)" /> </div> 28-4 HTML5 完美風暴(第二版) ( 續 )

28-4

HTML5 完美風暴(第二版)

()

28.2 頁面配置

</div> <aside id='readerTool'> <div> <li> <img

</div> <aside id='readerTool'> <div>

<aside id='readerTool'> <div> <li> <img src="images/fontsize-e.png"

<li> <img src="images/fontsize-e.png" onclick="enlarge()"></li> <li> <img src="images/fontsize-r.png" onclick="reduce()"></li>

</ul>

onclick="reduce()"></li> </ul> <li> <img family="pk"

<li>

<img family="pk" src="images/fontsize-pk.png" onclick="set_font_family(this)" /></li>

</ul>

/></li> … </ul> <li> <img src="images/padyellow.png"

<li>

<img src="images/padyellow.png" onclick="setTag()"></li>

<li>

<img src="images/padyellow_d.png" onclick="clearAllTag()"></li>

</ul>

</ul> </ul> </div> <img

</ul> </div> <img id="next_page_img" src="images/next_page.png" onclick="pre_next_handler(this)" />

</aside> </div> <footer> <nav> <div id="footer_nav_left"> <ul id="pageNav"> </ul> </div> <div id="footer_nav_right"> <ul id="chapterNav"> </ul> </div> </nav> <div class='footer-container'>

康廷數位設計|html5.kangting.tw

<div> Copyright© 2012 kangting.tw All Rights Reserved. </div> </div> </footer> </body>

<div> 標籤中,id 屬性設定為 article <ul> 標籤,用來動態產生分頁文章內 容。在 <aside> 標籤裡面,根據所要提供的功能,配置數組 <ul> 提供所需的內 容,請特別注意最後一組 id 設定為 tag_list <ul> 標籤,此區域的內容用於動態 產生讀者自行定義的頁籤。

HTML5 完美風暴(第二版)

標籤,此區域的內容用於動態 產生讀者自行定義的頁籤。 HTML5 完美風暴(第二版) 2 8 - 5

28-5

28 線上輕小說

28.3 功能實作

此案例的相關程式碼,分成數個 JavaScript 檔案,檔案的功能列舉如下表:

JavaScript 檔案

說  明

article.js

小說文章內容。

drawContent.js

描繪文章分頁內容。

movePage.js

文章頁面導覽功能。

var-constant.js

相關的變數配置。

其中的 drawContent.js 為主要的程式碼檔案,當網頁一開始載入時,執行以下的 程式碼:

window.onload = function () { //建立目錄表 var ul_chapter = document.getElementById('chapterNav'); var chapters = novel.chapter_info; for (key = 0; key < chapters.length; key++) { var chapterName = chapters[key].chapter_title; var li_chapter = document.createElement('LI'); li_chapter.setAttribute('onclick', 'moveChapter(this)'); li_chapter.setAttribute('c_index', key); li_chapter.innerHTML = '<label>' + chapterName + '</label>'; ul_chapter.appendChild(li_chapter);

}

create_cover();

//畫面一開始載入,描繪第零章的內容

drawChapter();

}

首先直接引用儲存於 article.js 檔案中的 novel JSON 格式字串內容,透過 for 迴 圈,逐一取出每個章名,建立 <li> 標籤配置於畫面下方的章瀏覽清單區域。

接下來調用 create_cover() drawChapter() 兩個函式,描繪封面與第零章。

function create_cover() { var bookTitle = '有一種愛叫做遺憾'; canvas_cover = get_cnavas_page(); context_cover = canvas_cover.getContext("2d"); var cover_img = new Image(); cover_img.src = 'images/cover-red.jpg'; cover_img.onload = function () { context_cover.drawImage(this, 0, 60);

}

}

cover_img.onload = function () { context_cover.drawImage(this, 0, 60); } } 28-6 HTML5 完美風暴(第二版) ( 續 )

28-6

HTML5 完美風暴(第二版)

()