Home » Source Code » Dropline Menu Tag Library

Dropline Menu Tag Library

maninwest
2015-01-11 01:14:59
The author
View(s):
Download(s): 0
Point (s): 1 
Category Category:
menumenu JavaJava

Description

Translated by maninwest@Codeforge Author:Prasad Khandekar@CodeProject

This article presents a JSP tag library for a Drop Line Flyout Menu. This menu currently supports only two levels, however with the addition of new CSS rules it can support multiple levels. The HTML markup of this control is highly influenced by samples found on Stu Nicholl's CSS Play and the Dynamic Drive website. I have rewritten the CSS and added jQuery based mouse hover effect. As shown on Stu Nicholl's website, this can even be achieved using pure CSS, however that solution requires a steady hand, otherwise the menu disappears as soon as the mouse moves out of the menu item. This is the primary reason for using jQuery.
Using the Code

<%@ taglib uri="http://bizsutra.blogspot.com/jsp/tags/ui" prefix="uitags" %>
<uitags:dlmenubar menuData="${sessionScope.MENUDATA}" id="sitemenu"  cssOnly="false"/>

Using this tag library is as simple as declaring the tab library and using the tag itself as shown in the following code snippet. Please remember that the jar file for this tag must be present in the "WEB-INF/lib" folder of your application.

Tag Attributes

The following table summarizes the various attributes of the Drop Line Menu Tag Library.
Attribute Description
onMenuClicked

The name of the client side JavaScript function which gets invoked whenever the user clicks on the menu item. This is an optional attribute. If not specified then the control assumes that a global function named onMenuItemClicked is present either in the HTML page or a JavaScript file linked to the page. The function receives the following parameters:

  • The URL of the destination.
  • The menu item ID.
  • The menu ID.
onModuleClicked

The name of the client side JavaScript function which gets invoked whenever the user clicks on the top level menu bar item. This is an optional attribute. If not specified then the control assumes that a global function named onModuleClicked is present either in the HTML page or a JavaScript file linked to the page. The function receives the following parameters:

  • Group ID
  • Menu ID
itemLabelPrefix The text to be used as a prefix for the keys used for retrieving the localized version of the menu item description. The actual key is formed by prefixing this text to the serial number of the menu item, separated by a dot. The default value is menuitem.label.
groupLabelPrefix The text to be used as a prefix for the keys used for retrieving the localized version of the top level menu bar item description. The actual key is formed by prefixing this text to the serial number of the menu bar item, separated by a dot. The default value ismenugrp.label.
menuData* The actual data used for menu rendering. The expected data type is JSONObject.
cssOnly A boolean flag which when set to true renders a pure CSS driven drop line menu. The default value is true.
id* The unique identifier for this instance. This property ensures that multiple menu controls do not interfere with each other.

Menu Data Structure

The menu uses JSON data structure as its input. The menudata is itself a JSONObject with a single property named menu whose value is of the JSONArray data type. The menu data does not contain entries for top level menu bar items. Instead the top level menu bar is derived using the distinct values of the group_id attribute. This scheme is generally useful for multi module business applications where each module has a set of menus and submenus.
{
    "menu" : [
        {
            "description" : "viewall.frm",
            "group_id" : "Mobile",
            "isGroup" : false,
            "name" : "View All",
            "serial" : 1,
        },
        {
            "description" : "",
            "group_id" : "Mobile",
            "isGroup" : true,
            "name" : "Mobile Phones",
            "serial" : 2,
            "submenus" : [
                {
                    "description" : "loanCenter.form",
                    "group_id" : "Mobile",
                    "isGroup" : false,
                    "name" : "Android Phones",
                    "serial" : 3,
                },
                ...
            ]
        },
        ...
    ]
}

The following table summarizes the various attributes in the JSON data structure:
Attribute Description
Attribute Description
description This attribute represents the URL to navigate to when a menu item is clicked. For groups the value is Empty.
group_id As the name suggests this attribute represents the group ID or the module ID. The distinct values of this attribute are used for rendering the top level menu bar.
isGroup A boolean attribute signifying whether the current entry represents a group of menu or an individual menu item.
name The default description for this menu item. The menu control uses this description if it can not find the localized representation.
serial The unique serial number identifying this menu entry.

ID Naming Conventions


The id for the top level menu bar item is constructed by prefixing the value of the group_id attribute with the text mbar_. The ID for the menu item is constructed by prefixing the value of the serial attribute with the group_id attribute followed by an underscore _ and the value of the serial attribute of all the parents separated by an underscore "_".
Theme Support


The theming is done entirely using CSS. In total there are four CSS files as summarized below.
cssdlm.css - The base CSS for CSSOnly menu implementation.
cssdlm-skin.css - The CSS for theming the CSSOnly menu.
jsdlm.css - The base CSS for jQuery based menu implementation.
jsdlm-skin.css - The CSS for theming the jQuery based menu.
Localization


