lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-10-27 03:09:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add docs

Browse Source
This commit is contained in:
贤心
2023-04-24 08:42:47 +08:00
parent 0172797f79
commit 5a386e3124
154 changed files with 23579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/dropdown/examples/align.md Normal file
View File

@@ -0,0 +1,37 @@
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{}">
左对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'center'}">
居中对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-align" lay-options="{align: 'right'}">
右对齐
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 水平对齐方式
dropdown.render({
elem: '.demo-dropdown-align',
// align: 'center' // align 已配置在元素 `lay-options` 属性上
data: [{
title: 'menu item test 111',
id: 100
},{
title: 'menu item test 222',
id: 101
},{
title: 'menu item test 333',
id: 102
}]
});
});
</script>

120
docs/dropdown/examples/base.md Normal file
View File

@@ -0,0 +1,120 @@
<div class="layui-btn-container">
<button class="layui-btn demo-dropdown-base">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-base">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
<div class="layui-inline" style="width: 235px;">
<input name="" placeholder="在输入框提供一些常用的选项" class="layui-input" id="ID-dropdown-demo-base-input">
</div>
<div class="layui-inline layui-word-aux layui-font-gray">
可以绑定任意元素，
<a href="javascript:;" class="layui-font-blue" id="ID-dropdown-demo-base-text">
比如这段文字
<i class="layui-icon layui-font-12 layui-icon-down"></i>
</a>
</div>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}],
click: function(obj){
this.elem.find('span').text(obj.title);
}
});
// 绑定输入框
dropdown.render({
elem: '#ID-dropdown-demo-base-input',
data: [{
title: 'menu item 1',
id: 101
},{
title: 'menu item 2',
id: 102
},{
title: 'menu item 3',
id: 103
},{
title: 'menu item 4',
id: 104
},{
title: 'menu item 5',
id: 105
},{
title: 'menu item 6',
id: 106
}],
click: function(obj){
this.elem.val(obj.title);
},
style: 'min-width: 235px;'
});
// 绑定文字
dropdown.render({
elem: '#ID-dropdown-demo-base-text',
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101,
child: [{ // 横向子菜单
title: 'menu item 2-1',
id: 1011
},{
title: 'menu item 2-2',
id: 1012
}]
},{
title: 'menu item 3',
id: 102
},{
type: '-' // 分割线
},{
title: 'menu group',
id: 103,
type: 'group', // 纵向菜单组
child: [{
title: 'menu item 4-1',
id: 1031
},{
title: 'menu item 4-2',
id: 1032
}]
},{
type: '-' // 分割线
},{
title: 'menu item 5',
id: 104
},{
title: 'menu item 5',
id: 104
}],
click: function(obj){
this.elem.val(obj.title);
}
});
});
</script>

128
docs/dropdown/examples/complex.md Normal file
View File

@@ -0,0 +1,128 @@
<button class="layui-btn" id="ID-dropdown-demo-complex">
无限层级 + 跳转 + 事件 + 自定义模板
</button>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var util = layui.util;
// 高级演示 - 复杂结构
dropdown.render({
elem: '#ID-dropdown-demo-complex',
data: [{
title: 'menu item 1',
templet: '{{!<i class="layui-icon layui-icon-picture"></i> {{= d.title }} <span class="layui-badge-dot"></span>!}}',
id: 100,
href: '#'
},{
title: 'menu item 2',
templet: '{{!<img src="https://unpkg.com/outeres@0.0.11/demo/avatar/0.png" style="width: 16px;"> {{= d.title }} !}}',
id: 101,
href: '/',
target: '_blank'
},
{type: '-'}, // 分割线
{
title: 'menu item 3',
id: 102,
type: 'group',
child: [{
title: 'menu item 3-1',
id: 103
},{
title: 'menu item 3-2',
id: 104,
child: [{
title: 'menu item 3-2-1',
id: 105
},{
title: 'menu item 3-2-2',
id: 11,
type: 'group',
child: [{
title: 'menu item 3-2-2-1',
id: 111
},{
title: 'menu item 3-2-2-2',
id: 1111
}]
},{
title: 'menu item 3-2-3',
id: 11111
}]
},{
title: 'menu item 3-3',
id: 111111,
type: 'group',
child: [{
title: 'menu item 3-3-1',
id: 22
},{
title: 'menu item 3-3-2',
id: 222,
child: [{
title: 'menu item 3-3-2-1',
id: 2222
},{
title: 'menu item 3-3-2-2',
id: 22222
},{
title: 'menu item 3-3-2-3',
id: 2222222
}]
},{
title: 'menu item 3-3-3',
id: 333
}]
}]
},
{type: '-'},
{
title: 'menu item 4',
id: 4
},{
title: 'menu item 5',
id: 5,
child: [{
title: 'menu item 5-1',
id: 55,
child: [{
title: 'menu item 5-1-1',
id: 5555
},{
title: 'menu item 5-1-2',
id: 55555
},{
title: 'menu item 5-1-3',
id: 555555
}]
},{
title: 'menu item 5-2',
id: 52
},{
title: 'menu item 5-3',
id: 53
}]
},{type:'-'},{
title: 'menu item 6',
id: 66,
type: 'group',
isSpreadItem: false,
child: [{
title: 'menu item 6-1',
id: 777
},{
title: 'menu item 6-2',
id: 7777
},{
title: 'menu item 6-3',
id: 77777
}]
}],
click: function(item){
layer.msg(util.escape(JSON.stringify(item)));
}
});
});
</script>

