代码拉取完成,页面将自动刷新
layui的一些小拓展组件 -> layui2.8以上
头像、移动端底部导航、移动端头部导航、弹出面板等
// 配置
layui.config({
base: "/model/" //模块的路径
})
示例请看 demo 文件夹
拓展文件在 model 文件夹
模块 jmNav.js
API
API | 描述 |
---|---|
var jmNav = layui.jmNav | 获得 jmNav 模块。 |
jmNav.peHead(options) | 设定头部属性项。 |
jmNav.peFoot(options) | 设定底部属性项。 |
demo示例
<!-- head -->
<head>
<!-- 根据自身情况引入layui.js框架 -->
<link rel="stylesheet" href="layui.css">
<script src="layui.js"></script>
</head>
<!-- body -->
<body>
<div id="peHead"></div> <!-- 头部导航 -->
<div style="padding: 45px 10px 55px 10px;">
内容添加边距防止遮挡,上 45 px 下 55 px
</div>
<div id="peFoot"></div> <!-- 底部导航 -->
</body>
<!-- javascript -->
<script>
// 配置
layui.config({
base: "../model/" // 放拓展的文件夹
})
// 导航示例
layui.use(["jmNav","dropdown"], function () {
var jmNav = layui.jmNav;
var dropdown = layui.dropdown;
// nav移动头部拓展
jmNav.peHead({
id: "peHead", // 容器id
addClass: "",//可追加class
left: { //可选 左侧按钮
id: "1",
text: `<i class="layui-icon layui-icon-left"></i>`, //内容
},
center: { //必须
text: "首页",
},
right: { //可选 右侧按钮
text: `<i class="layui-icon layui-icon-more-vertical"></i>`,
href: "http://www.baidu.com", // 链接 不填或为空不跳转 可选
},
callback: function (dom, data) { //回调
console.log(dom, data)
// 配合dropdown拓展使用 等等
/* dropdown.render({
elem: dom, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '查看',
id: 'detail'
},{
title: '删除',
id: 'del'
}]
}) */
}
})
// nav移动底部拓展
jmNav.peFoot({
id: "peFoot", // 容器id
config: [ // 配置
{
id: "1",
name: "首页",
icon: "layui-icon layui-icon-home",
},
{
id: "2",
name: "首页",
href: "", // 链接 不填或为空不跳转
icon: "layui-icon layui-icon-home",
}
],
thisId: "1", //默认选中的id
addClass: "layui-bg-cyan", //追加class
callback: function (dom,data) {
console.log(dom,data);
}
});
})
</script>
效果
模块 jmAvatar.js
API
API | 描述 |
---|---|
var jmAvatar = layui.jmAvatar | 获得 jmAvatar 模块。 |
jmAvatar.click(callback) | 点击头像事件。 |
demo示例
<!-- head -->
<head>
<!-- 根据自身情况引入layui.js框架 -->
<link rel="stylesheet" href="layui.css">
<script src="layui.js"></script>
</head>
<!-- body -->
<body>
<p>图标类型</p>
<!-- 头像 -->
<div class="demo">
<!-- 图标 -->
<div class="jmAvatar">
<i class="layui-icon layui-icon-home"></i>
</div>
<!-- 文字 -->
<div class="jmAvatar">
<span>我</span>
</div>
<!-- 图片 -->
<div class="jmAvatar radius-full">
<img src="../avatar_1.jpg" alt="">
</div>
</div>
<p>不同圆角</p>
<div class="demo">
<!-- 图标 -->
<div class="jmAvatar xl">
<i class="layui-icon layui-icon-home"></i>
</div>
<!-- 文字 -->
<div class="jmAvatar xxl">
<span>我</span>
</div>
<!-- 图片 -->
<div class="jmAvatar xxxl">
<img src="../avatar_1.jpg" alt="">
</div>
</div>
<p>图片类型大小</p>
<div class="demo">
<div class="jmAvatar img-size-s">
<img src="../avatar_2.png" alt="">
</div>
<div class="jmAvatar img-size-m">
<img src="../avatar_2.png" alt="">
</div>
<div class="jmAvatar">
<img src="../avatar_2.png" alt="">
</div>
</div>
<p>不同大小</p>
<div class="demo">
<!-- 图标 -->
<div class="jmAvatar xs">
<i class="layui-icon layui-icon-home"></i>
</div>
<!-- 文字 -->
<div class="jmAvatar sm">
<span>我</span>
</div>
<div class="jmAvatar lg">
<span>我</span>
</div>
<div class="jmAvatar xl">
<i class="layui-icon layui-icon-home"></i>
</div>
</div>
</body>
<!-- javascript -->
<script>
// 配置
layui.config({
base: "../model/" // 放拓展的文件夹
})
//图标点击示例
layui.use(["jmAvatar"], function () {
var jmAvatar = layui.jmAvatar;
jmAvatar.click(function (dom) {
console.log(dom);
});
})
</script>
效果
模块 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示例
<!-- head -->
<head>
<!-- 根据自身情况引入layui.js框架 -->
<link rel="stylesheet" href="layui.css">
<script src="layui.js"></script>
</head>
<!-- body -->
<body>
<button type="button" class="layui-btn" onclick="show_jmSheet()">弹出面板</button>
</body>
<!-- javascript -->
<script>
// 配置
layui.config({
base: "../model/" // 放拓展的文件夹
})
//弹出面板
function show_jmSheet() {
layui.use(["jmSheet"], function () {
var jmSheet = layui.jmSheet;
jmSheet.open({
id: "", //layer id
title: "标题",// 可设置标题,也可不设置
shadeClose: true, // 是否点击遮罩关闭
align: "center",//可选位置,默认居中,left左对齐,right右对齐
content: [
{ text: "选项一" },
{ text: "选项二", desc: "这里是描述信息" }, //可带描述信息
{ text: "选项三", img: '../dota_火女.png' }, //可带图片
],
addClass: "addClass", //可追加class
callback: function (index, dom, data) { //点击回调
console.log(index, dom, data)
}
})
})
}
</script>
效果
模块 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 | - |
追加数据
var demo01 = jmMedia.render(...忽略)
// 追加数据
jmMedia.addData(
demo01,
[{
id: 3, // 标识若存在则替换信息
title: "更改数据",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_2.png",//可选,图片
}, {
id: 4,
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
}]);
demo示例
<!-- head -->
<head>
<!-- 根据自身情况引入layui.js框架 -->
<link rel="stylesheet" href="layui.css">
<script src="layui.js"></script>
<style>
/* 添加底色效果会更明显 */
body {
background: #efeff4;
}
</style>
</head>
<!-- body -->
<body>
<div class="demo01"></div>
</body>
<!-- javascript -->
<script>
// 配置
layui.config({
base: "../model/" // 放拓展的文件夹
})
// 图文列表
layui.use(["jmMedia"], function () {
var jmMedia = layui.jmMedia;
// 渲染
var demo01 = jmMedia.render({
elem: ".demo01",
type: "normal", //默认风格为normal,可选card
addClass: "",//可追加class来新增样式
data: [
{
id: 1, //id,标识
href: "www.baidu.com", //可选,跳转链接
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
icon: "layui-icon layui-icon-right",//可选,右侧图标
},
{
id: 2,
title: "幸福",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
icon: "layui-icon layui-icon-right",//可选,右侧图标
}, {
id: 3,
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
}
],
callback: function (dom) {
console.log(dom)
}
});
setTimeout(function () {
// 追加数据
jmMedia.addData(demo01, [{
id: 3,
title: "更改数据",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_2.png",//可选,图片
}, {
id: 4,
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
}])
}, 5000)
// 渲染 card风格
jmMedia.render({
elem: ".demo02",
type: "card", //默认风格为normal,可选card
addClass: "",//可追加class来新增样式
data: [
{
id: 1, //id,标识
href: "www.baidu.com", //可选,跳转链接
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
icon: "layui-icon layui-icon-right",//可选,右侧图标
},
{
id: 12,
title: "幸福",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
icon: "layui-icon layui-icon-right",//可选,右侧图标
}, {
id: 13,
title: "标题",
desc: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",//可选,描述
img: "../avatar_1.jpg",//可选,图片
}
],
callback: function (dom) {
console.log(dom)
}
})
})
</script>
效果
模块 jmImg.js
<body>
<button type="button" class="layui-btn" id="add">默认按钮</button>
<div class="demo"></div>
<img jm-src="../avatar_1.jpg" width="100" />
</body>
<script>
// 配置
layui.config({
base: "../model/",
version: true
})
layui.use(["jquery", "jmImg"], function () {
var $ = layui.$;
var jmImg = layui.jmImg;
/**
* 图片加载优化开启
* img中属性 jm-src 为要显示的图片地址
*/
jmImg.start("../加载中.gif");
//jmImg.stop();//关闭优化
$("#add").click(function () {
$(".demo").append(`
<img jm-src="../avatar_2.png" width="100" />
<img src="../dota_火女.png" width="100" />
`);
})
})
</script>
<body>
<p>模板引擎</p>
<div id="tpl">
</div>
</body>
<script>
// 配置
layui.config({
base: "../model/",
version: true
})
// 模板引擎
layui.use(["jmTpl", "jquery"], function () {
var jmTpl = layui.jmTpl;
var $ = layui.$
var html = `
<p>{title}</p>
<br>----------if-------------<br>
{#if isTrue}
<p>It's true!</p>
{/if}
<br>--------if-else-----------------<br>
{#if gender === 'male'}
<p>Gender is male</p>
{:else}
<p>Gender is female</p>
{/if}
<br>--------if-elseif-----------------<br>
{#if gender === 'male'}
<p>Gender is male</p>
{:else if gender === 'female'}
<p>Gender is female</p>
{/if}
<br>--------if-elseif-elseif-else--------------<br>
{#if gender === 'male'}
<p>Gender is male</p>
{:else if gender === 'female'}
<p>Gender is female</p>
{:else if gender === 'kllxs'}
<p>Gender is kllxs</p>
{:else}
<p>都不是</p>
{/if}
<br>--------each--------------<br>
{#each users as v,k}
<p>key:{k},姓名:{v.name}</p>
{/each}
<br>--------each-if-------------<br>
<div>
<div>
{#each users as v,k}
{#if v.name === '小陈'}
<p>key:{k},姓名:{v.name}</p>
{/if}
{/each}
</div>
</div>
<br>--------each-if-------------<br>
<div>
<div>
{#if gender === 'male'}
{#each users as v,k}
<p>key:{k},姓名:{v.name}</p>
<span>asd</span>
{/each}
{/if}
</div>
</div>
<br>--------for-------------<br>
{#for var i=0;i<10;i++}
<p>for:{i}</p>
{/for}
<br>--------html-------------<br>
<div>{@html dynamicHTML}</div>
<div>{dynamicHTML}</div>
`;
console.time('testFunction');
var tpl = jmTpl(html, {
title: 'Hello, JinMin!',
isTrue: true,
gender: 'male',
users: [
{ name: '小陈' },
{ name: '小李' },
{ name: '王刚' }
],
dynamicHTML: '<strong>Dynamic HTML</strong>'
});
// console.log(tpl)
console.timeEnd('testFunction');
$("#tpl").html(tpl);
})
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。