Web Components實例：移動UI組件庫GMU介紹
GMU（Global Mobile UI）是百度前端通用組開發的移動端組件庫，具有代碼體積小、簡單、易用等特點，組件內部處理了很多移動端的bug，覆蓋機型廣，能大大減少開發交互型組件的工作量，非常適合移動端網站項目。
特點：
-
簡單易用
jQuery UI 使用風格，鏈式調用
你只需要在頁面上書寫簡單的html， 就可以生成豐富易用的UI組件，原來webapp的開發可以變得如此簡單！
-
輕量級
基于zepto的mobile UI組件庫
GMU組件在輕量級的zepto上開發，組件根據功能再劃分顆粒化的插件，css將骨架與皮膚拆解，你終于可以最小化按需加載啦！
-
文檔豐富，自定義下載
豐富的文檔，支持自定義下載
GMU API文檔中詳細描述各組件參數、事件、方法，每個組件的demo豐富易用。你可以從git上下載代碼，也可以按需自定義下載
-
專業穩定
專業QA團隊，多平臺支持
百度專業QA團隊持續跟進，上千自動化測試用例支持。開設論壇、QQ群等，支持iOS4+ / android2.1+, 支持默認/UC/QQ/Chrome等瀏覽器
-
豐富實用UI組件
基于移動端交互的豐富易用UI組件
GMU組件包括suggestion, dialog, navigator, tabs, toolbar等14個通用組件，支持iOS4+， android2.1+，讓你的移動開發不再是難題
-
開源免費
完全開源免費
開源基于BSD協議，支持商業和非商業用戶的免費使用和任意修改。
GMU官網：http://gmu.baidu.com/
GMU Github：https://github.com/gmuteam/GMU
如何開始使用GMU？
一、 下載GMU組件
可以自定義下載，也可以從github上下載
1、自定義組件壓縮包，分為以下幾個部分：
（1）Zepto擴展。此部分對Zepto做了擴展，按自己的需要勾選，組件依賴的部分在勾選組件時，會自動選擇。
（2）UI基類。此部分不需要關心，勾選組件時，UI基類會自動選擇。
（3）GMU組件及css。可以選擇自己需要使用的組件及相關的插件，如果組件樣式中帶有圖片，可選擇是否使用base64格式的圖片，下載時可以選擇是否壓縮和是否合并成一個js文件。樣式包括骨干樣式和皮膚css，可以根據需要選擇theme
2、將下載的壓縮包解壓后，有兩個文件夾：css和js，css內包含各個組件的樣式表文件，js文件夾內包含Zepto庫、擴展、組件的js文件。
二、 GMU的demo結構
點擊這里查看GMU demo效果（在移動設備上查看或者用chrome切換user agent模擬移動設備，并打開Emulate touch events選項效果更佳），頁面demo中部分css及js是demo展示效果所用，只需關系如下四部分：
1、【組件依賴css】
這部分css是組件所依賴的樣式，在使用組件時必須加載，組件皮膚可以選擇加載，默認皮膚是default
- < !--組件依賴css begin-->
- < link rel="stylesheet" type="text/css" href="../../../assets/widget/gotop/gotop.css"/>
- < !--組件依賴css end-->
2、【組件依賴js】
這部分js是組件js文件及依賴js文件，在使用組件時必須加載。（以下列出的文件路勁僅供參考）
- < !--組件依賴js begin-->
- < script type="text/javascript" src="../../../_src/dist/zepto.js">
- < script type="text/javascript" src="../../../_src/extend/fix.js">
- < script type="text/javascript" src="../../../_src/core/gmu.js">
- < script type="text/javascript" src="../../../_src/core/event.js">
- < script type="text/javascript" src="../../../_src/core/widget.js">
- < script type="text/javascript" src="../../../_src/widget/gotop.js">
- < !--組件依賴js end-->
3、【頁面body主體html】
這部分是頁面的html主體，一些與創建demo實例有關，一部分僅是用來填充頁面，如gotop組組件只用關心:
- < div id="gotop">< /div>
4、【創建組件實例的script】
這部分js代碼用來創建組件實例，在你自己的demo中可以仿照著寫。
- < script>
- //創建組件
- $('#gotop').gotop();
- </script>
還有一部分css和js，如demo展示的css，及加載demo頁面切換的公共頭部的js等都不用關心
三、 創建自己的Demo
1、 將GMU的css和js文件復制到自己的項目文件夾內
2、 在demo頁面的頂部把相關css文件、依賴js文件、組件js文件引入，如:
- < head>
- < link rel="css/gotop.css" />
- < script src="js/zepto.js">< /script>
- < script src="js/gmu.js">< /script>
- < script src="js/gotop.js">< /script>
- < /head>
3、 在頁面上添加相應的html結構（若需要）， 如：
- < div id="gotop">< /div>
4、 創建組件實例：
- $("#gotop").gotop();
至此，就成功創建了一個GMU組件。
四、 GMU組件的創建方式
1、 setup方式
- $("#id").gotop([option]);
setup方式即為組件所需的html結構（部分html，每個組件所需要的基本html參見API文檔）寫在頁面中，通過zepto選擇器選擇元素后初始化組件，類似jQuery UI的使用方式。 返回值為Zepto元素，支持鏈式調用，調用組件的方法可以采用$('#id').gotop('method', 'parameters')這種方式，每個組件詳細使用方法，見API文檔。
2、 render方式
- new gmu.Gotop([[node,] option]);
render方式即為通過js創建頁面所需要的html結構，在初始化時將組件所需要的參數（每個組件所需要參數見API文檔）傳入即可。使用這種方式有2個可選參數，node為#id 或者Zepto元素，option為創建組件的JSON格式配置參數，如{useFix：true}，返回值為組件實例， 調用組件方式，直接通過instance.method(param)方式傳入即可。
五、 GMU的文件結構
GMU整體分為4個部分：
1、Zepto擴展。
2、UI基類。
3、組件和組件擴展。組件的主文件提供了常用和基本的功能（如gotop.js）,其他個性化的功能以插件的形式提供（如gotop/$iscroll.js）,當需要使用插件中的功能時，需要同時引用主文件；
4、css樣式。組件的樣式表與組件同名（如gotop組件的樣式表為gotop.css）,某些組件拆分出了骨干樣式和皮膚樣式，皮膚樣式名稱為: 組件名.XXX.css，默認樣式為: 組件名.default.css，（如toolbar組件的默認樣式文件為 toolbar.default.css,需要同時引用toolbar.css）；
