1. 程式人生 > >layui圖示用法總結

layui圖示用法總結

本文參考官方文件《layui圖示使用官方文件》,建議先看此文章,並結合本文的前兩個步驟使用即可

1.下載layui.js相關文件,《layui.js下載》,下載之後裡面的內容如下:

只需要把layui資料夾拷貝到自己專案中即可

2.頁面引入,在自己要實現檔案上傳功能的html頁面引入下面兩個檔案:

<script src="${basePath?if_exists}/demp/layui/layui.js" charset="utf-8"></script>
<link rel='stylesheet' href='${basePath?if_exists}/demp/layui/css/layui.css' media="all">
<!-- 注意:如果你直接複製所有程式碼到本地,上述css路徑需要改成你本地的或者是專案裡檔案的路徑 -->

 3.本文實現了上傳和下載按鈕圖示的使用,效果如下:

html程式碼如下(可以通過font-size和color屬性定義圖示的大小和顏色,具體看下面程式碼):

<html>
 <head>
  <title> New Document </title>
 <link rel="stylesheet" href="C:\Users\tljj\Desktop\layui-v2.4.5\layui-v2.4.5\layui\css\layui.css"  media="all">
 <script src="C:\Users\tljj\Desktop\layui-v2.4.5\layui-v2.4.5\layui\layui.js" charset="utf-8"></script>
 <!-- 注意:如果你直接複製所有程式碼到本地,上述css路徑需要改成你本地的 -->
  <style type="text/css">
	.uploadBt {  
		    background:#378D7E;  
		    color:#FFFFFF;
		    padding: 3px 7px 5px 7px;  
		    font-size:11px;  
		    border-radius:2px 2px 2px 2px;
		    cursor:pointer;
	    }  
    .downloadBt {  
		    background:#EC4E22;  
		    color:#FFFFFF;
		    padding: 3px 7px 5px 7px;  
		    font-size:11px;  
		    border-radius:2px 2px 2px 2px;
		    cursor:pointer;
	    }  
  </style>
 </head>
 <body>
	<br><br><br>
	<div style="width:80%">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span class="uploadBt" onclick="uploadLog(this,'${logInfo.logName?if_exists}')" >
			<i class="layui-icon layui-icon-upload" style="font-size: 13px; color: #FFFFFF;"></i>&nbsp;上傳
		</span>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span class="downloadBt" onclick="downloadLog('${logInfo.logName?if_exists}')" >
			<i class="layui-icon layui-icon-download-circle" style="font-size: 14px; color: #FFFFFF;"></i>&nbsp;下載
		</span>
	</div>
 </body>
</html>