layui transfer穿梭框左右多选效果代码
代码语言:html
所属分类:表单美化
代码描述:layui transfer穿梭框左右多选效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css"> <style> .demo-transfer { margin: 10px 30px; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script> </head> <body> <div class="layui-tab-item layui-show"> <div class="layui-main"> <div id="LAY_preview"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>基础效果</legend> </fieldset> <div id="test1" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>定义标题及数据源</legend> </fieldset> <div id="test2" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>初始右侧数据集合</legend> </fieldset> <div id="test3" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>显示搜索框</legend> </fieldset> <div id="test4" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>数据格式解析</legend> </fieldset> <div id="test5" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>穿梭时的回调</legend> </fieldset> <div id="test6" class="demo-transfer"></div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>实例调用</legend> </fieldset> <div class="layui-btn-container"> <button type="button" class="layui-btn" lay-demoTransferActive="getData">获取右侧数据</button> <button type="button" class="layui-btn" lay-demoTransferActive="reload">重载实例</button> </div> <div id="test7" class="demo-transfer"></div> </div> </div> </div> <div id="LAY_democodejs"> <script> layui.use(['transfer', 'layer', 'util'], function() { var $ = layui.$, transfer = layui.transfer, layer = layui.layer, util = layui.util; //模拟数据 var data1 = [{ "value": "1", "title": "李白" }, { "value": "2", "title": "杜甫" }, { "value": "3", "title": "苏轼" }, { "value": "4", "title": "李清照" }, { "value": "5", "title": "鲁迅", "disabled": true }, { "value": "6", "title": "巴金" }, { "value": "7", "title": "冰心" }, { "value": "8", "title": "矛盾" }, { "value": "9", "title": "贤心" }], data2 = [{ "value": "1", "title": "瓦罐汤" }, { "value": "2", "title": "油酥饼" }, { "value": "3", "title&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0