The tag library is locale aware and can render the menu in the localized language. Localization is achieved using resource bundles. The resource bundle is a Java properties file containing key value pairs where the key is formed by prefixing either the itemLabelprefix or groupLabelPrefix followed by a dot "." to the menu serial number. The value represents the localized text to be displayed.
(itemLabelPrefix | groupLabelPrefix).serial
Dependencies
This tag library makes use of the following third party libraries:
Library Name Version Type
json-lib-2.2.3-jdk15.jar 2.2.3 Runtime (Server)
slf4j-api-1.6.4.jar 1.6.4 Runtime (Server)
spring-context-2.5.6.jar 2.5.6 Runtime (Server)
spring-core-2.5.6.jar 2.5.6 Runtime (Server)
spring-web-2.5.6.jar 2.5.6 Runtime (Server)
jquery-1.7.1.min.js* 1.9.1 Runtime (Client)
servlet-api-2.4.jar* 2.4 Compile (Server)

Limitations
Currently the tag does not work in non-spring projects. This is due to the use of classes used for localization.
Sponsored links

File list

Tips: You can preview the content of files by clicking file names^_^
Name Size Date
build.properties228.00 B2013-03-04 01:45
build.xml3.45 kB2013-03-04 01:52
buildno.properties16.00 B2013-03-04 01:45
01.97 kB
01.97 kB
jsp-api-2.0.jar47.32 kB2009-04-15 15:48
servlet-api-2.4.jar95.40 kB2009-04-15 15:45
01.97 kB
json-lib-2.2.3-jdk15.jar145.01 kB2009-03-08 16:09
jstl-1.2.jar404.53 kB2012-08-01 17:15
slf4j-api-1.6.2.jar25.09 kB2013-02-15 20:57
spring-core-2.5.6.jar278.80 kB2009-01-15 17:21
spring-web-2.5.6.jar190.02 kB2009-01-15 17:45
01.97 kB
uitags.tld2.79 kB2013-03-04 01:17
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
DropLineMenuBarTag.java17.71 kB2013-03-04 01:25
01.97 kB
TagUtils.java7.89 kB2013-03-04 01:19
01.97 kB
cssdlmenu.html10.43 kB2013-03-04 00:41
cssdlmenu.jsp1.33 kB2013-03-04 01:38
jsdlmenu.html11.82 kB2013-03-04 00:37
jsdlmenu.jsp2.56 kB2013-03-04 01:32
01.97 kB
menujson_01020.txt1.97 kB2013-03-04 00:54
01.97 kB
01.97 kB
cssdlm-skin.css2.04 kB2013-03-03 23:58
cssdlm.css2.80 kB2013-03-03 23:58
jsdlm-skin.css1.23 kB2013-03-04 00:07
jsdlm.css1.51 kB2013-03-04 00:00
01.97 kB
blue_arrow.gif830.00 B2013-03-03 23:33
blue_bg.gif835.00 B2013-03-03 23:33
brown_arrow.gif830.00 B2013-03-03 23:33
brown_bg.gif824.00 B2013-03-03 23:33
chocolate_bg.gif835.00 B2013-03-03 23:33
flyout.png203.00 B2013-03-03 23:33
green_arrow.gif830.00 B2013-03-03 23:33
green_bg.gif830.00 B2013-03-03 23:34
le.png219.00 B2013-03-03 23:34
left_edge.png228.00 B2013-03-03 23:34
menu_bg.png1.21 kB2013-03-03 23:34
menu_spacer.gif811.00 B2013-03-03 23:34
orange_bg.gif824.00 B2013-03-03 23:34
purple_arrow.gif830.00 B2013-03-03 23:34
purple_bg.gif824.00 B2013-03-03 23:34
re.png408.00 B2013-03-03 23:34
right_edge.png432.00 B2013-03-03 23:34
01.97 kB
jquery-1.7.1.min.js91.67 kB2012-02-29 11:36
jquery-1.9.1.min.js90.46 kB2013-02-11 10:24
...
Sponsored links

Comments

(Add your comment, get 0.1 Point)
Minimum:15 words, Maximum:160 words
  • 1
  • Page 1
  • Total 1

Dropline Menu Tag Library (1.12 MB)

Need 1 Point(s)
Your Point (s)

Your Point isn't enough.

Get 22 Point immediately by PayPal

Point will be added to your account automatically after the transaction.

More(Debit card / Credit card / PayPal Credit / Online Banking)

Submit your source codes. Get more Points

LOGIN

Don't have an account? Register now
Need any help?
Mail to: support@codeforge.com

切换到中文版?

CodeForge Chinese Version
CodeForge English Version

Where are you going?

^_^"Oops ...

Sorry!This guy is mysterious, its blog hasn't been opened, try another, please!
OK

Warm tip!

CodeForge to FavoriteFavorite by Ctrl+D