Recent news

Wednesday, 18 May 2016

Dropdown Button Menu Jquery Plugin With Multiple Dropdown Themes




jui_dropdown is a jquery dropdown list plugin to populate the dropdown list value with multiple theams.

How To Use

1. Add the below library reference

<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.io/jui_dropdown/v1.0.4/jquery.jui_dropdown.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.io/jui_dropdown/v1.0.4/jquery.jui_dropdown.min.js"></script>


2. Now add the below html tag.

<div id="demo_drop4">
  <div id="launcher4_container">
    <button id="launcher4">Select</button>
  </div>
  <ul id="menu4">
    <li id="opt_4.1"><a href="javascript:void(0);">Option-4.1</a></li>
    <li id="opt_4.2"><a href="javascript:void(0);">Option-4.2</a></li>
    <li id="opt_4.3"><a href="javascript:void(0);">Option-4.3</a></li>
  </ul>
</div>


3. Add the below code to populate dropdown

$("#demo_drop4").jui_dropdown({
        launcher_id: 'launcher4',
        launcher_container_id: 'launcher4_container',
        menu_id: 'menu4',
        launcherUIShowText: false,
        launcherUISecondaryIconClass: 'ui-icon-gear',
        menuClass: 'menu4',
        containerClass: 'container4',
        my_position: 'right top',
        at_position: 'right bottom',
        onSelect: function (event, data) {
            $("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
        }
    });



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles