您现在的位置:首页 > 教案模板 > 正文

css二级下拉菜单 Bootstrap导航条可点击和鼠标悬停显示下拉菜单(5)

2018-02-27 18:04 网络整理 教案网

1、初始化常用属性介绍

上述通过简单的代码就可以完成我们组件的初始化,其实初始化方法 $('#featured').orbit(); 并不是固定,它可以传入多个参数,实现不同的轮播效果。由于该组件文档并不是非常齐全,这些属性都是通过查看源码找到的,以下博主就根据自己的一些尝试和理解介绍一些常用的初始化属性。

advanceSpeed属性用于设置图片的切换时间,默认值是4000,单位是毫秒。

timer属性用于控制是否启动开始暂停功能,就是我们右上角的那个小图标,原来就是通过它来控制的。默认true(开启)。

animation属性用于控制图片切换的动画效果,可用的选项有fade(淡入), horizontal-slide(垂直滑动), vertical-slide(水平滑动), horizontal-push, vertical-push总共5种。

captions属性表示是否启用图片标题。

captionAnimation属性用于控制标题的切换动画。

其他更多初始化属性可以自行查看源码:

Bootstrap实现带暂停功能的轮播组件(推荐)

最终的用法如下:

2、组件常用方法和事件解析

除了初始化的属性之外,组件还提供了多个事件供我们调用。查看组件源码可以看到如下几句:

Bootstrap实现带暂停功能的轮播组件(推荐)

这个表示给当前标签绑定了上述一些事件。我们如何使用它们呢。比如上文博主使用的定位图片的功能,我们可以这么写。

当然,还有他们的像orbit.next、orbit.prev这些事件应该也很好理解,就表示切换到下一张和上一张图片。

Bootstrap文件上传组件之bootstrap fileinput

[10405]

前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便。

Bootstrap组件系列文章:

Bootstrap实现带暂停功能的轮播组件(推荐)

Bootstrap组件系列之福利篇几款好用的组件(推荐)

Bootstrap组件系列之福利篇几款好用的组件(推荐二)

一、效果展示

1、原始的input type='file',简直不忍直视。

Bootstrap文件上传组件之bootstrap fileinput

2、不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化)

Bootstrap文件上传组件之bootstrap fileinput

3、bootstrap fileinput高级进化:中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件,不让上传)、文件预览

Bootstrap文件上传组件之bootstrap fileinput

支持拖拽上传

Bootstrap文件上传组件之bootstrap fileinput

上传中

Bootstrap文件上传组件之bootstrap fileinput

支持文件后缀名校验

Bootstrap文件上传组件之bootstrap fileinput

上传文件之前可进行文件预览

Bootstrap文件上传组件之bootstrap fileinput

4、bootstrap fileinput究极进化:允许同时多线程上传多个文件。

Bootstrap文件上传组件之bootstrap fileinput

上传中

Bootstrap文件上传组件之bootstrap fileinput

文件上传完成后

二、代码示例

怎么样?效果如何?如果你觉得效果不错的话,接下来博主就教你如何一步一步去实现它,相信会比官方api入手快。

开源以及API地址:

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API:

bootstrap-fileinput Demo展示:

1、html页面

首先引入需要的js和css文件。