amazeui中內置的web組件有哪些且如何用
一、總結
一句話總結：
1、組件還是jquery.js+amazeui.js，和插件一樣，准確的說是amazeui.css+jquery.js+amazeui.js。
2、amazeui中就amazeui.css+amazeui.js這兩樣東西，萬變不離其宗。
頁面相關（5）：頁頭 頁腳 分割線 回頂部 分頁
圖片（3）：單張圖片 圖片畫廊 圖片輪播
折疊類（3）：折疊面板、內容列表、選項卡。
非折疊的文章類（3）：簡介、段落、標題欄、
菜單類（2）：菜單（頂）、工具欄（底）
1、amazeui組件分哪兩大類？
解答：官方組件（16）和第三方組件（4）。
2、amazeui組件官方組件分為哪四種？
解答：
頁面相關（5）：頁頭 頁腳 分割線 回頂部 分頁
圖片（3）：單張圖片 圖片畫廊 圖片輪播
文章類（4）：簡介 段落 折疊面板 標題欄
菜單類（4）：選項卡 工具欄 菜單 內容列表
。
3、amazeui組件頁面相關有哪五種組件？
解答：頁頭 頁腳 分割線 回頂部 分頁。
4、amazeui組件圖片相關有哪三種組件？
解答：單張圖片 圖片畫廊 圖片輪播。
5、amazeui組件文章類相關有哪四種組件？
解答：簡介 段落 折疊面板 標題欄。
6、amazeui組件菜單類相關有哪四種組件？
解答：選項卡 工具欄 菜單 內容列表。
7、amazeui組件的第三方組件有哪四種？
解答：多說 百度地圖 美洽客服 微信支付。
8、html中使用web組件的價值是什么？
解答：使用模板快速開發，通過模板（hbs）將數據和 HTML 分離。
9、web手機app可以和那些非web的app界面做得一模一樣么？
解答：可以。
10、amazeui中的js插件和web組件的區別是什么（兩點）？
解答：在AmazeUI(妹子UI)中,Web組件可以不編寫模板而直接使用,若如此,則與JS插件沒什么太大區別,官方原話也說可以這么調用的。Web組件與JS插件的不同之處在於,Web組件借助 handlebars.js 實現了強大的模板功能,我們能編寫自定義模板從而使Web組件更具個性,甚至是編寫出新的Web組件。
組件都有這個data-am-widget="header"，然后是加上插件的data-am-什么什么。
二、amazeui中內置的web組件有哪些
1、官方組件（16種）
- 折疊面板Accordion
- 分割線Divider
- 單張圖片Figure
- 頁腳Footer
- 圖片畫廊Gallery
- 回頂部Gotop
- 頁頭Header
- 簡介Intro
- 內容列表List
- 菜單Menu
- 工具欄Navbar
- 分頁Pagination
- 段落Paragraph
- 圖片輪播Slider
- 選項卡Tabs
- 標題欄Titlebar
頁面相關（5）：頁頭 頁腳 分割線 回頂部 分頁
圖片（3）：單張圖片 圖片畫廊 圖片輪播
文章類（4）：簡介 段落 折疊面板 標題欄
菜單類（4）：選項卡 工具欄 菜單 內容列表
折疊面板Accordion：一段文字折疊起來形成垂直列表的形式
簡介intro：左圖右文字
內容列表：就是內容的列表，內容標題的列表
選項卡：就是tab的那種選項卡
標題欄：就是文章或者別的的標題欄
段落：就是文章的形式，圖文配
菜單：頂部的菜單
工具欄：底部的工具欄
折疊類：折疊面板、內容列表、選項卡。
非折疊的：簡介、段落、標題欄、
菜單類：菜單、工具欄
2、第三方組件（四種）
3、使用web組件的價值
1、通過模板（hbs）將數據和 HTML 分離，這是 Web 組件的價值之一。用戶可以在不同的開發環境中使用 Web 組件。
2、不使用模板似乎就失去了 Web 組件的核心價值。所以使用模板算是組件的價值。
4、Node.js環境（這個要學）
可以結合 Express.js、hbs 使用。
用戶了可以直接使用打包好的模塊 Amaze UI Widget hbs helper，example 里有完整的使用示例。
當然，你也可以自由調用：
三、如何使用
1、截圖
2、代碼
演示效果和官方給的一樣了，我要做的就是弄到手機上面去，然后調樣式即可，該調margin調margin，該調別的調別的
web做出來的web手機app可以和那些非web的app界面做得一模一樣
用的話感覺應該還是jquery.js+amazeui.js，因為從 2.0 開始，Amaze UI JavaScript 組件轉向基於 jQuery 開發，使用時確保在 Amaze UI 的腳本之前引入了 jQuery 最新正式版。
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/amazeui.min.css"> <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script src="js/jquery.min.js"></script> <script src="js/amazeui.min.js"></script> <style> .testCenter{ /*有寬度之后加margin：auto才能實現自動居中*/ .moduleTest{ width: 400px; margin:100px auto; border: 5px ridge #95a283; } </style> </head> <body> <div class="moduleTest"> <div data-am-widget="slider" class="am-slider am-slider-a4" data-am-slider='{"directionNav":false}' > <ul class="am-slides"> <li> <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg"> </li> <li> <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg"> </li> <li> <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg"> </li> <li> <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg"> </li> </ul> </div> </div> </body> </html>
3、amazeui中的js插件和web組件的區別是什么？
插件是組件功能的一部分，插件是組件的小時候，組件是插件長大之后，能夠獨當一面的時候。
組件都有這個data-am-widget="header"，然后是加上插件的data-am-什么什么
在AmazeUI(妹子UI)中,Web組件可以不編寫模板而直接使用,若如此,則與JS插件沒什么太大區別,官方原話也說可以這么調用的。Web組件與JS插件的不同之處在於,Web組件借助 handlebars.js 實現了強大的模板功能,我們能編寫自定義模板從而使Web組件更具個性,甚至是編寫出新的Web組件。
四、測試題-簡答題
1、amazeui組件分哪兩大類？
解答：官方組件（16）和第三方組件（4）。
2、amazeui組件官方組件分為哪四種？
解答：
頁面相關（5）：頁頭 頁腳 分割線 回頂部 分頁
圖片（3）：單張圖片 圖片畫廊 圖片輪播
文章類（4）：簡介 段落 折疊面板 標題欄
菜單類（4）：選項卡 工具欄 菜單 內容列表
。
3、amazeui組件頁面相關有哪五種組件？
解答：頁頭 頁腳 分割線 回頂部 分頁。
4、amazeui組件圖片相關有哪三種組件？
解答：單張圖片 圖片畫廊 圖片輪播。
5、amazeui組件文章類相關有哪四種組件？
解答：簡介 段落 折疊面板 標題欄。
6、amazeui組件菜單類相關有哪四種組件？
解答：選項卡 工具欄 菜單 內容列表。
7、amazeui組件的第三方組件有哪四種？
解答：多說 百度地圖 美洽客服 微信支付。
8、html中使用web組件的價值是什么？
解答：使用模板快速開發，通過模板（hbs）將數據和 HTML 分離。
9、web手機app可以和那些非web的app界面做得一模一樣么？
解答：可以。
10、amazeui中的js插件和web組件的區別是什么（兩點）？
解答：在AmazeUI(妹子UI)中,Web組件可以不編寫模板而直接使用,若如此,則與JS插件沒什么太大區別,官方原話也說可以這么調用的。Web組件與JS插件的不同之處在於,Web組件借助 handlebars.js 實現了強大的模板功能,我們能編寫自定義模板從而使Web組件更具個性,甚至是編寫出新的Web組件。
組件都有這個data-am-widget="header"，然后是加上插件的data-am-什么什么。