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

1、初始化常用属性介绍

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

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

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

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

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

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

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

最终的用法如下：

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

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

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

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

Bootstrap文件上传组件之bootstrap fileinput

[10405]

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

Bootstrap组件系列文章：

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

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

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

一、效果展示

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

2、不做任何装饰的bootstrap fileinput：（bootstrap fileinput初级进化）

3、bootstrap fileinput高级进化：中文化、可拖拽上传、文件扩展名校验（如果不是需要的文件，不让上传）、文件预览

支持拖拽上传

上传中

支持文件后缀名校验

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

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

上传中

文件上传完成后

二、代码示例

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

开源以及API地址：

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

bootstrap-fileinput在线API：

bootstrap-fileinput Demo展示：

1、html页面

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