jQuery Mobile Plugin: gpMobileMenu

While developing the Mobile Theme Generator, I decided to allow the user to display a menu above the content. After the site was launched, I decided to create a plugin with the menu functionality. With the gpMobileMenu plugin, you have the ability to dynamically display menus on your site using jQuery Mobile’s Listview. I also enhanced the functionality so that the menus can be displayed above the content, split-view mode, or within a container.

gpMobileMenu Icon

When a user clicks on the menu icon, the menu will be displayed. The menu icon can be placed anywhere on the page. Although the menu icon uses jQuery Mobile’s data-theme, attribute, it is actually a 15-color sprite.

icon_data_theme option

Use the icon_data_theme option to set the color of the icon menu.

?View Code JAVASCRIPT
icon_data_theme: ‘c’

The data-themes colors are:
a – black
b – light blue
c – grey
d – white (default)
e – yellow
f – orange
g – red
h – navy blue
i – lime green
j – purple
k – pink
l – brown
m – gold
n – dark green
o – dark grey

icon_position option

Use the icon_position option to place the icon on the left or right.

?View Code JAVASCRIPT
icon_position: ‘right’

The default position is left. When this option is set, the plugin will add either the ui-btn-right or ui-btn-left class to the menu icon.

Menu Items

The menu items should be contained within a JSON object. Use either the menu_items (static) option or the menu_items_url (dynamic) option to load the menus. Use the menu_items_url to load the menu items ajaxally. The JSON object can contain a few options. The most common:

url: The url of the menu item (when clicked).
label: The display text.

?View Code JAVASCRIPT
{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}

In addition, you can set the following options:

isDivider: Use this option if you want the menu item to be a divider (not a link). The plugin will set the menu item with jQuery Mobile’s data-divider-theme attribute so that it can be style separately.

?View Code JAVASCRIPT
{"isDivider": "true", "label": "My Menu"}

In order to style the data-divider-theme, use the menu_data_divider_theme option. The default for this option is ‘b’.

?View Code JAVASCRIPT
menu_data_divider_theme: ‘a’

dataAjax: Use this option to set the data-ajax attribute for the menu item. The default is ‘false’.

?View Code JAVASCRIPT
{"url": "#mycontent", "label": "GrasshopperPebbles", “dataAjax”:true}

callFunc: Use this option if you want to call a Javascript function when user clicks on a menu item (The url option will not be used). To pass parameters to the function use the params option. The parameters will be sent to the Javascript function as an array.

?View Code JAVASCRIPT
{"callFunc": "bobMarley", "params": [{"param":"song"}, {"param": "jammin"}], "label": "Bob Marley Lyric"}

ajaxCall: Use this option to make an Ajax call when the menu item is clicked. When using this option, you must also supply an ajaxCallSuccess option. This is the Javascript function that should be called when the ajax call is successfully completed.

?View Code JAVASCRIPT
{"ajaxCall": true, "url": "/assets/js/jquerymobile/gpmobilemenu/get_data.php", "ajaxCallSuccess": "showLyric", "label": "Ajax Call"}

Menu Items Style

To style the menu items, use the menu_data_theme option. This will set jQuery Mobile’s data-theme attribute to the menu items. You can change the style using jQuery Mobile’s Theme Roller. The default value for this option is ‘a’.

?View Code JAVASCRIPT
menu_data_theme: 'c'

gpMobileMenu Modes

The gpMobileMenu will display menus using 3 separate modes:

Above Content: The menu will display above your content. This is the default option.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		icon_data_theme: 'e',
		menu_items: [{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, 
					 {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, 
					 {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}]
	}); 
});

Split View: The menu will display on the left of the content (the content will be pushed to the right, partially off of the screen). With the split-view option, you have the option of displaying the menu using animation by setting the animate_transition option. This option is set to false by default.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		mode: 'split-view',
		icon_position: 'right',
		menu_data_theme: 'c',
		animate_transition: true,
		menu_items: [{"isDivider": "true", "label": "My Menu"}, 
					 {"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, 
					 {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, 
					 {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}]
	}); 
});

Slide: The menu will slide into down into view. You control where the menu should display. Just create the menu container anywhere in your template and set the menu_cntnr option to the id
of you menu container. You don’t have to style the container because it will get replaced with another container.

?View Code JAVASCRIPT
$(document).ready(function(){ 
	$('#gs-widget-tabs-cntnr').gpMobileMenu({
		mode: 'slide',
		menu_cntnr:'my-slider',
		icon_position: 'right',
		menu_data_theme: 'b',
		menu_data_divider_theme: 'a',
		menu_items_url: '/assets/js/jquerymobile/gpmobilemenu/menu.php'
	}); 
});

Additional Menu Style Options

The menu items can be set with additional jQuery Mobile style attributes.

menu_inset: By default, the menu items will set with the data-inset attribute set to ‘true’.
menu_mini: By default, the menu items will be set with the data-mini attribute to set ‘true’.
menu_corners: By default, the menu items will be set with the data-corners attribute set to ‘false’ (no curved corners).

Using gpMobileMenu without jQuery Mobile.

Although the plugin was created to be used with jQuery Mobile, the plugin can be used without it by setting the jquery_mobile option to ‘false’. Without jQuery Mobile’s styling, you will have to style the menus yourself. The following are some basic styling:

#gp-mobile-menu-icon.ui-btn-right {
    float:right;
    margin-top: 6px;
    margin-right:10px;
}
#gp-mobile-menu-items li {
	height:30px;
	border-bottom:solid thin white;
}
#gp-mobile-menu-items li a {
	display:block;
	text-decoration:none;
	height:30px;
	background-color:#000000;
	color:#ffffff;
}

That’s it. The gpMobileMenu can be downloaded from github. Demos can be found on the demos section of my site. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks