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