真的是不太会起名字了,这样吧,先把效果图上来大家看看吧。这个插件可以使用在 类似教师讲课或者章节之类吧
这个效果用到了bootstrap这个轻量级的前端框架,真的是非常棒。引入bootstrap的资源文件后引入jqery是必须的。然后前端的DOM结构是这样的
<
div
class
="btn-toolbar btn-toolbar-top"
id
="dropdown-list"
>
< div class ="btn-group" >
< a class ="btn" >< i class ="icon-list-alt" ></ i ></ a >
< a class ="btn dropdown-toggle" data-toggle ="dropdown" >< span class ="caret" ></ span ></ a >
< ul class ="dropdown-menu span3 dropdown-menu-scroll" >
< li >
< a href ="#" >< span >1. </ span >
< p >安装Oracle </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >2. </ span >
< p >配置Oracle </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >3. </ span >
< p >Oracle配置向导 </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >4. </ span >
< p >第四步的内容 </ p >
</ a >
</ li >
</ ul >
</ div >
< div class ="btn-group btn-group-left" >
< a class ="btn" id ="moveUp" >< i class ="icon-chevron-left" ></ i ></ a >
< a class ="btn" id ="moveDown" >< i class ="icon-chevron-right" ></ i ></ a >
</ div >
< div class ="btn-group btn-group-middle" >
第 < span ></ span >个练习,共 < span ></ span >个练习
</ div >
< div class ="btn-group" >
< a class ="btn" >< i class ="icon-list-alt" ></ i ></ a >
< a class ="btn dropdown-toggle" data-toggle ="dropdown" >< span class ="caret" ></ span ></ a >
< ul class ="dropdown-menu span3 dropdown-menu-scroll" >
< li >
< a href ="#" >< span >1. </ span >
< p >安装Oracle </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >2. </ span >
< p >配置Oracle </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >3. </ span >
< p >Oracle配置向导 </ p >
</ a >
</ li >
< li >
< a href ="#" >< span >4. </ span >
< p >第四步的内容 </ p >
</ a >
</ li >
</ ul >
</ div >
< div class ="btn-group btn-group-left" >
< a class ="btn" id ="moveUp" >< i class ="icon-chevron-left" ></ i ></ a >
< a class ="btn" id ="moveDown" >< i class ="icon-chevron-right" ></ i ></ a >
</ div >
< div class ="btn-group btn-group-middle" >
第 < span ></ span >个练习,共 < span ></ span >个练习
</ div >
</div>
调用就比较简单了
$("#dropdown-list").dropdownList(
function(index){
$("#contents").attr("src",index+".html");//这个的作用是给下面的一个iframe更换src的
$("#contents").attr("src",index+".html");//这个的作用是给下面的一个iframe更换src的
});
给这个插件js文件起名dropdownlist.js 稍后会把整个源码打包。
大家看的效果图的下面的步骤一 步骤二 也是一个插件 这个插件会在下一篇文章中介绍 并提供下载敬请期待
如果大家喜欢请点击下推荐!