css - How to highlight an active element in the menu when clicked in Struts2 tiles? -
css - How to highlight an active element in the menu when clicked in Struts2 tiles? -
i using struts2 tiles configuration. have links nowadays in side menu. so, when new page forwarded, active element highlight has been removed. using tiles configuration follows.
<definition name="login-success" template="/maintemplate.jsp"> <put-attribute name="header" value="/header.jsp"/> <put-attribute name="title" value="welcome page"/> <put-attribute name="menu" value="/menu.jsp"/> <put-attribute name="body" value="/appointments/01_dummy.jsp"/> <put-attribute name="footer" value="/footer.jsp"/> </definition> <definition name="login-error" template="/maintemplate.jsp"> <put-attribute name="title" value="login error"/> <put-attribute name="body" value="/login-error.jsp"/> </definition> <definition name="appointment" extends="login-success"> <put-attribute name="body" value="/appointments/02_firstscreen.jsp"/> </definition> my menu looks below:
when clicks link1, should forwards jsp in body. meanwhile link1 has maintain on highlighted until clicks links such link2 or module2.
maintemplate.jsp:
<%@page contenttype="text/html" pageencoding="utf-8"%> <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> <%@ taglib uri="/struts-tags" prefix="s"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <!--<title><tiles:getasstring name="title" /></title>--> <title>isis patient monitoring solution</title> <link rel="shortcut icon" type="image/x-icon" href="../images/isis_logo.jpg" /> </head> <style> html, body { margin: 0; padding: 0; height: 100%; } #wrapper { min-height: 100%; position: relative; } #header { padding: 6px; background: #fff; height: 58px; } #sidemenu { padding: 6px; padding-bottom: px; /* height of footer element */ height: 1 px; } * / #content { padding: 6px; padding-bottom: 10px; /* height of footer element */ height: 2px; position: relative; } #footer { width: 100%; padding: 2px; height: 15px; position: absolute; bottom: 0; left: 0; background: #fff; } </style> <body> <div id="wrapper"> <div align="left" id="header"> <tiles:insertattribute name="header" /> </div> <div id="sidemenu"> <tiles:insertattribute name="menu" /> </div> <div align="center" id="content"> <tiles:insertattribute name="body" /> </div> <div align="center" id="footer"> <tiles:insertattribute name="footer" /> </div> </div> </body> </html> my menu jsp looks follows: in using li tab , anchor tab link.
menu.jsp:
<%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link type="text/css" rel="stylesheet" href="${pagecontext.request.contextpath}/css/styles.css" /> <title>isis patient monitoring system</title> <link rel="shortcut icon" type="image/x-icon" href="./images/isis_logo.jpg" /> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript" src="javascripts/script.js"> </script> </head> <body> <div id='cssmenu'> <ul class="ui-state-focus"> <li class='has-sub last'><a href='#'><span>module-1</span></a> <ul id="tab2"> <li><a href='appointment'><span>link 1</span></a></li> <li><a href='#'><span>link 2</span></a></li> </ul></li> <li class='has-sub last'><a href='#'><span>module-2</span></a> <ul id="tab3"> <li><a href='#'><span>company</span></a></li> <li class='last'><a href='#'><span>contact</span></a></li> </ul></li> <li class='last'><a href='#'><span>contact</span></a></li> </ul> </div> </body> </html> i have used li:active, li:visited , li:focus. there no use. highlight disappears when new page loaded. help appreciated.
i suggest 1 mechanism tho highlight selection in menu.
step 1: in css have class of highlighting.
in css
// css create selected menu appears different other menu items selected or highlighted { color: red; background: yellow; } this highlighted class.
step 2: add together class contents in such way body tag's id , ul or li or a tag's comes in combination.
in css
body#link1 a#link1, body#link2 a#link2, body#link3 a#link3, body#link4 a#link4{ color: red; background: yellow; } note: class should lastly class in css, no other css override class
step 3: in tiles pass new parameter id different pages.
in tiles.xml
<definition name="appointment" extends="login-success"> <put-attribute name="body" value="/appointments/02_firstscreen.jsp"/> <put-attribute name="menuselection" value="link1"/> </definition> step 4: in menu.jsp utilize tiles parameter
look below code, added id in body tag , in a tag
<body id="<tiles:insertattribute name="menuselection" ignore="true" />"> <div id='cssmenu'> <ul class="ui-state-focus"> <li class='has-sub last'><a href='#'><span>module-1</span></a> <ul id="tab2"> <li><a id="link1" href='appointment'><span>link 1</span></a></li> <li><a id="link2" href='#'><span>link 2</span></a></li> </ul></li> <li class='has-sub last'><a href='#'><span>module-2</span></a> <ul id="tab3"> <li><a id="link3" href='#'><span>company</span></a></li> <li id="link4" class='last'><a href='#'><span>contact</span></a></li> </ul></li> <li class='last'><a href='#'><span>contact</span></a></li> </ul> </div> </body> step 5: utilize same id menu's li or a tag whatever suitable per css.
in step 4 added id a tag, should seek span tag if not work highlight.
<a id="link1" href='appointment'><span>link 1</span></a> for different pages utilize different menuselection in tiles.xml.
<definition name="link2" extends="login-success"> <put-attribute name="body" value="/appointments/somepage.jsp"/> <put-attribute name="menuselection" value="link2"/> </definition> this highlight link2.
now case: if not reloading page, need create jquery function changes id of body tag.
in js file
function enablelink2highlight(){ $("body").attr("id","link2"); } call function on click event of link, simple.
<a id="link2" href='#' onclick="enablelink2highlight();"><span>link 2</span></a></li> note: create sure not have multiple body tag, if have multiple body tag can give class body tag , filter in jquery selection.
i hope mechanism may help you. please share result me. can help more.
css jsp struts2 tiles
Comments
Post a Comment