materialize基础---组件
轮播 carousel
结构:
.carousel.carousel-slider>
a.btn.carousel-fixed-item+
carousel-item*n
设置:
//初始化
$("#").carousel({
//转换时间
time_constant:200,
//缩放
dist:-100,
//间距
shift:0,
//内间距
padding:0,
//全屏,配合`.carousel-slider`使用
full_width:false,
//点标
indicators:false,
//不循环子项目?!
no_wrap:false
})
百叶模式:.carousel
;
全屏模式:.carousel.carousel-slider
并设置full_width:true
;
轮播图或者文字配背景图;
折叠 collapsible
结构:
ul.collapsible.popup[data-collapsible='accordion']>
li>(
.collapsible-header+
.collapsible-body.active
)
初始化
$("#").collapsible({
//折叠式
accordion:false,
//打开式
expandable:false,
//回调函数
onOpen:fn(),
onClose:fn()
});
气泡模式ul加.popup
;
data-collapsible值:accordion
和expandable
;
弹出消息 toast
JS调用Materialize.toast(message, displayLength, className, completeCallback)
;
- message:内容,可以是HTML
- displayLength:显示时间
- className:自定义样式
- completeCallback:消失后回调函数
提示 tooltipped
结构:
.tooltipped[data-position][data-delay][data-tooltip]
- [data-position:left/right/top/bottom显示方位
- [data-delay]:延迟显示
- [data-tooltip]:显示的内容/HTML
初始化:
$("#").tooltip({
delay:350,
tooltip:"",
position:"bottom",
html:false
})
去除:
$("#").tooltip('remove')
;