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組件。