WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
通用轮播组件 - wui.carousel 更多 carousel 示例

模块加载名称:carousel
如下是几个常用的轮播示例,其中背景色是为了区分条目单独加的,在wui框架中并不会包含。条目区域可以放上文字列表、图片等任意内容
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="/static/build/wui.css" media="all">
</head>
<body>
 
<div class="wui-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/wui.js"></script>
<script>
wui.use('carousel', function(){
  var carousel = wui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
});
</script>
</body>
</html>

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

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

通过核心方法: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'
轮播的每一次切换时触发,回调函数返回一个object参数,携带的成员如下:
var carousel = wui.carousel;

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

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

var ins = carousel.render(options);
 
//重置轮播
ins.reload(options);
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile