NatureFace類別，利用new方法來創建一個NatureFace物件，創建時可帶入一個theme，當然可以利用prefix來指定theme存放位置, 我們提供了相關的參數來設定如全螢幕、物件大小，甚至是可自行定義NatureFace容器的div container。

使用 NatureFace 物件

引入必要的js檔:

<script type="text/javascript" src="js/jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.NatureFace.js"></script>

建構參數:

參數	描述
theme	佈景主題的第一個載入點頁面名稱
fullscreen	布林值，是否為全螢幕, 如為true, 則 top, left, width及height四個參數失效
prefix	佈景主題存放位置路徑
firsttarget	第一個要切換的target,　內定為theme參數值
touchscreen	強制指定是否為觸控(未指定將自動判斷, 有些紅外線觸控可能判斷錯誤)
top	定位點 top
left	定位點 left
width	定位點 width(與height同時存在方能生效)
height	定位點 height(與width同時存在方能生效)
rootdiv	指定的 div element名稱
html	直接填入的HTML檔內容, prefix及theme、pages參數, 以及*.js即無效
pages	使用陣列定義欲載入的page, 使用此可取代page tag, 使用此參數theme則失效
disablejs	是否載入js(避免console出現不必要的js載入錯誤, default:true)
transparent	所有的元件皆為透明(純定位系統, 不使用背影圖按鈕化)

範例:

//jquery用法，當文件載入完成後執行	
$(document).ready(function() { 
    //建立400x800大小的NatureFace物件
    //載入template/START.html佈景主題，第一個要顯示的層(layer)為HOME層。
    var demo = new NatureFace({
        theme : "START", 
        fullscreen : false, 
        prefix : "template/",
        left : 0,
        top : 0,
        width : 480,
        height : 800,
        firsttarget : "HOME"
    });
});

這裡列出NatureFace可用的方法(函式), 及一些典型的範例程式片斷。

方法(Method):

方法	描述
target(layer)	跳至指定layer層(完成後將觸發 [target] event, 並回傳event, natureface, layer)
layer()	取得目前layer名稱
hide()	隱藏整個NatureFace
show()	顯示整個NatureFace
refresh()	重繪NatureFace，必須為fullscreen此函式才有效果，重繪後會觸發 refresh event.
listener(key, function(data))[過期]	新增一個listener, key為NatureFace支援的事件，目前只有“target“可用，當target被觸發時，將執行該listener
removeListener(key, function(data))[過期]	移除一個listener, key為NatureFace支援的事件，目前只有“target“可用
autofill()	執行autofill 字型自動縮放功能，將所有div[autofill]元件下的div進行字型resize動作，注意div必須設為position: absolute;, 此funcion也是$.fn，所以也應用在任何div元件上。
jsonTable(group, data, subupdate(item, dataitem, currentpage, allpage), subclear(item, dataitem, currentpage, allpage), page)	將json資料填入group表格中, 並於subupdate中進行item內容的顯示處理，subclear為空item使處理, page為顯示的頁面，沒設定為最後頁。
jsonListing(group, data, subupdate(item, dataitem))	將json資料填入group表格中(scrollbar呈現)

事件(Event):

