這篇文章主要講解了“web前端中amazeui框架怎么使用”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“web前端中amazeui框架怎么使用”吧!
引言
一個前臺頁面的開發一般需要html、css、javascript三種技術的支持,amazui ui對一些css、js進行了封裝,是其可供用戶直接調用。
使用方法
amaze ui的使用通常有兩種方式:css、js文件復制到項目中;采用cdn方式。(在開發過程中采用第一種方式;開發結束需要部署時,采用第二種方式。
具體解釋見附錄1)
方法一
1.將amaze ui對應的zip下載。
解壓后查看該文件夾下的問assets文件,assets文件夾下又包括css、js文件夾,這兩個文件就是amaze ui中封裝,可供用用戶直接使用的樣式。
2.把上述提到的css、js文件夾拷貝到web項目的WebRoot下。
3.在項目中對樣式進行使用。
注:使用hbuilder開發非常便捷。
<!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>
方法二
在官網上獲取js和css對應的地址,將他們引入到js中。但是使用amaze ui的js,需要jquery的支持,所以需要將其導入,導入次序要在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 >class</span>="am-btn" value="aa">
</button>
</body>
</html>
我們在class中使用amaze ui已經封裝好的格式。
附錄1
在開發過程中,使用的是hbuilder這個工具,如果將amaze ui的css、js導入到項目中,開發過程中工具本身會有提示;但是,當用戶訪問該網頁時,每次都會請求本地的css和js資源,會增加部署該項目的服務器的負擔。因此為了避免第二項問題,我們在部署項目時會改變成第二種方式。
感謝各位的閱讀,以上就是“web前端中amazeui框架怎么使用”的內容了,經過本文的學習后,相信大家對web前端中amazeui框架怎么使用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。