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  稍后會把整個源碼打包。

大家看的效果圖的下面的步驟一 步驟二 也是一個插件  這個插件會在下一篇文章中介紹 並提供下載敬請期待

如果大家喜歡請點擊下推薦!