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-什么什么。