jquery+bootstrap自定义插件开发之dropdownlist

真的是不太会起名字了，这样吧，先把效果图上来大家看看吧。这个插件可以使用在类似教师讲课或者章节之类吧

这个效果用到了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>

调用就比较简单了

$("#dropdown-list").dropdownList(function(index){
$("#contents").attr("src",index+".html");//这个的作用是给下面的一个iframe更换src的

});

给这个插件js文件起名dropdownlist.js 稍后会把整个源码打包。

大家看的效果图的下面的步骤一步骤二也是一个插件这个插件会在下一篇文章中介绍并提供下载敬请期待

如果大家喜欢请点击下推荐!