layui(諧音,類ui),一款為服務端程式設計師量身定做的ui框架,採用原生的html/css/js編寫,體積輕盈,內容豐富。使用layui後,一次性解決彈出層、日期外掛程式、資料分頁、**、檔案上傳等常用模組。除此之外,layui相容除ie6/7外的所有瀏覽器,可作為 pc端後台系統和前台介面的快速開發方案。
├─css //css目錄
│ │─modules //模組css目錄(一般如果模組相對較大,我們會單獨提取,比如下面三個:)
│ │ ├─laydate
│ │ ├─layer
│ │ └─code.css
│ └─layui.css //核心樣式檔案
├─font //字型圖示目錄
│─lay //模組核心目錄
│ └─modules //各模組元件
│─layui.js //基礎核心庫
└─layui.all.js //包含layui.js和所有模組的合併檔案
layui的兩種載入方法
方法1:按模組載入layui.css+layui.js,適用於線下開發環境,方便團隊除錯**。
單模組載入
;!function(){
載入模組
layui.use(['layer','form'],function(){
var layer=layui.layer;
layer.open({
title: '模組化載入'
,content: 'hello,layui'
方法2:全模組載入layui.css+layui.all.js,適用於線上環境,介紹請求靜態資源的次數。
全模組載入
// 無需再執行layui.use()方法載入模組,直接使用即可
;!function(){
var layer=layui.layer,form=layui.form;
layer.open({
title:"全模組載入",
content:"hello,layui"
以上就是layui入門介紹的全部知識,在之後的文章中還會介紹如何使用開發中常用的表單模組、檔案上傳模組、分頁模組等。
前端UI框架 Bootstrap 框架
設計前端頁面或者元件的時候,原生的html元件,比較難看,自己設計那些css樣式,非常麻煩,工作量很大,還不一定會。但是其實,網上有很多開源的元件庫,拿來使用就可以了,例如 bootstrap,easyui,layui,miniui。需要的時候,網上可以找到一大堆這種ui框架。直接使用這種現成的輪子...
前端UI框架
10 後台ui開發框架 museui 一款基於bootstrap風格,相容於主流瀏覽器 包括ie6 的後端ui開發元件。官方 以下是常用前端ui框架快速開發web專案 1.dwz 國產的jquery ui富客戶端框架 2.jquery lingerui 國產前端框架 3.jquery easyui ...
UI框架選型
最近公司的乙個新專案要進行ui框架的選型,我把選型的思路和過程跟大家分享一下。在選型之前,我們先要定一下選型的標準,就像人生一樣,想清楚 自己要的是什麼 是最重要的。選型的標準分為幾部分 業務是根本,和大部分的技術一樣,框架沒有好壞之分,只有適合與不適合。我們專案是乙個通訊類的監控專案,使用者群是移...