jQuery插件——Roundabout

提示:你可以先修改部分代码再运行。

前面分享的模板中大家印象最深的应该是上面一大块图片轮播吧,我看了下代码,人家用的是一个jquery插件——Roundabout。
Roundabout是一个jQuery插件,它可以改变静态html元素的组织形式并使之成为可按用户需要作更改的转盘式的交互区域(当然可能你不喜欢这种转盘式的,这里他还提供了另外一些形态,点此查看)
在它最简单的配置中,Roundabout可以使用有序或无序列表,然而进行一些快速的配置后,Roundabout则可以使用一些嵌套元素。
这里的三个步骤可以帮助你把无序列表转换成令人兴奋的转盘。

这里假定你的HTML代码中有一个无序列表,可能像这样:

1.导入js

提示:这里的路径需要根据你的实际情况作更改

2.设置样式

由于在一些浏览器中无序列表默认有个内嵌缩进的点,所以我们需要作出一些样式上的改变,以便这些特征不随着Roundabout第一次启动或运行时出现。下面是Roundabout的标准css样式。

3.附上Roundabout

这段代码可以发生在分离的文件(包含在第一步中的jQuery和Roundabout script之后),他需要放置在页面的正确位置。让我们以这个例子为由放在页面的正确位置吧。

这里有两点:首先,我们用document.ready来触发Roundabout的装载,这一点很重要;我们并不希望Roundabout在未加载完的DOM模型中寻找HTML元素。
其次,选择我们希望变成转盘的HTML元素的jQuery选择符,然后加上.roundabout()这个方法。
保存文件并在浏览器查看,如果你设置的路径都正确且样式能够正常呈现,那么你就学会了Roundabout的使用了。

一些有意思的实例

由于时间关系,我只能介绍到这儿,如果感兴趣的话可以看看原网站。本人英语水平一般,翻译中难免有错误,请帮忙指正,不胜感激。

1 Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注