App下載

前端開發(fā)中amazeui框架使用教程分享!

猿友 2021-08-04 17:55:07 瀏覽數(shù) (3456)
反饋

在上次小編分布了有關(guān)于HTML中的amazeui框架之后就有不少的小伙伴們就私信小編說能不能多分享這個(gè)框架的內(nèi)容,那么為了滿足小伙伴們的需求,今天我就來和大家說說“前端開發(fā)中amazeui框架使用教程分享!”這方面的內(nèi)容吧!

引言

一個(gè)前臺(tái)頁面的開發(fā)一般需要html、css、javascript三種技術(shù)的支持,amazui ui對(duì)一些css、js進(jìn)行了封裝,是其可供用戶直接調(diào)用。

使用方法

amaze ui的使用通常有兩種方式:css、js文件復(fù)制到項(xiàng)目中;采用cdn方式。(在開發(fā)過程中采用第一種方式;開發(fā)結(jié)束需要部署時(shí),采用第二種方式。

具體解釋見附錄1)

方法一

1.將amaze ui對(duì)應(yīng)的zip下載。

解壓后查看該文件夾下的問assets文件,assets文件夾下又包括css、js文件夾,這兩個(gè)文件就是amaze ui中封裝,可供用用戶直接使用的樣式。

2.把上述提到的css、js文件夾拷貝到web項(xiàng)目的WebRoot下。

3.在項(xiàng)目中對(duì)樣式進(jìn)行使用。

注:使用hbuilder開發(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" />
     <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

在開發(fā)過程中,使用的是hbuilder這個(gè)工具,如果將amaze ui的css、js導(dǎo)入到項(xiàng)目中,開發(fā)過程中工具本身會(huì)有提示;但是,當(dāng)用戶訪問該網(wǎng)頁時(shí),每次都會(huì)請(qǐng)求本地的css和js資源,會(huì)增加部署該項(xiàng)目的服務(wù)器的負(fù)擔(dān)。因此為了避免第二項(xiàng)問題,我們?cè)诓渴痦?xiàng)目時(shí)會(huì)改變成第二種方式。

總結(jié)

那么今天有關(guān)于“前端開發(fā)中amazeui框架使用教程分享!”這方面的內(nèi)容分享就到這邊了,更多相關(guān)amazeui的使用內(nèi)容都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解! 


0 人點(diǎn)贊