Diferencia entre revisiones de «XForms/Menú horizontal paginado»
Contenido eliminado Contenido añadido
Línea 15:
[http://xforms-examples.googlecode.com/svn/trunk/02-controls/10a-Horiz-Tab-Menu/XForms-Horizontal-Tab-Menu.xhtml Horizontal Tabbox]
== Programa de ejemplo ==
<big>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>XForms Colored Horizontal Tab Menu</title>
<style>
@namespace xf url("http://www.w3.org/2002/xforms");
/* all the attributes of each tab, except the background color */
#horiz-tab-menu xf|trigger {
border-left: black solid 1px;
border-top: black solid 1px;
border-right: black solid 1px;
border-bottom: 0px;
font-weight: bold;
font-family: Helvetica, sans-serif;
font-size: .9em;
margin-right: 5px;
padding: 3px;
/* the following only works under FireFox */
-moz-border-radius: .5em .5em 0em 0em;
border-radius-topright: .5em;
border-radius-topleft: .5em;
}
/* the attributes of each div inside of a case */
xf|switch xf|case div {
border-left: solid black 1px;
border-top: solid black 0px;
border-right: solid black 1px;
border-bottom: solid black 1px;
}
#tab-1, #div-1 {
background-color: pink;
}
#tab-2, #div-2 {
background-color: salmon;
}
#tab-3, #div-3 {
background-color: khaki;
}
</style>
</head>
<body>
<div id="horiz-tab-menu">
<xf:trigger id="tab-1" appearance="minimal">
<xf:label>Tab 1 Title</xf:label>
<xf:toggle case="case-1" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger id="tab-2" appearance="minimal">
<xf:label>Tab 2 Title</xf:label>
<xf:toggle case="case-2" ev:event="DOMActivate" />
</xf:trigger>
<xf:trigger id="tab-3" appearance="minimal">
<xf:label>Tab 3 Title</xf:label>
<xf:toggle case="case-3" ev:event="DOMActivate" />
</xf:trigger>
</div>
<xf:switch>
<xf:case id="case-1" selected="true">
<div id="div-1">
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
menu 1 content menu 1 content menu 1 content menu 1 content
</div>
</xf:case>
<xf:case id="case-2">
<div id="div-2">
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
menu 2 content menu 2 content menu 2 content menu 2 content
</div>
</xf:case>
<xf:case id="case-3">
<div id="div-3">
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
menu 3 content menu 3 content menu 3 content menu 3 content
</div>
</xf:case>
</xf:switch>
</body>
</html>
</big>
| |||