layui圖示用法總結
阿新 • • 發佈:2018-12-26
本文參考官方文件《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%"> <span class="uploadBt" onclick="uploadLog(this,'${logInfo.logName?if_exists}')" > <i class="layui-icon layui-icon-upload" style="font-size: 13px; color: #FFFFFF;"></i> 上傳 </span> <span class="downloadBt" onclick="downloadLog('${logInfo.logName?if_exists}')" > <i class="layui-icon layui-icon-download-circle" style="font-size: 14px; color: #FFFFFF;"></i> 下載 </span> </div> </body> </html>