事件	描述
target(event, natureface, layer)	切換頁面時，target將被觸發（與postEnter意義相同)
preEnter(event, natureface, layer)	進入頁面前觸發的動作(頁面元素未顯示前）
postEnter(event, natureface, layer)	進入頁面(頁面元素已顯示）
preExit(event, natureface, layer)	離開頁面前(頁面元素尚未消失前，可利用natureface.eventValue=true\|false取消切換）
postExit(event, natureface, layer)	離開頁面後(元素已消失）
refresh(event, natureface, layer)	呼叫refresh()後，觸發此元件，供外部進行resize處理

範例:

//demo為NatureFace物件
//以下程式碼將NatureFace layer切換至HELLO層
demo.target("HELLO");

//取得頁面切換動作
$(document).bind("preExit postExit preEnter postEnter target", function(event, natureface, layer){
	console.info("event %o : %o" , event.type, layer);
	natureface.eventValue = true; //for preExit
});
	
//當切換至HELLO時，將json資料放於order表格中
$(document).bind("target", function(event, natureface, layer){
	if (layer == "HELLO"){
		natureface.jsonTable("order", 
			[
				{"id":"0001", "name":"可口可樂"}, 
				{"id":"0002", "name":"咖啡"},
				{"id":"0003", "name":"沙士1"},
				{"id":"0004", "name":"沙士2"},
				{"id":"0005", "name":"沙士3"},
				{"id":"0006", "name":"沙士4"},
				{"id":"0007", "name":"沙士5"},
				{"id":"0008", "name":"沙士6"},
				{"id":"0009", "name":"沙士7"},
				{"id":"0010", "name":"沙士8"}
			],
			function(box, item, page, allpage){
				//重要，要設定autofill必須為position:absolute有效
				box.html('<div style="position: absolute;">' + item.id + " " + item.name+"</div>");
				$(box).autofill();
			},
			function(box, item, page, allpage){ //此box己被執行$(box).empty()
			},
			1 
		);
	}
});

一個佈景主題通常包含了圖檔、元素定義檔、甚至是javascript檔，在此說明這些檔案彼此關係，我們習慣把一個佈景主題存放在同一個目錄。

說明

一般來說一個頁面由三個實體檔案所組成，NatureFace載入後再利用其元素定義檔內容進行互動及流程邏輯處理，接下來章節將為你介紹細部特性。

定義UI控制元素的產生，我們利用HTML Map來定義NatureFace的元素，主要利用其「定位」的特色，最大的好處是其這類的編輯器隨處可取得，另外，就我們的經驗，經過我們的加工（加上一些擴充屬性）後，這些工具還是可以相容運作的好好的。

HTML MAP編輯器介紹:

工具	描述
Dreamweaver	付費軟體，一個強大的網頁編輯器，對於編輯Map功能強大，且實作豐富元素的操作功能，如大小設定、元素對齊、複製貼上功能等等...。
www.image-maps.com	線上免費工具，透過上傳圖檔進行編輯定位，快速好用，但注意取得code時，應去除多餘的url及標籤。
KImageMapEditor	免費工具，一個Linux版的HTML MAP編輯器，如果你是使用Linux作業系統，這個工具是不錯的選擇。

你應利用以上工具產生類似如下「純MAP」的HTML檔案:

<!DOCTYPE html>
<html>
<body>
<img src="HELLO.png" border="0" usemap="#Map" width="480" height="800"/>
<map name="Map" id="Map">
<area shape="rect" href="txtMessage" coords="120,82,396,272"/>
<area shape="rect" href="btnHI" coords="46,286,222,376"/>
<area shape="rect" href="btnBack" coords="267,286,439,377"/>
</map>
</body>
</html>

以下為NatureFace新增或重新定義之屬性用途:

標籤及屬性	描述
<area>	定義一個新的元素
href	不重覆的物件名稱id, 無設定時, 系統會自動加入一個隨機id，建議養成良好命名規則
shape	限「rect」值，目前NatureFace只支援rect形狀(方形)
class	物件類別, 目前支援的有 button(內定值), label, input（輸入框)。
vt	指定top定位(可使用px,%,vh,vw,vmax,vmin), 設定後coords中coords[0]將忽略。
vl	指定left定位(可使用px,%,vh,vw,vmax,vmin), 設定後coords中coords[1]將忽略。
vw	指定寬度(可使用px,%,vh,vw,vmax,vmin), 設定後coords中coords[2]將忽略。
vh	指定高度(可使用px,%,vh,vw,vmax,vmin), 設定後coords中coords[3]將忽略。
value	給予文字初值
target	流程控管, 按下元素時, 將跳至此層(layer)
layer	物件層次, 以逗號區隔, 空白表示永遠顯示
layerdisable	物件層次, 是否可操作(可看到但不能操作)
align	文字對齊方式：topcenter、topleft、topright、middlecenter、middleleft、middleright、bottoncenter、bottomleft、bottomright，常搭配以下效果：style='white-space:nowrap;font-family:微軟正黑體,標楷體;font-size:20px; color:white; text-shadow: black 0.1em 0.1em 0.2em'
autofill	文字自動填滿，如未設定font-size, 則由40px開始縮小，最小為4px。
coords	元素座標位置，左上角座標，右下角座標，如：25,20,75,82
size	文字字型大小, 內定為14(過時, 請改用標準css用法)
font	文字字型(過時, 請改用標準css用法)
color	文字字型顏色, 內定為黑色(過時, 請改用標準css用法)
opacity	透明度，分別代表 mousedown, mousemove, mouseup時的透明度, 為0~1之間的值，如 : 1,0.7,0.5
style	為添加元素原生的HTML擴充性，我們保留style屬性
group	表格產生器，與rows,cols搭配使用, 可配合jsonTable()、binding()或listing()使用(此部份尚無文件, 可來信索取支援)
rows	指定表格列數
cols	指定表格行數(listing, jsonListing不支援)
binding	挷定表格上下頁按鈕，語法為binding="{group}.left"或binding="{group}.left"
其他屬性	除了常用的style外，其實其他不在我們定義之外的屬性將完整被保留，例：為class=input, 加入placeholder屬性等等...
<page>	載入一個新的元素定義檔
src	元素定義檔名稱
prefix	元素定義檔存取路徑
<layer>	area未指定時layer值時, 可利用此標籤定義layer及target, 簡化設定過程
default	此頁面內定的layer值
target	此頁面內定的target值
<debug>	開啟除錯功能模式，會在每個元素加上一個外框以利識別
value	true 或 false

利用元素的id(href屬性)我們就可輕易的操控這些元素，例如元素點擊時要進行何種動作或要加入style，其實與一般撰寫jquery一模一樣, 以下示範一些常用的操作，詳細可自行研究jquery的使用, 當然也可利用純javascript來操作。

以下做一些常用的示範

改變文字(text):

//改變元素的文字內容						
$("#lblID").text("ChangeText");

放置圖片(html):

//元素內放入image						
$("#lblID").html('<img src="img/product.png">');

點擊元素(click):

//於ID為btnID元素上點擊，並改變lblID的文字內容	
$("#btnID").bind("click", function(){
	$("#lblID").html("ChangeText");//你可以放置任何html碼至lblID div容器裡
});

我們為了讓每個頁面模組化，做到更好的抽換，你可以在每個元素定義檔都可以撰寫專用的javascript脚本，NatureFace即可自動於載入時執行。

作法:

你只要在你的元素定義檔同層目錄中建立一個同名的.js檔即可，注意使用時建議其元素命名不要有所重覆，以免造成不當的影响。

範例:

  root/
  ├── template/
  │   ├── START.png
  │   ├── START.html
  │   ├── START.js (元素定義檔脚本)
  │   ├── HOME.png
  │   ├── HOME.html
  │   ├── HOME.js (元素定義檔脚本)
  │   ├── HELLO.png
  │   ├── HELLO.html
  │   └── HELLO.js (元素定義檔脚本)
  ├── js/
  │   ├── jquery.1.8.2.min.js
  │   └── jquery.NatureFace.js
  └── index.html

為了方便require js使用者也能快樂使用 NatureFace(限v2.12版本以上), 請參考以下作法

作法:

請參考requirejs的shim設定，只要deps jquery即可使用

範例:

var require = {
	shim: {
	　　　　natureface: {
	　　　　　	deps: ['jquery']
	　　　　}
	},
	paths: {
		jquery: '3party/jquery/dist/jquery',
		natureface: 'jquery.NatureFace'
	}
};

//即可使用natureface模組
define(["jquery", "natureface"], function($, natureface){
	//do something;
});

Documents

NatureFace 類別

使用 NatureFace 物件

引入必要的js檔:

建構參數:

範例:

方法及事件

方法(Method):

事件(Event):

範例:

佈景主題結構

說明

元素定義檔

HTML MAP編輯器介紹:

你應利用以上工具產生類似如下「純MAP」的HTML檔案:

擴充屬性說明

以下為NatureFace新增或重新定義之屬性用途:

控制元素

以下做一些常用的示範

定義檔脚本

作法:

範例:

Require JS 支援

作法:

範例: