BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

amaze uiを使った詳細チュートリアル

2022-01-11 13:53:09

今日は先生からamaze uiの使い方について説明を受けたので、私の学習メモを紹介したいと思います。amaze uiの公式サイトには具体的な導入手順が書かれていますが、やはりフロントエンド開発の経験がない私には理解するのが難しかったです。

はじめに

フロントページの開発には、一般的にhtml、css、javascriptの3つの技術のサポートが必要です。amazui uiはcssとjavascriptの一部をラップし、ユーザーが直接呼び出せるようにします。

使用方法

amaze uiは通常、cssとjsファイルをプロジェクトにコピーする方法と、cdnメソッドを使用する方法の2種類で使用します。(最初の方法は開発中に使用され、2番目の方法は開発が終了してデプロイする必要があるときに使用されます。

詳細な説明は付録1参照)

方法1

1. amaze uiに対応したzipをダウンロードします。

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>

方法2

公式サイトで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& quot;/>
     <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>

amaze uiによってすでにカプセル化されているフォーマットをクラスで使用します。

付録1

開発中はhbuilderというツールを使用し、amaze uiのcssやjsをプロジェクトにインポートしておけば、ツール自体が開発中にプロンプトを出してくれますが、ユーザーがページにアクセスした際に、ローカルのcssやjsリソースを毎回要求してしまい、プロジェクトをデプロイするサーバーの負担が増えることになります。そこで、2番目の問題を回避するために、プロジェクトのデプロイ時に2番目の方法に変更することにします。

要約すると

amaze uiの詳しい使い方のチュートリアルについての記事は以上です。amaze uiの使い方については、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します