# Layui Jinmin Exp
**Repository Path**: kllxs_admin/jinmin-layui-expansion
## Basic Information
- **Project Name**: Layui Jinmin Exp
- **Description**: 🦄layui 的 一 些 手 机 端 小 拓 展 工 具，导航栏 头像 面板 图文列表 图片加载优化 模板引擎 等
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 9
- **Forks**: 1
- **Created**: 2023-10-23
- **Last Updated**: 2025-04-15
## Categories & Tags
**Categories**: Uncategorized
**Tags**: layui, JavaScript
## README
# 锦民layui拓展
在线测试：https://stackblitz.com/edit/stackblitz-starters-ezvsn9?file=index.html
#### 介绍
layui的一些小拓展组件 -> layui 2.+
头像、移动端底部导航、移动端头部导航、弹出面板等
```js
// 配置
layui.config({
base: "/model/" //模块的路径
})
```
示例请看 demo 文件夹
拓展文件在 model 文件夹
### 使用教程
[导航栏](#导航栏)
[头像](#头像)
[面板](#面板)
[图文列表](#图文列表)
[图片加载优化](#图片加载优化)
[模板引擎](#模板引擎)
#### 导航栏
> 模块 jmNav.js
API
| API | 描述 |
| ---- | ---- |
| var jmNav = layui.jmNav | 获得 jmNav 模块。 |
| jmNav.peHead(options) | 设定头部属性项。 |
| jmNav.peFoot(options) | 设定底部属性项。 |
demo示例
```html
内容添加边距防止遮挡，上 45 px 下 55 px
```
效果
#### 头像
> 模块 jmAvatar.js
API
| API | 描述 |
| ---- | ---- |
| var jmAvatar = layui.jmAvatar | 获得 jmAvatar 模块。 |
| jmAvatar.click(callback) | 点击头像事件。 |
demo示例
```html
图标类型
不同圆角
图片类型大小
不同大小
```
效果
#### 面板
> 模块 jmSheet.js
API
| API | 描述 |
| ---- | ---- |
| var jmSheet = layui.jmSheet | 获得 jmSheet 模块。 |
| jmSheet.open(options) | 设定属性项 |
属性
| 属性名 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| id | layer id | string | - |
| title | 可设置标题,也可不设置 | string | - |
| shadeClose | 是否点击遮罩关闭,false会出现取消按钮 | bool | true |
| align | 位置:center、left、right | string | center |
| content | 选择项数据 | array | [] |
| text | 内容，content的text，必须 | string | - |
| desc | 描述，content的desc，可选 | string | - |
| img | 图片链接，content的img，可选 | string | - |
| addClass | 给dom添加class名 | string | - |
| callback | 点击数据项的回调:index, dom, data | callback | ---- |
demo示例
```html
```
效果
#### 图文列表
> 模块 jmSheet.js
API
| API | 描述 |
| ---- | ---- |
| var jmMedia = layui.jmMedia | 获得 jmMedia 模块。 |
| jmMedia.render(options) | 设定属性项 |
| jmMedia.addData(elem,array) | 追加数据属性项 |
属性
| 属性名 | 描述 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| elem | 绑定原始 jmMedia 元素，方法渲染方式必填。 | string | - |
| type | 风格类型:normal,card | string | normal |
| addClass | 追加class名来新增样式 | string | - |
| data | 选择数据项 | array | [] |
| id | data.id 必填,标识 | number | - |
| href | data.href 可选,链接形式,优先跳转链接 | string | - |
| title | data.title 标题,必填 | string | - |
| desc | data.desc 描述,可选 | string | - |
| img | data.img 图片链接,可选 | string | - |
| icon | data.icon 可选，右侧图标 | string | - |
| callback | 选择数据项回调函数,dom | callback | - |
追加数据
```js
var demo01 = jmMedia.render(...忽略)
// 追加数据
jmMedia.addData(
demo01,
[{
id: 3, // 标识若存在则替换信息
title: "更改数据",
desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
img: "../avatar_2.png",//可选，图片
}, {
id: 4,
title: "标题",
desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
img: "../avatar_1.jpg",//可选，图片
}]);
```
demo示例
```html
```
效果
#### 图片加载优化
> 模块 jmImg.js
```html
![]()
```
#### 模板引擎
```html
模板引擎
``` 
