LayUI-07-摩杜云开发者社区

4.5 穿梭框transfer

4.5.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>穿梭框组件</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
  <div id="test1"></div>
  <script src="../src/layui.js"></script>
  <script>
  layui.use('transfer', function(){
    var transfer = layui.transfer;
   
    //渲染
    transfer.render({
      elem: '#test1'  //绑定元素
      ,data: [
        {"value": "1", "title": "李白", "disabled": "", "checked": ""}
        ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
        ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
      ]
      ,id: 'demo1' //定义索引
    });
  });
  </script>
</body>
</html>

4.5.2 基础参数

参数选项	说明	类型	默认值
elem	指向容器选择器	String/Object	-
title	穿梭框上方标题	Array	['标题一', '标题二']
data	数据源	Array	[{}, {}, …]
parseData	用于对数据源进行格式解析	Function	详见数据源格式解析
value	初始选中的数据（右侧列表）	Array	-
id	设定实例唯一索引，用于基础方法传参使用。	String	-
showSearch	是否开启搜索	Boolean	false
width	定义左右穿梭框宽度	Number	200
height	定义左右穿梭框高度	Number	340
text	自定义文本，如空数据时的异常提示等。<br>text: { none: '无数据' //没有数据时的文案 ,searchNone: '无匹配数据' //搜索无匹配数据时的文案} `	Object	-
onchange	左右数据穿梭时的回调	Function	详见穿梭时的回调

4.5.3 数据源格式解析

数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式

[
  {"value": "1", "title": "李白", "disabled": "", "checked": ""}
  ,{"value": "2", "title": "杜甫", "disabled": "", "checked": ""}
  ,{"value": "3", "title": "贤心", "disabled": "", "checked": ""}
]

不符合规范的数据格式

[
  {"id": "1", "name": "李白"}
  ,{"id": "2", "name": "杜甫"}
  ,{"id": "3", "name": "贤心"}
]

需要将其解析成 transfer 组件所规定的数据格式：

transfer.render({
  elem: '#text1'
  ,data: [
    {"id": "1", "name": "李白"}
    ,{"id": "2", "name": "杜甫"}
    ,{"id": "3", "name": "贤心"}
  ]
  ,parseData: function(res){
    return {
      "value": res.id //数据值
      ,"title": res.name //数据标题
      ,"disabled": res.disabled  //是否禁用
      ,"checked": res.checked //是否选中
    }
  }
});

4.5.4 获得右侧数据

穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台

transfer.render({
  elem: '#test'
  ,data: []
  ,id: 'demo1' //定义索引
});
 
//获得右侧数据
var getData = transfer.getData('demo1');

4.6 轮播图carousel

carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

4.6.1 快速使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>条目1</div>
    <div>条目2</div>
    <div>条目3</div>
    <div>条目4</div>
    <div>条目5</div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>

在HTML结构中，只需要简单地注意这两项： 1) 外层元素的 class="layui-carousel" 用来标识为一个轮播容器 2) 内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

4.6.2 基础参数

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

可选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	无
width	设定轮播容器宽度，支持像素和百分比	string	'600px'
height	设定轮播容器高度，支持像素和百分比	string	'280px'
full	是否全屏轮播	boolean	false
anim	轮播切换动画方式，可选值为：default（左右切换）updown（上下切换）fade（渐隐渐显切换）	string	'default'
autoplay	是否自动切换	boolean	true
interval	自动切换的时间间隔，单位：ms（毫秒），不能低于800	number	3000
index	初始开始的条目索引	number	0
arrow	切换箭头默认显示状态，可选值为：hover（悬停显示）always（始终显示）none（始终不显示）	string	'hover'
indicator	指示器位置，可选值为：inside（容器内部）outside（容器外部）none（不显示）注意：如果设定了 anim:'updown'，该参数将无效	string	'inside'
trigger	指示器的触发事件	string	'click'

4.6.3 切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;
 
//监听轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
  console.log(obj.index); //当前条目的索引
  console.log(obj.prevIndex); //上一个条目的索引
  console.log(obj.item); //当前条目的元素对象
});

4.6.4 重置轮播

在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);