玩轉layui

layui概述

 

 

簡介

layui（諧音：類UI) 是由國人 閑心 （杭州、soho 自由工作者）開發的一款采用模塊規范（amd cmd規范）編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。

 

layui 首個版本發布於2016年金秋，她區別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。她更多是為后端程序員量身定做，程序員無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切變得簡單。

 

官網

官網：

http://www.layui.com/

 

社區：

http://fly.layui.com/

 

GitHub：

https://github.com/sentsin/layui/

 

目錄結構

 

 

├─css //css目錄

│ │─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取，比如下面三個：）

│ │ ├─laydate

│ │ ├─layer

│ │ └─layim

│ └─layui.css //核心樣式文件

├─font //字體圖標目錄

├─images //圖片資源目錄（目前只有layim和編輯器用到的GIF表情）

│─lay //模塊核心目錄

│ └─modules //各模塊組件

│─layui.js //基礎核心庫

└─layui.all.js //包含layui.js和所有模塊的合並文件

 

快速上手

layui為開發者提供了兩種使用方式，分別為模塊化方式和非模塊化的方式。

 

模塊化使用

 

 

 

非模塊化使用

 

 

 

效果：

 

 

 

頁面元素

layui這個產品，提供了很強大的一些 css 的類名，我們通過它提供的這些類名，就可以完成頁面的布局和頁面的一些小組件（按鈕、導航條、輪播圖）。

 

同時該產品還提供了很多的js組件，可以非常方便的幫我們完成彈窗（模態框）、無刷新上傳、分頁字符串、表格展示.....

 

先學習一下提供的這些 css 類。

 

布局

layui提供了和bootstrap類似的柵格布局系統，可以將一個網頁分割為12列進行布局。

 

規則：

 

 

柵格布局系統，其實說白了就是table布局的一種演化。存在行（隨意的定制）和列（由12列進行有機的組合）。

 

layui里面的柵格使用方式：

1. 定義一個 layui-container的容器，存放行和列
2. 定義行 layui-row
3. 在行里面定義列 layui-col-md-(1-12)
4. 在列里面放置內容

 

演示：

 

 

效果：

 

 

 

進一步學習：（列偏移）

 

 

 

 

 

顏色

我們在學習bootstrap的時候，知道顏色是通過關鍵字進行提供的。

1. danger（red）
2. success (green)
3. warning
4. info
5. primary

 

layui 框架為開發頁面的時候提供了多種可選的顏色方案，供開發者使用。

常用主色

 

 

 

場景色

 

 

 

中性色

 

 

類選擇

在使用的時候，我們只需要在dom元素上面增加相應的類名即可。

 

 

 

擴展-web安全色

web安全色，就是網頁安全色。名字雖然有安全，但是和網站的安全無關。叫這個名字,是因為這些色彩在不同的顯示設備和操作系統上表現基本一致。非安全色換一個OS環境，顏色就可能失真。

 

名詞解釋：

https://blog.csdn.net/zzcv_/article/details/1722324

 

web安全色：

http://www.bootcss.com/p/websafecolors/

 

演示：

 

 

效果：

 

 

 

圖標

需要注意：現在互聯網上使用的這些圖標，都是一些字體庫文件（1. 改變大小 2. 改變顏色）做出來的，以前這些圖標都是設計做的小圖片。

 

使用：

通過對一個內聯元素（一般推薦用 i標簽）設定 class="layui-icon"，來定義一個圖標，然后對元素加上圖標對應的 font-class（查看手冊獲取圖標的類），即可顯示出你想要的圖標。

示例：

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i> 

效果：

 

 

 

 

演示：

 

 

效果：

 

 

天發現這些字體圖標不夠使用，則我們可以去淘寶的字體庫自己制作。

 

擴展

阿里字體圖：

http://www.iconfont.cn/

 

 

 

按鈕

向任意HTML元素設定class="layui-btn"，建立一個基礎按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。

 

 

 

 

 

 

演示：

 

 

 

效果：

 

 

 

表單

 

 

演示：

 

 

效果：

 

 

 

選項卡

 

 

演示：

 

 

效果：

 

 

表格

 

 

演示：

 

 

效果：

 

 

面板

 

 

 

動畫

動畫layui 的許多交互元素中，發揮着重要的作用。layui 的動畫全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9無動畫）。

 

 

示例：

<div class="layui-anim layui-anim-up"></div>

 

 

 

進度條

 

 

 

徽章

 

 

 

時間線

 

 

 

輔助

主要提供了引用、字段集區塊、水平線相關功能。

 

 

 

 

 

 

內置模塊

layUI框架除了是一個UI框架之外，還額外提供了很多的組件，例如常見的彈窗、日歷、分頁等組件，有了這些組件，可以快速的幫我們進行日常的開發。

 

彈窗組件-layer

網站：

http://layer.layui.com/

 

演示：

 

 

效果：

 

 

 

 

案例：

 

 

 

 

擴展

http://mishengqiang.com/sweetalert/

http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

http://www.jq22.com/yanshi3388

 

日歷組件-laydate

網站：

http://www.layui.com/laydate/

 

 

效果

 

 

 

擴展-mydate97

http://www.my97.net/demo/index.htm

 

分頁組件-laypage

網站：

http://www.layui.com/demo/laypage.html

 

布局：

 

 

 

前端代碼：

 

 

后端代碼：

 

 

效果

 

 

 

擴展

https://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/

 

 

 

周邊生態圈

基於layui框架研發出了很多的成熟的產品，例如 layadmin、layIM、xadmin等。

 

layadmin網站：

http://www.layui.com/admin/

 

layim網站：

http://layim.layui.com/

 

xadmin網站：

http://x.xuebingsi.com/

 

 

http://blog.sina.com.cn/s/blog_3f5edcfb0102x0ab.html?tj=1

 

 

 

擴展-數據庫操作

1. mysql
2. mysqli
3. mysql-pdo
4. medoo