锦民layui拓展

https://kllxs_admin.gitee.io/jinmin-layui-expansion/

介绍

layui的一些小拓展组件 -> layui2.8以上

头像、移动端底部导航、移动端头部导航、弹出面板等

//追加css
layui.link("/model/jmAll.css");
// 配置
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>
    //追加小拓展的css
    layui.link("../model/jmAll.css");
    // 配置
    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>

效果

alt 属性文本

头像

模块 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>
    //追加小拓展的css
    layui.link("../model/jmAll.css");
    // 配置
    layui.config({
        base: "../model/" // 放拓展的文件夹
    })

    //图标点击示例
    layui.use(["jmAvatar"], function () {
        var jmAvatar = layui.jmAvatar;

        jmAvatar.click(function (dom) {
            console.log(dom);
        });
    })
</script>

效果

alt 属性文本

面板

模块 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>
    //追加小拓展的css
    layui.link("../model/jmAll.css");
    // 配置
    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>

效果

alt 属性文本

图文列表

模块 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>
    //追加小拓展的css
    layui.link("../model/jmAll.css");
    // 配置
    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>

效果

alt 属性文本

图片加载优化

模块 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>
    //追加css
    layui.link("../model/jmAll.css");
    // 配置
    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>
    //追加css
    layui.link("../model/jmAll.css");
    // 配置
    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>--------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>

快乐两小时 / 锦民layui拓展

锦民layui拓展

介绍

使用教程

导航栏

头像

面板

图文列表

图片加载优化

模板引擎

简介

发行版 (3)

贡献者

近期动态

快乐两小时 / 锦民layui拓展 .gitee-modal { width: 500px !important; }

锦民layui拓展

介绍

使用教程

导航栏

头像

面板

图文列表

图片加载优化

模板引擎

简介

发行版 (3)

贡献者

近期动态

搜索帮助

快乐两小时 / 锦民layui拓展