mirror of
https://gitee.com/ulthon/layui-ul.git
synced 2026-07-09 05:32:49 +08:00
增加列表图书模式;
This commit is contained in:
augushong
@@ -1,336 +1,373 @@
|
|||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>头像列表</legend>
|
<legend>头像列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-avatar-list">
|
<div class="ul-avatar-list">
|
||||||
<div class="ul-avatar-list-item">
|
<div class="ul-avatar-list-item">
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
<div class="ul-avatar-list-item-info">
|
<div class="ul-avatar-list-item-info">
|
||||||
<div class="ul-avatar-list-item-title">
|
<div class="ul-avatar-list-item-title">
|
||||||
张三
|
张三
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-avatar-list-item-tips">
|
<div class="ul-avatar-list-item-tips">
|
||||||
深山旅馆电话事件的最新消息
|
深山旅馆电话事件的最新消息
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-avatar-list-item-time">
|
<div class="ul-avatar-list-item-time">
|
||||||
19:54
|
19:54
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item">
|
||||||
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
|
<div class="ul-avatar-list-item-info">
|
||||||
|
<div class="ul-avatar-list-item-title">
|
||||||
|
张三
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-tips">
|
||||||
|
深山旅馆电话事件的最新消息
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-time">
|
||||||
|
19:54
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="ul-avatar-list" style="width: 400px;">
|
||||||
<div class="ul-avatar-list-item">
|
<div class="ul-avatar-list-item">
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
<div class="ul-avatar-list-item-info">
|
<div class="ul-avatar-list-item-info">
|
||||||
<div class="ul-avatar-list-item-title">
|
<div class="ul-avatar-list-item-title">
|
||||||
张三
|
张三
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-avatar-list-item-tips">
|
<div class="ul-avatar-list-item-tips">
|
||||||
深山旅馆电话事件的最新消息
|
深山旅馆电话事件的最新消息
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-avatar-list-item-time">
|
<div class="ul-avatar-list-item-time">
|
||||||
19:54
|
19:54
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item">
|
||||||
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
|
<div class="ul-avatar-list-item-info">
|
||||||
|
<div class="ul-avatar-list-item-title">
|
||||||
|
张三
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-tips">
|
||||||
|
深山旅馆电话事件的最新消息
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-time">
|
||||||
|
19:54
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list" style="width: 200px;">
|
||||||
|
<div class="ul-avatar-list-item current">
|
||||||
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
|
<div class="ul-avatar-list-item-info">
|
||||||
|
<div class="ul-avatar-list-item-title">
|
||||||
|
张三
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-tips">
|
||||||
|
深山旅馆电话事件的最新消息
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-time">
|
||||||
|
19:54
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item">
|
||||||
|
<div class="ul-avatar-list-item-img"></div>
|
||||||
|
<div class="ul-avatar-list-item-info">
|
||||||
|
<div class="ul-avatar-list-item-title">
|
||||||
|
张三
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-tips">
|
||||||
|
深山旅馆电话事件的最新消息
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-list-item-time">
|
||||||
|
19:54
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-avatar-list" style="width: 400px;">
|
|
||||||
<div class="ul-avatar-list-item">
|
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
|
||||||
<div class="ul-avatar-list-item-info">
|
|
||||||
<div class="ul-avatar-list-item-title">
|
|
||||||
张三
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-tips">
|
|
||||||
深山旅馆电话事件的最新消息
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-time">
|
|
||||||
19:54
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item">
|
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
|
||||||
<div class="ul-avatar-list-item-info">
|
|
||||||
<div class="ul-avatar-list-item-title">
|
|
||||||
张三
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-tips">
|
|
||||||
深山旅馆电话事件的最新消息
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-time">
|
|
||||||
19:54
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list" style="width: 200px;">
|
|
||||||
<div class="ul-avatar-list-item current">
|
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
|
||||||
<div class="ul-avatar-list-item-info">
|
|
||||||
<div class="ul-avatar-list-item-title">
|
|
||||||
张三
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-tips">
|
|
||||||
深山旅馆电话事件的最新消息
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-time">
|
|
||||||
19:54
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item">
|
|
||||||
<div class="ul-avatar-list-item-img"></div>
|
|
||||||
<div class="ul-avatar-list-item-info">
|
|
||||||
<div class="ul-avatar-list-item-title">
|
|
||||||
张三
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-tips">
|
|
||||||
深山旅馆电话事件的最新消息
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-list-item-time">
|
|
||||||
19:54
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>侧边头像列表</legend>
|
<legend>侧边头像列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
|
|
||||||
|
<div class="ul-avatar-sidebar-list" style="width: 200px;">
|
||||||
|
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
|
||||||
|
<div class="ul-avatar-sidebar-list-item-img"></div>
|
||||||
|
<div class="ul-avatar-sidebar-list-item-info">
|
||||||
|
<div class="ul-avatar-sidebar-list-item-title">
|
||||||
|
张三
|
||||||
|
</div>
|
||||||
|
<div class="ul-avatar-sidebar-list-item-intro">
|
||||||
|
法外狂徒不寂寞
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="ul-avatar-sidebar-list" style="width: 200px;">
|
|
||||||
<div class="ul-avatar-sidebar-list-item" data-repeat="3">
|
|
||||||
<div class="ul-avatar-sidebar-list-item-img"></div>
|
|
||||||
<div class="ul-avatar-sidebar-list-item-info">
|
|
||||||
<div class="ul-avatar-sidebar-list-item-title">
|
|
||||||
张三
|
|
||||||
</div>
|
|
||||||
<div class="ul-avatar-sidebar-list-item-intro">
|
|
||||||
法外狂徒不寂寞
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>相册列表</legend>
|
<legend>相册列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-photo-list">
|
<div class="ul-photo-list">
|
||||||
<div class="ul-photo-item" data-repeat="3">
|
<div class="ul-photo-item" data-repeat="3">
|
||||||
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
|
<div class="ul-photo-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ul-photo-info">
|
||||||
|
<div class="ul-photo-title">周末野外广场树林写真</div>
|
||||||
|
<div class="ul-photo-plus">45P+1V</div>
|
||||||
|
<div class="ul-photo-desc">相册说明内容</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-photo-info">
|
|
||||||
<div class="ul-photo-title">周末野外广场树林写真</div>
|
|
||||||
<div class="ul-photo-plus">45P+1V</div>
|
|
||||||
<div class="ul-photo-desc">相册说明内容</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>卡片式相册列表</legend>
|
<legend>卡片式相册列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-photo-card-list">
|
<div class="ul-photo-card-list">
|
||||||
|
|
||||||
<div class="ul-photo-card-item" data-repeat="7">
|
<div class="ul-photo-card-item" data-repeat="7">
|
||||||
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
|
<div class="ul-photo-card-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ul-photo-card-info">
|
||||||
|
<div class="ul-photo-card-title">周末野外广场树林写真</div>
|
||||||
|
<div class="ul-photo-card-desc">相册说明内容</div>
|
||||||
|
<div class="ul-photo-card-plus">45P+1V</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-photo-card-info">
|
|
||||||
<div class="ul-photo-card-title">周末野外广场树林写真</div>
|
|
||||||
<div class="ul-photo-card-desc">相册说明内容</div>
|
|
||||||
<div class="ul-photo-card-plus">45P+1V</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>内容丰富的留言列表</legend>
|
<legend>内容丰富的留言列表</legend>
|
||||||
<div class="layui-field-box layui-bg-gray">
|
<div class="layui-field-box layui-bg-gray">
|
||||||
<div class="ul-message-list ul-padding-md">
|
<div class="ul-message-list ul-padding-md">
|
||||||
<div class="ul-message-item ul-bg-white" data-repeat="3">
|
<div class="ul-message-item ul-bg-white" data-repeat="3">
|
||||||
<div class="ul-message-item-left">
|
<div class="ul-message-item-left">
|
||||||
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
|
<div class="ul-message-item-avatar" style="background-image: url('/static/images/avatar.png');">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-message-item-right">
|
||||||
|
<div class="ul-message-item-info">
|
||||||
|
<div class="ul-message-item-name">
|
||||||
|
<div class="data-item">
|
||||||
|
奥古斯宏
|
||||||
|
</div>
|
||||||
|
<div class="data-item">
|
||||||
|
程序员
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-message-item-data">
|
||||||
|
<div class="data-item split-border">
|
||||||
|
<span class="data-title">联系方式:</span>
|
||||||
|
<span class="data-value">13012341234</span>
|
||||||
|
</div>
|
||||||
|
<div class="data-item">
|
||||||
|
<span class="data-title">价位:</span>
|
||||||
|
<span class="data-value">￥3</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ul-message-item-options">
|
||||||
|
<div class="layui-btn">查看详情</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-message-item-content">
|
||||||
|
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
|
||||||
|
</div>
|
||||||
|
<div class="ul-message-item-img-list">
|
||||||
|
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-message-item-right">
|
|
||||||
<div class="ul-message-item-info">
|
|
||||||
<div class="ul-message-item-name">
|
|
||||||
<div class="data-item">
|
|
||||||
奥古斯宏
|
|
||||||
</div>
|
|
||||||
<div class="data-item">
|
|
||||||
程序员
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-message-item-data">
|
|
||||||
<div class="data-item split-border">
|
|
||||||
<span class="data-title">联系方式:</span>
|
|
||||||
<span class="data-value">13012341234</span>
|
|
||||||
</div>
|
|
||||||
<div class="data-item">
|
|
||||||
<span class="data-title">价位:</span>
|
|
||||||
<span class="data-value">￥3</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="ul-message-item-options">
|
|
||||||
<div class="layui-btn">查看详情</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ul-message-item-content">
|
|
||||||
百度是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。
|
|
||||||
</div>
|
|
||||||
<div class="ul-message-item-img-list">
|
|
||||||
<div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>笔记列表</legend>
|
<legend>笔记列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-padding-md">
|
<div class="ul-padding-md">
|
||||||
<div class="ul-note-list">
|
<div class="ul-note-list">
|
||||||
<div class="ul-note-item current">
|
<div class="ul-note-item current">
|
||||||
<div class="ul-note-item-icon">
|
<div class="ul-note-item-icon">
|
||||||
<i class="layui-icon layui-icon-read"></i>
|
<i class="layui-icon layui-icon-read"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-note-item-info">
|
<div class="ul-note-item-info">
|
||||||
<div class="ul-note-item-title">未命名的笔记</div>
|
<div class="ul-note-item-title">未命名的笔记</div>
|
||||||
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
|
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
|
||||||
<div class="ul-note-item-time">2021-04-11</div>
|
<div class="ul-note-item-time">2021-04-11</div>
|
||||||
<div class="ul-note-item-tree">
|
<div class="ul-note-item-tree">
|
||||||
ddd
|
ddd
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-note-item">
|
<div class="ul-note-item">
|
||||||
<div class="ul-note-item-icon">
|
<div class="ul-note-item-icon">
|
||||||
<i class="layui-icon layui-icon-read"></i>
|
<i class="layui-icon layui-icon-read"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-note-item-info">
|
<div class="ul-note-item-info">
|
||||||
<div class="ul-note-item-title">未命名的笔记</div>
|
<div class="ul-note-item-title">未命名的笔记</div>
|
||||||
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
|
<div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
|
||||||
<div class="ul-note-item-time">2021-04-11</div>
|
<div class="ul-note-item-time">2021-04-11</div>
|
||||||
<div class="ul-note-item-tree">
|
<div class="ul-note-item-tree">
|
||||||
ddd
|
ddd
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>条幅(广告)列表</legend>
|
<legend>条幅(广告)列表</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<div class="ul-ad-list">
|
<div class="ul-ad-list">
|
||||||
<div class="ul-ad-item" data-repeat="3">
|
<div class="ul-ad-item" data-repeat="3">
|
||||||
<div class="ul-ad-left">
|
<div class="ul-ad-left">
|
||||||
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
|
<div class="ul-ad-img" style="background-image: url('/static/images/view.jpg');"></div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-ad-right">
|
||||||
|
<div class="ul-ad-title">福牛迎春</div>
|
||||||
|
<div class="ul-ad-desc">天天送大礼</div>
|
||||||
|
<div class="ul-ad-options">
|
||||||
|
<div class="layui-btn">查看详情</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-ad-right">
|
|
||||||
<div class="ul-ad-title">福牛迎春</div>
|
|
||||||
<div class="ul-ad-desc">天天送大礼</div>
|
|
||||||
<div class="ul-ad-options">
|
|
||||||
<div class="layui-btn">查看详情</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>课程列表</legend>
|
<legend>课程列表</legend>
|
||||||
<div class="layui-field-box ">
|
<div class="layui-field-box ">
|
||||||
<div class="ul-bg-gray ul-padding-md">
|
<div class="ul-bg-gray ul-padding-md">
|
||||||
<div class="ul-course-list">
|
<div class="ul-course-list">
|
||||||
<a class="ul-course-item" data-repeat="10">
|
<a class="ul-course-item" data-repeat="10">
|
||||||
<div class="ul-course-item-poster-container">
|
<div class="ul-course-item-poster-container">
|
||||||
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
|
<div class="ul-course-item-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
<div class="layui-btn layui-btn-xs ul-course-item-tag">
|
<div class="layui-btn layui-btn-xs ul-course-item-tag">
|
||||||
免费
|
免费
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-item-info">
|
||||||
|
<div class="ul-course-item-title">
|
||||||
|
PHP8最新特性介绍和演示
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-item-options">
|
||||||
|
<div class="ul-course-item-option-item ul-color-main">
|
||||||
|
免费
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-item-option-item">
|
||||||
|
初级
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-item-option-item">
|
||||||
|
3节课
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-item-option-item">
|
||||||
|
1人报名
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-course-item-info">
|
|
||||||
<div class="ul-course-item-title">
|
|
||||||
PHP8最新特性介绍和演示
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-item-options">
|
|
||||||
<div class="ul-course-item-option-item ul-color-main">
|
|
||||||
免费
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-item-option-item">
|
|
||||||
初级
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-item-option-item">
|
|
||||||
3节课
|
|
||||||
</div>
|
|
||||||
<div class="ul-course-item-option-item">
|
|
||||||
1人报名
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="layui-elem-field layui-field-title">
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
<legend>课程侧边列表</legend>
|
<legend>课程侧边列表</legend>
|
||||||
<div class="layui-field-box ">
|
<div class="layui-field-box ">
|
||||||
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
|
<div class="ul-bg-gray ul-padding-md" style="width: 300px;">
|
||||||
<div class="ul-course-sidebar-list" >
|
<div class="ul-course-sidebar-list">
|
||||||
<a class="ul-course-sidebar-item" data-repeat="4">
|
<a class="ul-course-sidebar-item" data-repeat="4">
|
||||||
<div class="ul-course-sidebar-item-poster-container">
|
<div class="ul-course-sidebar-item-poster-container">
|
||||||
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
|
<div class="ul-course-sidebar-item-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-info">
|
||||||
|
<div class="ul-course-sidebar-item-title">
|
||||||
|
PHP8最新特性介绍和演示
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-options">
|
||||||
|
<div class="ul-course-sidebar-item-option-item ul-color-main">
|
||||||
|
免费
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-option-item">
|
||||||
|
初级
|
||||||
|
</div>
|
||||||
|
<div class="ul-course-sidebar-item-option-item">
|
||||||
|
3节课
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ul-course-sidebar-item-info">
|
</div>
|
||||||
<div class="ul-course-sidebar-item-title">
|
</fieldset>
|
||||||
PHP8最新特性介绍和演示
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
</div>
|
<legend>图书列表</legend>
|
||||||
<div class="ul-course-sidebar-item-options">
|
<div class="layui-field-box">
|
||||||
<div class="ul-course-sidebar-item-option-item ul-color-main">
|
<div class="layui-word-aux">一般大小</div>
|
||||||
免费
|
<div class="ul-padding-md">
|
||||||
</div>
|
<div class="ul-book-list">
|
||||||
<div class="ul-course-sidebar-item-option-item">
|
<div class="ul-book-item" data-repeat="6">
|
||||||
初级
|
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
</div>
|
|
||||||
<div class="ul-course-sidebar-item-option-item">
|
</div>
|
||||||
3节课
|
<div class="ul-book-info">
|
||||||
</div>
|
<div class="ul-book-title">三体</div>
|
||||||
</div>
|
<div class="ul-book-author">刘慈欣</div>
|
||||||
</div>
|
<div class="ul-book-status">阅读次数333</div>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-word-aux">加大</div>
|
||||||
|
<div class="ul-padding-md">
|
||||||
|
<div class="ul-book-list big">
|
||||||
|
<div class="ul-book-item" data-repeat="6">
|
||||||
|
<div class="ul-book-poster" style="background-image: url('/static/images/view.jpg');">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="ul-book-info">
|
||||||
|
<div class="ul-book-title">三体</div>
|
||||||
|
<div class="ul-book-author">刘慈欣</div>
|
||||||
|
<div class="ul-book-status"><span>阅读</span><span>3333</span></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
@@ -1,280 +1,283 @@
|
|||||||
function renderUlTree(options) {
|
function renderUlTree(options) {
|
||||||
var defaults = {
|
|
||||||
$: window.$,
|
|
||||||
elem: '',
|
|
||||||
onItemClick: function () {
|
|
||||||
console.log('点击目录项');
|
|
||||||
},
|
|
||||||
onItemToggle: function () {
|
|
||||||
console.log('点击收缩目录');
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
type: 'up',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'down',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'set',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'delete',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
onOptionTrigger: function (type, item, e) {
|
|
||||||
switch (type) {
|
|
||||||
case 'up':
|
|
||||||
tthis.itemMoveUp(item)
|
|
||||||
break;
|
|
||||||
case 'down':
|
|
||||||
tthis.itemMoveDown(item)
|
|
||||||
break;
|
|
||||||
case 'delete':
|
|
||||||
tthis.itemDelete($(item).data('id'))
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
list: []
|
|
||||||
}
|
|
||||||
var tthis = this;
|
|
||||||
var settings = {};
|
|
||||||
settings = $.extend({}, defaults, options);
|
|
||||||
|
|
||||||
$ = settings.$;
|
|
||||||
|
|
||||||
var thisDom = $(settings.elem);
|
|
||||||
|
|
||||||
this.appendItem = function (data) {
|
|
||||||
|
|
||||||
var defaults = {
|
var defaults = {
|
||||||
id: 0,
|
$: window.$,
|
||||||
pid: 0,
|
elem: '',
|
||||||
title: 0,
|
onItemClick: function () {
|
||||||
options: settings.options
|
console.log('点击目录项');
|
||||||
|
},
|
||||||
|
onItemToggle: function () {
|
||||||
|
console.log('点击收缩目录');
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
type: 'up',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'down',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'set',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'delete',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
onOptionTrigger: function (type, item, e) {
|
||||||
|
switch (type) {
|
||||||
|
case 'up':
|
||||||
|
tthis.itemMoveUp(item)
|
||||||
|
break;
|
||||||
|
case 'down':
|
||||||
|
tthis.itemMoveDown(item)
|
||||||
|
break;
|
||||||
|
case 'delete':
|
||||||
|
tthis.itemDelete($(item).data('id'))
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
list: []
|
||||||
|
}
|
||||||
|
var tthis = this;
|
||||||
|
var settings = {};
|
||||||
|
settings = $.extend({}, defaults, options);
|
||||||
|
|
||||||
|
$ = settings.$;
|
||||||
|
|
||||||
|
var thisDom = $(settings.elem);
|
||||||
|
|
||||||
|
this.appendItem = function (data) {
|
||||||
|
|
||||||
|
var defaults = {
|
||||||
|
id: 0,
|
||||||
|
pid: 0,
|
||||||
|
title: 0,
|
||||||
|
options: settings.options
|
||||||
|
};
|
||||||
|
|
||||||
|
var itemSetting = $.extend({}, defaults, data);
|
||||||
|
|
||||||
|
settings.list.push(itemSetting);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initList = function () {
|
||||||
|
var list = settings.list;
|
||||||
|
|
||||||
|
for (let initTimes = 0; initTimes < list.length; initTimes++) {
|
||||||
|
list.forEach(item => {
|
||||||
|
var itemFindKey = '.ul-tree-item.item-id-' + item.id;
|
||||||
|
|
||||||
|
if (thisDom.find(itemFindKey).length > 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
|
||||||
|
|
||||||
|
var itemHtml = this.getItemTpl();
|
||||||
|
|
||||||
|
if (item.pid == 0) {
|
||||||
|
|
||||||
|
var itemDom = $(itemHtml).appendTo(settings.elem);
|
||||||
|
} else {
|
||||||
|
var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initItem(itemDom, item)
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var itemSetting = $.extend({}, defaults, data);
|
this.initItem = function (itemDom, item) {
|
||||||
|
itemDom.data(item)
|
||||||
|
|
||||||
settings.list.push(itemSetting);
|
itemDom.addClass('item-id-' + item.id)
|
||||||
|
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
|
||||||
|
|
||||||
}
|
if (item.current == 1) {
|
||||||
|
itemDom.children('.ul-tree-item-info').addClass('current')
|
||||||
this.initList = function () {
|
|
||||||
var list = settings.list;
|
|
||||||
|
|
||||||
for (let initTimes = 0; initTimes < list.length; initTimes++) {
|
|
||||||
list.forEach(item => {
|
|
||||||
var itemFindKey = '.ul-tree-item.item-id-' + item.id;
|
|
||||||
|
|
||||||
if (thisDom.find(itemFindKey).length > 0) {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var itemParentFindKey = '.ul-tree-item.item-id-' + item.pid;
|
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
|
||||||
|
|
||||||
var itemHtml = this.getItemTpl();
|
item.options.forEach(option => {
|
||||||
|
|
||||||
if (item.pid == 0) {
|
if (typeof option.type == "undefined") {
|
||||||
|
option.type = 'set';
|
||||||
|
}
|
||||||
|
|
||||||
var itemDom = $(itemHtml).appendTo(settings.elem);
|
if (typeof option.className == 'undefined') {
|
||||||
|
option.className = 'layui-icon layui-icon-' + option.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof option.html == 'undefined') {
|
||||||
|
option.html = '<i class="' + option.className + '"></i>'
|
||||||
|
}
|
||||||
|
var domOption = $(option.html);
|
||||||
|
|
||||||
|
domOption.addClass('ul-tree-item-options-item');
|
||||||
|
domOption.data(option)
|
||||||
|
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.renderList = function () {
|
||||||
|
this.initList()
|
||||||
|
thisDom.find('.ul-tree-item').each(function (index, elem) {
|
||||||
|
|
||||||
|
tthis.renderItem(elem)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.renderItem = function (itemTree) {
|
||||||
|
|
||||||
|
if ($(itemTree).data('is-rendered') == 1) {
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
$(itemTree).data('is-rendered', 1)
|
||||||
|
|
||||||
|
var parents = $(itemTree).parents('.ul-tree-item')
|
||||||
|
|
||||||
|
var level = parents.length
|
||||||
|
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
|
||||||
|
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
|
||||||
|
|
||||||
|
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
|
||||||
|
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
|
||||||
} else {
|
} else {
|
||||||
var itemDom = $(itemHtml).appendTo($(itemParentFindKey).children('.ul-tree-item-children'))
|
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.initItem(itemDom, item)
|
$(itemTree).children('.ul-tree-item-info').click(function (e) {
|
||||||
|
|
||||||
});
|
if ($(e.target).hasClass('ul-tree-item-icon')) {
|
||||||
}
|
var iconItem = e.target
|
||||||
|
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
|
||||||
|
// 收缩
|
||||||
|
$(iconItem).removeClass('layui-icon-triangle-d')
|
||||||
|
$(iconItem).addClass('layui-icon-triangle-r')
|
||||||
|
|
||||||
};
|
$(itemTree).children('.ul-tree-item-children').hide()
|
||||||
|
} else {
|
||||||
|
// 展开
|
||||||
|
$(iconItem).addClass('layui-icon-triangle-d')
|
||||||
|
$(iconItem).removeClass('layui-icon-triangle-r')
|
||||||
|
|
||||||
this.initItem = function (itemDom, item) {
|
$(itemTree).children('.ul-tree-item-children').show()
|
||||||
itemDom.data(item)
|
}
|
||||||
|
|
||||||
itemDom.addClass('item-id-' + item.id)
|
settings.onItemToggle(itemTree, e)
|
||||||
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-title').text(item.title)
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
if ($(e.target).closest('.ul-tree-item-options').length > 0) {
|
||||||
|
|
||||||
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').children().remove()
|
settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
|
||||||
|
} else {
|
||||||
|
settings.onItemClick(itemTree, e)
|
||||||
|
|
||||||
item.options.forEach(option => {
|
}
|
||||||
|
|
||||||
if (typeof option.type == "undefined") {
|
}
|
||||||
option.type = 'set';
|
})
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof option.className == 'undefined') {
|
|
||||||
option.className = 'layui-icon layui-icon-' + option.type;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof option.html == 'undefined') {
|
|
||||||
option.html = '<i class="' + option.className + '"></i>'
|
|
||||||
}
|
|
||||||
var domOption = $(option.html);
|
|
||||||
|
|
||||||
domOption.addClass('ul-tree-item-options-item');
|
|
||||||
domOption.data(option)
|
|
||||||
itemDom.children('.ul-tree-item-info').find('.ul-tree-item-options').append(domOption);
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.renderList = function () {
|
|
||||||
this.initList()
|
|
||||||
thisDom.find('.ul-tree-item').each(function (index, elem) {
|
|
||||||
|
|
||||||
tthis.renderItem(elem)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.renderItem = function (itemTree) {
|
|
||||||
|
|
||||||
if ($(itemTree).data('is-rendered') == 1) {
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
$(itemTree).data('is-rendered', 1)
|
|
||||||
|
|
||||||
var parents = $(itemTree).parents('.ul-tree-item')
|
|
||||||
|
|
||||||
var level = parents.length
|
|
||||||
$(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
|
|
||||||
$(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')
|
|
||||||
|
|
||||||
if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
|
|
||||||
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').hide()
|
|
||||||
} else {
|
|
||||||
$(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').show()
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(itemTree).children('.ul-tree-item-info').click(function (e) {
|
this.itemMoveUp = function (item) {
|
||||||
|
$(item).prev().insertAfter(item);
|
||||||
|
}
|
||||||
|
this.itemMoveDown = function (item) {
|
||||||
|
$(item).next().insertBefore(item);
|
||||||
|
}
|
||||||
|
this.itemDelete = function (id) {
|
||||||
|
var itemFindKey = '.ul-tree-item.item-id-' + id;
|
||||||
|
$(itemFindKey).remove();
|
||||||
|
|
||||||
if ($(e.target).hasClass('ul-tree-item-icon')) {
|
var list = settings.list;
|
||||||
var iconItem = e.target
|
|
||||||
if ($(iconItem).hasClass('layui-icon-triangle-d')) {
|
|
||||||
// 收缩
|
|
||||||
$(iconItem).removeClass('layui-icon-triangle-d')
|
|
||||||
$(iconItem).addClass('layui-icon-triangle-r')
|
|
||||||
|
|
||||||
$(itemTree).children('.ul-tree-item-children').hide()
|
var newList = [];
|
||||||
} else {
|
|
||||||
// 展开
|
|
||||||
$(iconItem).addClass('layui-icon-triangle-d')
|
|
||||||
$(iconItem).removeClass('layui-icon-triangle-r')
|
|
||||||
|
|
||||||
$(itemTree).children('.ul-tree-item-children').show()
|
list.forEach(data => {
|
||||||
}
|
if (data.id == id || data.pid == id) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
newList.push(data)
|
||||||
|
});
|
||||||
|
settings.list = newList;
|
||||||
|
}
|
||||||
|
|
||||||
settings.onItemToggle(itemTree, e)
|
this.itemUpdate = function (newData) {
|
||||||
|
|
||||||
} else {
|
var list = settings.list;
|
||||||
if ($(e.target).closest('.ul-tree-item-options').length > 0) {
|
|
||||||
|
|
||||||
settings.onOptionTrigger($(e.target).data('type'), itemTree, e)
|
var newList = [];
|
||||||
} else {
|
|
||||||
settings.onItemClick(itemTree, e)
|
|
||||||
|
|
||||||
}
|
list.forEach(data => {
|
||||||
|
if (data.id == newData.id) {
|
||||||
|
data = $.extend({}, data, newData);
|
||||||
|
|
||||||
}
|
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
|
||||||
})
|
var item = $(itemFindKey);
|
||||||
|
tthis.initItem(item, data)
|
||||||
|
}
|
||||||
|
newList.push(data)
|
||||||
|
});
|
||||||
|
settings.list = newList;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getList = function () {
|
||||||
|
var list = settings.list;
|
||||||
|
|
||||||
}
|
list.forEach((data) => {
|
||||||
|
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
|
||||||
|
var item = $(itemFindKey);
|
||||||
|
data.index = item.index();
|
||||||
|
});
|
||||||
|
|
||||||
this.itemMoveUp = function (item) {
|
return list;
|
||||||
$(item).prev().insertAfter(item);
|
}
|
||||||
}
|
|
||||||
this.itemMoveDown = function (item) {
|
|
||||||
$(item).next().insertBefore(item);
|
|
||||||
}
|
|
||||||
this.itemDelete = function (id) {
|
|
||||||
var itemFindKey = '.ul-tree-item.item-id-' + id;
|
|
||||||
$(itemFindKey).remove();
|
|
||||||
|
|
||||||
var list = settings.list;
|
function itemTpl() {
|
||||||
|
/*
|
||||||
|
<div class="ul-tree-item">
|
||||||
|
<div class="ul-tree-item-info">
|
||||||
|
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
||||||
|
<span class="ul-tree-item-title">读书笔记</span>
|
||||||
|
<span class="ul-tree-item-options">
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="ul-tree-item-children">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
|
||||||
var newList = [];
|
this.getItemTpl = function () {
|
||||||
|
var string = itemTpl.toString();
|
||||||
|
|
||||||
list.forEach(data => {
|
return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
|
||||||
if (data.id == id || data.pid == id) {
|
}
|
||||||
return true;
|
|
||||||
}
|
|
||||||
newList.push(data)
|
|
||||||
});
|
|
||||||
settings.list = list;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.itemUpdate = function (newData) {
|
if (typeof options.list != 'undefined') {
|
||||||
|
resetList(options.list);
|
||||||
|
}
|
||||||
|
|
||||||
var list = settings.list;
|
function resetList(list) {
|
||||||
|
settings.list = [];
|
||||||
|
|
||||||
var newList = [];
|
list.forEach(data => {
|
||||||
|
tthis.appendItem(data)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
list.forEach(data => {
|
this.renderList()
|
||||||
if (data.id == newData.id) {
|
|
||||||
data = $.extend({}, data, newData);
|
|
||||||
|
|
||||||
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
|
|
||||||
var item = $(itemFindKey);
|
|
||||||
tthis.initItem(item, data)
|
|
||||||
}
|
|
||||||
newList.push(data)
|
|
||||||
});
|
|
||||||
settings.list = list;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.getList = function () {
|
|
||||||
var list = settings.list;
|
|
||||||
|
|
||||||
list.forEach((data) => {
|
|
||||||
var itemFindKey = '.ul-tree-item.item-id-' + data.id;
|
|
||||||
var item = $(itemFindKey);
|
|
||||||
data.index = item.index();
|
|
||||||
});
|
|
||||||
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
function itemTpl() {
|
|
||||||
/*
|
|
||||||
<div class="ul-tree-item">
|
|
||||||
<div class="ul-tree-item-info">
|
|
||||||
<i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
|
|
||||||
<span class="ul-tree-item-title">读书笔记</span>
|
|
||||||
<span class="ul-tree-item-options">
|
|
||||||
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="ul-tree-item-children">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
this.getItemTpl = function () {
|
|
||||||
var string = itemTpl.toString();
|
|
||||||
|
|
||||||
return string.substring(string.indexOf("/*") + 3, string.lastIndexOf("*/"));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof options.list != 'undefined') {
|
|
||||||
resetList(options.list);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetList(list) {
|
|
||||||
settings.list = [];
|
|
||||||
|
|
||||||
list.forEach(data => {
|
|
||||||
tthis.appendItem(data)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.renderList()
|
|
||||||
|
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user