Dropdownlist for jquery + bootstrap custom plug-in development

It is really not a name, so let's take a look at it first. This plug-in can be used for lectures, chapters, and so on.

This effect uses the lightweight front-end framework bootstrap, which is really great. Jqery is required after bootstrap resource files are introduced. The front-end DOM structure is as follows:

<Div class = "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> install Oracle </p>
</A>
</Li>
<Li>
<A href = "#"> <span> 2. </span>
<P> Configure Oracle </p>
</A>
</Li>
<Li>
<A href = "#"> <span> 3. </span>
<P> Oracle Configuration Wizard </p>
</A>
</Li>
<Li>
<A href = "#"> <span> 4. </span>
<P> content of Step 4 </p>
</A>
</Li>
</Ul>
</Div>
<Div class = "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-middle">
<Span> </span> exercise (<span> </span>)
</Div>

</Div>

The call is simple.

$ ("# Dropdown-list"). dropdownList (function (index ){
$ ("# Contents"). attr ("src", index + ". html"); // This is used to replace the following iframe with src.

});

Name this plug-in js file dropdownlist. js and package the entire source code later.

For more information, see the following steps. Step 1 and Step 2. This plug-in will be introduced and available for download in the next article.

If you like it, click here for recommendation!