The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jui_dropdown : Creates a simple dropdown button menu (jquery-ui themeable)

Tags :

Plugin rate :

jui_dropdown : jquery ui simple dropdown button menu (UI themeable)

Copyright Christos Pontikis : http://pontikis.net

Requires jquery, jquery-ui, jquery-ui CSS (tested with jquery 1.8.2 and jquery-ui >= 1.8.23 - recommended jquery-ui >= 1.9

License MIT

Implementation: 

1. HEAD section

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="/path/to/jqueryui_theme/jquery-ui.css">
<link rel="stylesheet" href="/path/to/jquery.jui_dropdown.css">
<!--  if custom classes used -->
<link rel="stylesheet" href="/path/to/custom.css">
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
 
<script type="text/javascript" src="jquery.jui_dropdown.js"></script>

2. JS code

1
2
3
4
5
6
7
8
9
10
$("#element_id").jui_dropdown({
    launcher_id: 'launcher1',
    launcher_container_id: 'launcher1_container',
    menu_id: 'menu1',
    containerClass: 'container1',
    menuClass: 'menu1',
    onSelect: function(event, data) {
        $("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
    }
});

 

 

3. jui_dropdown OPTIONS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#element_id").jui_dropdown({
    launcher_id: 'launcher1',  // REQUIRED
    launcher_container_id: 'launcher1_container', // REQUIRED
    menu_id: 'menu1', // REQUIRED
 
    containerClass: 'containerClass', // OPTIONAL
 
    // DEFAULTS
    launcherContainerClass: 'launcherContainerClass',
    launcherClass: 'launcherClass',
    launcherSelectedClass: 'launcherSelectedClass ui-widget-header ui-corner-all',
    menuClass: 'menuClass',
    launcher_is_UI_button: true,
    launcherUIShowText: true,
    launcherUIPrimaryIconClass: '',
    launcherUISecondaryIconClass: 'ui-icon-triangle-1-s',
 
    my_position: 'left top',
    at_position: 'left bottom',
    toggle_launcher: false,
 
    onSelect: function() {
    }
});

 

 

jui_dropdown METHODS

getDefaults

1
$("#element_id").jui_dropdown('getDefaults');

 

getOption

1
$("#element_id").jui_dropdown('getOption', 'option_name');

 

getAllOptions

1
$("#element_id").jui_dropdown('getAllOptions');

 

setOption

1
$("#element_id").jui_dropdown('setOption', 'option_name', option_value, reinit);

Alternative way to set one or more options

1
$("#element_id").jui_dropdown({option1_name: option1_value, etc});

 

refresh

1
$("#element_id").jui_dropdown('refresh');

 

destroy

1
$("#element_id").jui_dropdown('destroy');

 

 

jui_dropdown EVENTS

onSelect

1
2
3
4
5
$("#element_id").jui_dropdown({
    onSelect: function(event, data) {
        $("#result").text('index: ' + data.index + ' (id: ' + data.id + ')');
    }
});
Screenshots
  • jui_dropdown

Comments

your script tags in the head section of the implementation have duplicate type attributes, you should correct that

hi,good work but a have a problem, the jquery loads ok but in firebug say this: Uncaught Error: You must use this plugin jui_dropdown with a unique element (at once) ,can you help me?

Hi,

'Error: You must use this plugin jui_dropdown with a unique element (at once)' occurs when the selector you apply the plugin has more than one elements.

E.g. if you apply the plugin using class as selector

1
$(".myclass").jui_dropdown({})

and myclass is used more than once, the error will occurs.

The best way to apply the plugin is a (unique) id, e.g

1
$("#mydiv_id").jui_dropdown({})

Of cource, you may have many instances of the plugin in the same page, using

1
2
3
$("#mydiv1_id").jui_dropdown({})
$("#mydiv2_id").jui_dropdown({})
...

Hi, i have a problem
i have a dropdownlist id = ddlRegion
i use :
$(document).ready(function () {
$("#ddlRegion").jui_dropdown('getDefaults');
});
But problem: Uncaught TypeError: Object [object Object] has no method 'jui_dropdown'

Hi

first apply the plugin, e.g.

1
2
3
4
5
6
7
    $("#ddlRegion").jui_dropdown({
        launcher_id: 'launcher1',
        launcher_container_id: 'launcher1_container',
        menu_id: 'menu1',
        containerClass: 'container1',
        menuClass: 'menu1'
    });

and afterwards try to get its default values, e.g.

1
    console.log($("#ddlRegion").jui_dropdown("getDefaults"));

Please, note that "ddlRegion" must be a "div" and not a "dropdown select". See demo and code (View source tab) at

http://www.pontikis.net/labs/jui_dropdown/demo/

Regards

Christos Pontikis

hi, i can't use any method
ex my code:
$(function () {
// DEMO DROPDOWN 2 ---------------------------------------------------------
$("#demo_drop2").jui_dropdown({
launcher_id: 'launcher2',
launcher_container_id: 'launcher2_container',
menu_id: 'menu2',
containerClass: 'container2',
menuClass: 'menu2',
launcher_is_UI_button: false,
onSelect: function (event, data) {
// alert('ok');
$("#demo_drop2").jui_dropdown('destroy');
}
});
//alert($("#demo_drop2").jui_dropdown('getOption', 'Option-2.1'));
// alert($("#demo_drop2").jui_dropdown('getAllOptions'));
$("#demo_drop2").jui_dropdown('setOption', 'ok', 4, reinit);
//$("#demo_drop2").jui_dropdown({'ok': '4'});
})

Good morning

it would be helpful to create a "fiddle" at http://jsfiddle.net/ to try debug your code.

Regards

Christos

Thanks you, but you can demo some method in your demo?

http://jsfiddle.net/ (or similar sites) is the best method to test and debug some (javascript) code.

Regards

Christos

How to hide a menu when different menu is pulled down? I have two buttons beside each other and when I click on second button, menu gets overlapped on the first one.

Also, is it possible to show menu on hover and hide it when mouse leaves the menu area?

Thank you for trying jui_dropdown.

Your comments are Very useful.

(a)
Actually, a menu will be hidden when you click outside (unfortunately not to other menu button).

(b)
Show - hide on hover is not available.

I will try to fix these two issues you mentioned during next 7-10 days. I will post a comment here.

HI I am trying to apply your code at http://test.careerbreeder.com.

Number of items over there are more very high. Is there any way to allow scroll bar over there? I tried using CSS overflow tag but no luck.

Thank you for using jui_dropdown. I saw your test site at test.careerbreeder.com

I am not sure if scrollbar can be implemented. jui_dropdown is based on http://jqueryui.com/menu/ so it has its limitations.

But, anyway, try to apply fix height and overflow auto (using css) to the div containing the list.

Hi, and thanks for Your plugin. I'm testing it in my web app, and noticed one thing:
if my "launcher button" has a small height (i really need it by design), and i open dropdown menu by pressing it, moving mouse to the menu suddenly closes it, (if i move too slowly). DOM cathces "mouseout" event when mouse leaves launcher button, but event "mouseover" for the menu is not fired yet.
May be it's a good idea to make some timeout before closing dropdown menu by "mouseout" event ?

Thank you for trying jui_dropdown.

I will try to fix this issue in next release.

Thanks for your plugin. I needed scrollbar for my dropdown and used css to implement one(overflow-y and height). However, on clicking scrollbar the dropdown menu closes. This is in chrome and FF. In IE it works fine. Can you please help with this issue.

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
jQuery U.I
>= 1.8
Current version
1.0.3
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [16]