amazeui中内置的web组件有哪些且如何用

时间 2019-11-21

标签 amazeui 内置 web 组件哪些如何栏目 HTML 繁體版

原文原文链接

amazeui中内置的web组件有哪些且如何用

1、总结

一句话总结：

一、组件仍是jquery.js+amazeui.js，和插件同样，准确的说是amazeui.css+jquery.js+amazeui.js。javascript

二、amazeui中就amazeui.css+amazeui.js这两样东西，万变不离其宗。css

页面相关（5）：页头页脚分割线回顶部分页html

图片（3）：单张图片图片画廊图片轮播java

折叠类（3）：折叠面板、内容列表、选项卡。jquery

非折叠的文章类（3）：简介、段落、标题栏、git

菜单类（2）：菜单（顶）、工具栏（底）github

一、amazeui组件分哪两大类？

解答：官方组件（16）和第三方组件（4）。web

二、amazeui组件官方组件分为哪四种？

解答：express

页面相关（5）：页头页脚分割线回顶部分页npm

图片（3）：单张图片图片画廊图片轮播

文章类（4）：简介段落折叠面板标题栏

菜单类（4）：选项卡工具栏菜单内容列表

。

三、amazeui组件页面相关有哪五种组件？

解答：页头页脚分割线回顶部分页。

四、amazeui组件图片相关有哪三种组件？

解答：单张图片图片画廊图片轮播。

五、amazeui组件文章类相关有哪四种组件？

解答：简介段落折叠面板标题栏。

六、amazeui组件菜单类相关有哪四种组件？

解答：选项卡工具栏菜单内容列表。

七、amazeui组件的第三方组件有哪四种？

解答：多说百度地图美洽客服微信支付。

八、html中使用web组件的价值是什么？

解答：使用模板快速开发，经过模板（hbs）将数据和 HTML 分离。

九、web手机app能够和那些非web的app界面作得如出一辙么？

解答：能够。

十、amazeui中的js插件和web组件的区别是什么（两点）？

解答：在AmazeUI(妹子UI)中,Web组件能够不编写模板而直接使用,若如此,则与JS插件没什么太大区别,官方原话也说能够这么调用的。Web组件与JS插件的不一样之处在于,Web组件借助 handlebars.js 实现了强大的模板功能,咱们能编写自定义模板从而使Web组件更具个性,甚至是编写出新的Web组件。

组件都有这个data-am-widget="header"，而后是加上插件的data-am-什么什么。

2、amazeui中内置的web组件有哪些

页面相关（5）：页头页脚分割线回顶部分页

图片（3）：单张图片图片画廊图片轮播

文章类（4）：简介段落折叠面板标题栏

菜单类（4）：选项卡工具栏菜单内容列表

折叠面板Accordion：一段文字折叠起来造成垂直列表的形式

简介intro：左图右文字

内容列表：就是内容的列表，内容标题的列表

选项卡：就是tab的那种选项卡

标题栏：就是文章或者别的的标题栏

段落：就是文章的形式，图文配

菜单：顶部的菜单

工具栏：底部的工具栏

折叠类：折叠面板、内容列表、选项卡。

非折叠的：简介、段落、标题栏、

菜单类：菜单、工具栏

二、第三方组件（四种）

三、使用web组件的价值

一、经过模板（hbs）将数据和 HTML 分离，这是 Web 组件的价值之一。用户能够在不一样的开发环境中使用 Web 组件。

二、不使用模板彷佛就失去了 Web 组件的核心价值。因此使用模板算是组件的价值。

四、Node.js环境（这个要学）

能够结合 Express.js、hbs 使用。

用户了能够直接使用打包好的模块 Amaze UI Widget hbs helper，example 里有完整的使用示例。

固然，你也能够自由调用：

3、如何使用

一、截图

二、代码

演示效果和官方给的同样了，我要作的就是弄到手机上面去，而后调样式便可，该调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='{&quot;directionNav&quot;: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>

三、amazeui中的js插件和web组件的区别是什么？

插件是组件功能的一部分，插件是组件的小时候，组件是插件长大以后，可以独当一面的时候。

组件都有这个data-am-widget="header"，而后是加上插件的data-am-什么什么

在AmazeUI(妹子UI)中,Web组件能够不编写模板而直接使用,若如此,则与JS插件没什么太大区别,官方原话也说能够这么调用的。Web组件与JS插件的不一样之处在于,Web组件借助 handlebars.js 实现了强大的模板功能,咱们能编写自定义模板从而使Web组件更具个性,甚至是编写出新的Web组件。

4、测试题-简答题

一、amazeui组件分哪两大类？

解答：官方组件（16）和第三方组件（4）。

二、amazeui组件官方组件分为哪四种？

解答：

页面相关（5）：页头页脚分割线回顶部分页

图片（3）：单张图片图片画廊图片轮播

文章类（4）：简介段落折叠面板标题栏

菜单类（4）：选项卡工具栏菜单内容列表

。

三、amazeui组件页面相关有哪五种组件？

解答：页头页脚分割线回顶部分页。

四、amazeui组件图片相关有哪三种组件？

解答：单张图片图片画廊图片轮播。

五、amazeui组件文章类相关有哪四种组件？

解答：简介段落折叠面板标题栏。

六、amazeui组件菜单类相关有哪四种组件？

解答：选项卡工具栏菜单内容列表。

七、amazeui组件的第三方组件有哪四种？

解答：多说百度地图美洽客服微信支付。

八、html中使用web组件的价值是什么？

解答：使用模板快速开发，经过模板（hbs）将数据和 HTML 分离。

九、web手机app能够和那些非web的app界面作得如出一辙么？

解答：能够。

十、amazeui中的js插件和web组件的区别是什么（两点）？

组件都有这个data-am-widget="header"，而后是加上插件的data-am-什么什么。

amazeui中内置的web组件有哪些且如何用

amazeui中内置的web组件有哪些且如何用

1、总结

一句话总结：

一、amazeui组件分哪两大类？

二、amazeui组件官方组件分为哪四种？

三、amazeui组件页面相关有哪五种组件？

四、amazeui组件图片相关有哪三种组件？

五、amazeui组件文章类相关有哪四种组件？

六、amazeui组件菜单类相关有哪四种组件？

七、amazeui组件的第三方组件有哪四种？

八、html中使用web组件的价值是什么？

九、web手机app能够和那些非web的app界面作得如出一辙么？

十、amazeui中的js插件和web组件的区别是什么（两点）？

2、amazeui中内置的web组件有哪些

一、官方组件（16种）

二、第三方组件（四种）

三、使用web组件的价值

一、经过模板（hbs）将数据和 HTML 分离，这是 Web 组件的价值之一。用户能够在不一样的开发环境中使用 Web 组件。

二、不使用模板彷佛就失去了 Web 组件的核心价值。因此使用模板算是组件的价值。

四、Node.js环境（这个要学）

3、如何使用

一、截图

二、代码

三、amazeui中的js插件和web组件的区别是什么？

4、测试题-简答题

一、amazeui组件分哪两大类？

二、amazeui组件官方组件分为哪四种？

三、amazeui组件页面相关有哪五种组件？

四、amazeui组件图片相关有哪三种组件？

五、amazeui组件文章类相关有哪四种组件？

六、amazeui组件菜单类相关有哪四种组件？

七、amazeui组件的第三方组件有哪四种？

八、html中使用web组件的价值是什么？

九、web手机app能够和那些非web的app界面作得如出一辙么？

十、amazeui中的js插件和web组件的区别是什么（两点）？