Re: [PROPOSAL] Keel look and feel
Raoul Pierre <[email protected]>
| Newsgroups | gmane.comp.java.keel.devel |
|---|---|
| Message-ID | <[email protected]> |
Shash Sasvata (Shash) Chatterjee a écrit : > Pierre, > >> >> About app-navigate, I just replace all the hard coded styles *and* >> javascript by *only* CSS (cf. Meyer indeed). Are you interested? >> > I have no idea what "cf Meyer" is :-). But always interested in > looking at alternatives, let us know what you propose. > I get all the idea from "More Eric Meyer on CSS" from ... Eric Meyer, a CSS guru > The app-naviagte js works great for me on several browsers I tried (I > have changed to use configured postions, sizes, colors already). How > about the CSS menu, how does it work cross-browser? > Quite good, but it need a htc file for IE. I tested this css with IE 6 and FireFox without problem. The CSS menu is not the "absolute" way. But as a first step it's simpler than the javascript code in app-navigate. And if a more powerfull tool is needed then there is MenuStruts, JsCookMenu... It's also possible to keep the two and give a choice to the programmer. This is what I done in my project throughTiles definitions. Pierre PJ: css, jsp & htc files
menubar.css
(text/css, 6.3 KB)
/* Ref.: More Eric Meyer on CSS, Eric Meyer
Note: use Peter Nederlof's file "csshover.htc", cf. http://www.xs4all.nl/~peterned/csshover.html
TODO: possibilité de barre séparatrice : lorsqu'un élément de la liste est vide,
lui associer une boite de hauteur nul avec une bordure horizontale plus marquée
TODO: menu à largeur automatique ? Ajouter des "div" pour
englober les "ul" des sous menus ?
Ou bien cela nécessite-t-il de toute façon Javascript ? Et dès lors quid
d'utiliser un framework tel que StrutsMenu ? Ou MyFaces+JsCookMenu ?
Ce dernier semble plus abouti mais nécessite l'intégration de MyFaces
avec Struts. A priori MyFaces fournit ce qu'il faut.
*/
/* with instruction below, css validation isn't possible
if needed, put it in a separate file and import this file
*/
body {behavior: url(csshover.htc));} /* Win IE behavior call */
#nomenu {display:none;}
/* It seems IE need "div#pageBanner" and not "#pageBanner" alone */
div#navbar {
z-index: 2; /* To show menu above the other contents */
position: absolute; /* "position" declaration Needed to use "z-index", no matter what kind
but "relative" forces next block to be under the menubar */
top: 0; left: 7px; /* default top and left margin of -8px for "body" with NS, IE & FF;
and same default padding with Opera; others?
But if left offset < -1px with FF, then border problems */
background: #6699cc; /* Only for the menubar, not for submenu */
border: 1px solid white;
float: left; /* To give a height and a width to the menubar, so that
border and background are ok
*/
font-size: small;
}
div#navbar ul { /* Caution: first level of "ul" has no height! */
position: relative;
left: +1px; /* To mask right border of the rightest link box in level 1 */
margin: 0; padding: 0;
}
div#navbar li {
position: relative; /* To use "display" in "div#navbar li a" below
without knowing if any "position" declaration in ancestors */
list-style: none; /* To remove list marker */
margin: 0; padding: 0;
float: left; /* To get horizontal menu bar */
width: 10em; /* See IE hack for "div#navbar li a" below */
line-height: 1em;
border-right: 1px solid white; /* only for the first level of "ul"; use the same color than navbar div border's one */
}
div#navbar ul ul {
position: absolute;
width: 15em; /* For IE */
display:none;
background: #eeeeee; /* Default color for submenu */
border: 1px solid white;
}
div#navbar ul ul li { /* in submenus:... */
position:relative;
left: -1px; /* To remove the "left:-1px" in "div#navbar ul" */
top: +1px; /* To mask bottom border of the bottom link box in level 2 */
border-bottom: 1px solid white; /* All link boxes with only bottom border of a soft color*/
width: 15em;
}
div#navbar ul.level1 li.submenu:hover ul.level2,
div#navbar ul.level2 li.submenu:hover ul.level3 {display: block;}
div#navbar ul.level2 {top: 1.5em; left: -1px;}
div#navbar ul.level3 {
top: -1px; left: 15em; /* value <> 15em, to avoid border overlap problem */
}
div#navbar li:hover {background: #00bbff;}
div#navbar li li:hover {background: #3333ff;}
div#navbar li.submenu {position: relative;} /* To position "span" inside submenu link boxes */
div#navbar li.submenu span { /* Use of ">" character to avoid loading a picture */
position: absolute; /* Needed to use "top" and "right" */
top: 0; /* Needed to keep the character inside the box.
Haven't been able to get anything with "vertical-align" */
right: 0.2em;
font-weight: bold;
color: white;
}
div#navbar li li.submenu span {color:black;} /* See below, "div#navbar li:hover a" */
div#navbar li.submenu:hover span {color:black;}
div#navbar li:hover li.submenu span {color:black;}
div#navbar li:hover li.submenu:hover span {color:white;}
div#navbar li a {
display: block; /* To get all the menu box reactive (not only the link) to cursor */
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; /* To remove link underline */
width: 9.5em; /* with IE hack : any width should be ok, as long as link is readable */
color:white; /* light color here if menubar background is dark, opposite otherwise*/
}
div#navbar li li a {
color:black; /* light color here if submenu background is dark, opposite otherwise*/
width: 14.5em;
}
div#navbar > ul a {width: auto;} /* And for other browsers */
div#navbar li:hover a {color: black;} /* To keep menubar link text in "hover" color when cursor in submenu */
div#navbar li:hover li a {color: black;} /* But in submenu link text must stay in non "hover" color */
div#navbar li:hover li a:hover {color: white;} /* Unless the one with the cursor on */
csshover.htc
(text/x-component, 2.9 KB)
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
menubar.jsp
(text/plain, 4.9 KB)
<jsp:directive.page language="java" />
<jsp:directive.include file="/common/taglibs.jspf" />
<%-- The output from this jsp can be included anywhere in the (X)HTML page.
It uses the app-navigate parameter "menu" to make nested lists.
No Javascript here, only CSS!
Note: when the cursor goes out of any menu area, all the submenus vanish
*immediatly*. To get some latence time, Javascript is needed.
--%>
<div id="navbar">
<c:if test="${! empty menu}">
<ul class="level1">
<logic:iterate id="topelement" name="menu" property="nested">
<bean:define id="topelement_title" name="topelement" property="attributes.title" type="java.lang.String"/>
<li class="submenu">
<a href="">${topelement_title}</a>
<ul class="level2">
<logic:iterate id="secondelement" name="topelement" property="nested"> <%-- iterator over all second level elements --%>
<bean:define id="secondelement_title" name="secondelement" property="attributes.title"/>
<logic:present name="secondelement" property="attributes.model">
<bean:define id="secondelement_model" name="secondelement" property="attributes.model"/>
<c:url var="secondelement_path" value="/model.do?model=${secondelement_model}"/>
<logic:present name="secondelement" property="attributes.parameters">
<bean:define id="secondelement_parameters" name="secondelement" property="attributes.parameters"/>
</logic:present> <%-- secondelement parameters attribute --%>
<logic:notPresent name="secondelement" property="attributes.parameters">
<c:set var="secondelement_parameters" value=""/>
</logic:notPresent> <%-- no secondelement parameters attribute --%>
</logic:present> <%-- secondelement model attribute --%>
<logic:notPresent name="secondelement" property="attributes.model">
<logic:present name="secondelement" property="attributes.url">
<bean:define id="secondelement_url" name="secondelement" property="attributes.url"/>
<c:url var="secondelement_path" value="${secondelement_url}"/>
</logic:present> <%-- if there is a secondelement url attribute --%>
<logic:notPresent name="secondelement" property="attributes.url">
<c:url var="secondelement_path" value=""/>
</logic:notPresent> <%-- no secondelement url attribute --%>
<c:set var="secondelement_parameters" value=""/>
</logic:notPresent> <%-- no secondelement model attribute --%>
<li class="submenu">
<a href="${secondelement_path}${secondelement_parameters}">${secondelement_title}</a>
<logic:notPresent name="secondelement" property="nested">
</a>
</logic:notPresent>
<logic:notEmpty name="secondelement" property="nested">
<span>></span></a>
<ul class="level3">
<logic:iterate id="thirdelement" name="secondelement" property="nested">
<bean:define id="thirdelement_title" name="thirdelement" property="attributes.title"/>
<logic:present name="thirdelement" property="attributes.model">
<bean:define id="thirdelement_model" name="thirdelement" property="attributes.model"/>
<c:url var="thirdelement_path" value="/model.do?model=${thirdelement_model}"/>
<logic:present name="thirdelement" property="attributes.parameters">
<bean:define id="thirdelement_parameters" name="thirdelement" property="attributes.parameters"/>
</logic:present> <%-- thirdelement parameters attribute --%>
<logic:notPresent name="thirdelement" property="attributes.parameters">
<c:set var="thirdelement_parameters" value=""/>
</logic:notPresent> <%-- no thirdelement parameters attribute --%>
</logic:present>
<logic:notPresent name="thirdelement" property="attributes.model">
<logic:present name="thirdelement" property="attributes.url">
<bean:define id="thirdelement_url" name="thirdelement" property="attributes.url"/>
<c:url var="thirdelement_path" value="${thirdelement_url}"/>
</logic:present>
<logic:notPresent name="thirdelement" property="attributes.url">
<c:url var="thirdelement_path" value=""/>
</logic:notPresent>
<c:set var="thirdelement_parameters" value=""/>
</logic:notPresent>
<li><a href="${thirdelement_path}${thirdelement_parameters}">${thirdelement_title}</a></li>
</logic:iterate> <%-- third element --%>
</ul>
</logic:notEmpty> <%-- second element --%>
</li>
</logic:iterate> <%-- all second-level elements --%>
</ul>
</li>
</logic:iterate> <%-- top level elements --%>
</ul>
</c:if> <%-- menu --%>
</div>