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>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0