amaze ui 的使用詳細(xì)教程

今天老師給我講解了amaze ui的使用,在此與大家分享我的學(xué)習(xí)筆記。amaze ui的官網(wǎng)雖然已經(jīng)提供了具體的實(shí)現(xiàn)步驟,但是對(duì)于沒(méi)有前臺(tái)開(kāi)發(fā)經(jīng)驗(yàn)的我,理解起來(lái)還是很有困難的。
引言
一個(gè)前臺(tái)頁(yè)面的開(kāi)發(fā)一般需要html、css、javascript三種技術(shù)的支持,amazui ui對(duì)一些css、js進(jìn)行了封裝,是其可供用戶直接調(diào)用。
使用方法
amaze ui的使用通常有兩種方式:css、js文件復(fù)制到項(xiàng)目中;采用cdn方式。(在開(kāi)發(fā)過(guò)程中采用第一種方式;開(kāi)發(fā)結(jié)束需要部署時(shí),采用第二種方式。
具體解釋見(jiàn)附錄1)
方法一
1.將amaze ui對(duì)應(yīng)的zip下載。
解壓后查看該文件夾下的問(wèn)assets文件,assets文件夾下又包括css、js文件夾,這兩個(gè)文件就是amaze ui中封裝,可供用用戶直接使用的樣式。
2.把上述提到的css、js文件夾拷貝到web項(xiàng)目的WebRoot下。
3.在項(xiàng)目中對(duì)樣式進(jìn)行使用。
注:使用hbuilder開(kāi)發(fā)非常便捷。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello amazeui</title> </head> <link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/amazeui.min.js"></script> <body> <button class="am-btn-primary am-btn-block " >aaa</button> </body> </html>
方法二
在官網(wǎng)上獲取js和css對(duì)應(yīng)的地址,將他們引入到j(luò)s中。但是使用amaze ui的js,需要jquery的支持,所以需要將其導(dǎo)入,導(dǎo)入次序要在js之前。
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" /> <title></title > <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.4.2/css/amazeui.min.css"/> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.amazeui.org/amazeui/2.4.2/js/amazeui.min.js"></script> </head> <body> <button <span style="color:#ff0000;">class</span>="am-btn" value="aa"> </button> </body> </html>
我們?cè)赾lass中使用amaze ui已經(jīng)封裝好的格式。
附錄1
在開(kāi)發(fā)過(guò)程中,使用的是hbuilder這個(gè)工具,如果將amaze ui的css、js導(dǎo)入到項(xiàng)目中,開(kāi)發(fā)過(guò)程中工具本身會(huì)有提示;但是,當(dāng)用戶訪問(wèn)該網(wǎng)頁(yè)時(shí),每次都會(huì)請(qǐng)求本地的css和js資源,會(huì)增加部署該項(xiàng)目的服務(wù)器的負(fù)擔(dān)。因此為了避免第二項(xiàng)問(wèn)題,我們?cè)诓渴痦?xiàng)目時(shí)會(huì)改變成第二種方式。
總結(jié)
到此這篇關(guān)于amaze ui 的使用詳細(xì)教程的文章就介紹到這了,更多相關(guān)amaze ui 的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
amazeui 驗(yàn)證按鈕擴(kuò)展的實(shí)現(xiàn)
這篇文章主要介紹了amazeui 驗(yàn)證按鈕擴(kuò)展的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-21前后端結(jié)合實(shí)現(xiàn)amazeUI分頁(yè)效果
這篇文章主要介紹了前后端結(jié)合實(shí)現(xiàn)amazeUI分頁(yè),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-21AmazeUI 加載進(jìn)度條的實(shí)現(xiàn)示例
這篇文章主要介紹了AmazeUI 加載進(jìn)度條的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)2020-08-20AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件實(shí)現(xiàn)
這篇文章主要介紹了AmazeUI折疊式卡片布局,整合內(nèi)容列表、表格組件實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下2020-08-20AmazeUI中模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了AmazeUI中模態(tài)框的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-19- 這篇文章主要介紹了Amaze UI 文件選擇域的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-26