首页 | 6074 | 680 | 340 | 添加收藏 上一个 下一个
基于layui日历记事本(原创)

兼容IE


laydateNote.jsES6版本


laydateNoteES6.js新增,展示列表功能:


配置如下,由于引用了模板引擎,建议,html布局代码参照一下内容,样式布局可自行修改。


fine: '.laydateNotebook', //这里是展示div,默认不写则是关闭展示功能html 
<!--详细记事本-->     
<div class = "laydateNotebook" > 
    <div class = "box" > 
    </div>
</div > 
<!--容器-->   
<scriptt type="text/html" id="fineTpl">
    <ul class="layui-timeline"> {{each lists v i }}
        <li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{v.time}}</h3>
                <p> {{v.value}} </p>
            </div>
        </li> {{/each}}
        <li class="layui-timeline-item"> <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">...</div>
            </div>
        </li>
    </ul>
</scriptt>

新增请求参数:


param:'',默认为空,//这里参数是请求数据ajax的data参数,示例:param:{ id:1 }优化回调函数,方便ajax请求:


done: function(data, chooseData, type) {
    //回调数据,这里发送你的请求ajax       
    console.log(data, chooseData, type)
}

type:就是你要发送的ajax请求方式,


‘post’:添加数据的ajax请求方式


‘’:删除数据的ajax请求方式


'patch’:修改数据的ajax请求方式


使用说明


引入css:


<link rel="stylesheet" href="./layui/css/layui.css" /> 
<link rel="stylesheet" href="./css/date.css" />

引入js


<script src="./layui/layui.js"></script>

html:


<!--容器-->  
<div class="layui-inline" id="test-n2"></div> 
<!--容器-->

js:初始化


layui.extend({
    laydateNote: './js/layui-notebook'
    //layui-notebook.js的相对路径,
}).use(['laydateNote'], function() {
    //调用 
    let {
        laydateNote
    } = layui
    //初始化插件,这是es6格式,
    //es3格式:
    var laydateNote = layui.laydateNote laydateNote({
        elem: '#test-n2',
        //容器id,CLass
        url: 'test2.json',
        //异步数据接口,本地浏览时可不设置 sort: 'up', 
        //日期排序,默认不设置不排序,up 日期升序,down 日期降序
        done(data) {
            //回调数据,这里发送你的请求
            ajax console.log(data)
        }
    })
})

插件路径不懂的可以参考官网