39
docs/dropdown/examples/content.md Normal file
View File

@@ -0,0 +1,39 @@
<button class="layui-btn" id="ID-dropdown-demo-content">
自定义内容
<i class="layui-icon layui-icon-list layui-font-14"></i>
</button>
<style>
.demo-dropdown-tabs{padding: 0 16px;}
</style>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 自定义内容
dropdown.render({
elem: '#ID-dropdown-demo-content',
content: ['<div class="layui-tab layui-tab-brief">',
'<ul class="layui-tab-title">',
'<li class="layui-this">Tab header 1</li>',
'<li>Tab header 2</li>',
'<li>Tab header 3</li>',
'</ul>',
'<div class="layui-tab-content">',
'<div class="layui-tab-item layui-text layui-show"><p style="padding-bottom: 10px;">在 content 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更多有趣的弹出内容。</p><p> 是否发现，dropdown 组件不仅仅只是一个下拉菜单或者右键菜单，它能被赋予许多的想象可能。</p></div>',
'<div class="layui-tab-item">Tab body 2</div>',
'<div class="layui-tab-item">Tab body 3</div>',
'</div>',
'</div>'].join(''),
className: 'demo-dropdown-tabs',
style: 'width: 370px; height: 200px; box-shadow: 1px 1px 30px rgb(0 0 0 / 12%);',
// shade: 0.3, // 弹出时开启遮罩 --- 2.8+
ready: function(){
layui.use('element', function(element){
element.render('tab');
});
}
});
});
</script>

88
docs/dropdown/examples/contextmenu.md Normal file
View File

@@ -0,0 +1,88 @@
<div class="layui-bg-gray" style="height: 260px; text-align: center;" id="ID-dropdown-demo-contextmenu">
<span class="layui-font-gray" style="position: relative; top:50%;">在此区域单击鼠标右键</span>
</div>
<button class="layui-btn" style="margin-top: 15px;" lay-on="contextmenu">
开启全局右键菜单
</button>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var util = layui.util;
// 右键菜单
dropdown.render({
elem: '#ID-dropdown-demo-contextmenu', // 也可绑定到 document，从而重置整个右键
trigger: 'contextmenu', // contextmenu
isAllowSpread: false, // 禁止菜单组展开收缩
style: 'width: 200px', // 定义宽度，默认自适应
data: [{
title: 'menu item 1',
id: 'test'
}, {
title: 'Printing',
id: 'print'
},{
title: 'Reload',
id: 'reload'
},{type:'-'},{
title: 'menu item 3',
id: '#3',
child: [{
title: 'menu item 3-1',
id: '#1'
},{
title: 'menu item 3-2',
id: '#2'
},{
title: 'menu item 3-3',
id: '#3'
}]
},
{type: '-'},
{
title: 'menu item 4',
id: ''
},{
title: 'menu item 5',
id: '#1'
},{
title: 'menu item 6',
id: '#1'
}],
click: function(obj, othis){
if(obj.id === 'test'){
layer.msg('click');
} else if(obj.id === 'print'){
window.print();
} else if(obj.id === 'reload'){
location.reload();
}
}
});
// 其他操作
util.event('lay-on', {
// 全局右键菜单
contextmenu: function(othis){
var ID = 'ID-dropdown-demo-contextmenu';
if(!othis.data('open')){
dropdown.reload(ID, {
elem: document // 将事件直接绑定到 document
});
layer.msg('已开启全局右键菜单，请尝试在页面任意处单击右键。')
othis.html('取消全局右键菜单');
othis.data('open', true);
} else {
dropdown.reload(ID, {
elem: '#'+ ID // 重新绑定到指定元素上
});
layer.msg('已取消全局右键菜单，恢复默认右键菜单')
othis.html('开启全局右键菜单');
othis.data('open', false);
}
}
});
});
</script>

37
docs/dropdown/examples/on.md Normal file
View File

@@ -0,0 +1,37 @@
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'hover'}">
hover
<i class="layui-icon layui-icon-more-vertical layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'mousedown'}">
mousedown
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button class="layui-btn layui-btn-primary demo-dropdown-on" lay-options="{trigger: 'dblclick'}">
dblclick - 双击
<i class="layui-icon layui-icon-circle layui-font-12"></i>
</button>
</div>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 自定义事件
dropdown.render({
elem: '.demo-dropdown-on',
// trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
data: [{
title: 'menu item 1',
id: 100
},{
title: 'menu item 2',
id: 101
},{
title: 'menu item 3',
id: 102
}]
});
});
</script>

39
docs/dropdown/examples/reload.md Normal file
View File

@@ -0,0 +1,39 @@
<button class="layui-btn" id="ID-dropdown-demo-reload">
<span>下拉菜单</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '#ID-dropdown-demo-reload',
data: [{
title: 'menu item 1',
id: 100
}, {
title: '重载该面板',
id: 101
}],
click: function(data){
if(data.id === 101){ // 菜单项对应设置的 id 值
// 重载方法
dropdown.reload('ID-dropdown-demo-reload', {
data: [{ // 重新赋值 data
title: '新选项 1',
id: 111
}, {
title: '新选项 2',
id: 222
}],
show: true // 重载即显示组件面板
});
return false; // 点击该选项，阻止面板关闭
}
}
});
});
</script>

57
docs/dropdown/examples/reloadData.md Normal file
View File

@@ -0,0 +1,57 @@
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">输入时重载</label>
<div class="layui-input-inline">
<input type="text" autocomplete="off" placeholder="输入关键字" class="layui-input" id="ID-dropdown-demo-reloadData">
</div>
</div>
</div>
<script>
layui.use(function(){
var dropdown = layui.dropdown;
var $ = layui.$;
// 渲染
var inst = dropdown.render({
elem: '#ID-dropdown-demo-reloadData',
data: [
{ id: 1, title: "Python" },
{ id: 2, title: "JavaScript" },
{ id: 3, title: "Java" },
{ id: 4, title: "C++" },
{ id: 5, title: "PHP" },
{ id: 6, title: "Ruby" },
{ id: 7, title: "Swift" },
{ id: 8, title: "TypeScript" },
{ id: 9, title: "Kotlin" },
{ id: 10, title: "Go" }
],
style: 'min-width: 190px; box-shadow: 1px 1px 11px rgb(0 0 0 / 11%);',
click: function(data){
this.elem.val(data.title);
}
});
// 输入框输入事件
$(inst.config.elem).on('input propertychange', function(){
var elem = $(this);
var value = elem.val().trim();
// 匹配到对应内容时，重载数据
var dataNew = inst.config.data.filter(function(item){
var exp = new RegExp(value.split('').join('|'), 'i');
return exp.test(item.title);
});
dropdown.reloadData(inst.config.id, {
data: dataNew, // 匹配到的新数据
templet: function(d){
var exp = new RegExp(value.split('').join('|'), 'gi');
return d.title.replace(exp, function (str) {
return '<span style="color: red;">' + str + '</span>'
});
}
});
});
});
</script>

76
docs/dropdown/examples/table.md Normal file
View File

@@ -0,0 +1,76 @@
<table class="layui-hide" id="ID-dropdown-demo-table"></table>
<script type="text/html" id="ID-dropdown-demo-table-tool">
<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<script>
layui.use(function(){
var table = layui.table;
var dropdown = layui.dropdown;
// dropdown 在表格中的应用
table.render({
elem: '#ID-dropdown-demo-table',
url: '{{d.root}}/static/json/table/demo5.json',
title: '用户数据表',
cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true},
{field:'username', title:'用户名', width:120, edit: 'text'},
{field:'email', title:'邮箱', minWidth:150},
{fixed: 'right', title:'操作', toolbar: '#ID-dropdown-demo-table-tool', width:150}
]],
limits: [3],
page: true
});
// 行工具事件
table.on('tool(ID-dropdown-demo-table)', function(obj){
var that = this;
var data = obj.data;
if(obj.event === 'edit'){
layer.prompt({
formType: 2,
value: data.email
}, function(value, index){
obj.update({
email: value
});
layer.close(index);
});
} else if(obj.event === 'more'){
// 更多下拉菜单
dropdown.render({
elem: that,
show: true, // 外部事件触发即显示
data: [{
title: 'item 1',
id: 'aaa'
}, {
title: 'item 2',
id: 'bbb'
}, {
title: '删除',
id: 'del'
}],
click: function(data, othis){
//根据 id 做出不同操作
if(data.id === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else {
layer.msg('得到表格下拉菜单 id：'+ data.id);
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
})
}
});
});
</script>