Re: xforms:subpage

On Mon, 31 Jan 2005 16:05:55 +0100 (CET), secam secam <secam2004@yahoo.fr>  
wrote:

> Is there a simple way to create tabs for a page in xform?

Here is the underlying code:

<body>
	<xf:trigger id="togglehome" appearance="minimal">
		<xf:label>Home</xf:label>
         	<xf:toggle case="home" ev:event="DOMActivate"/>
	</xf:trigger>
	<xf:trigger id="toggleproducts" appearance="minimal">
		<xf:label>Products</xf:label>
         	<xf:toggle case="products" ev:event="DOMActivate"/>
	</xf:trigger>
	<xf:trigger id="togglesupport" appearance="minimal">
		<xf:label>Support</xf:label>
         	<xf:toggle case="support" ev:event="DOMActivate"/>
	</xf:trigger>
	<xf:trigger id="togglecontact" appearance="minimal">
		<xf:label>Contact</xf:label>
         	<xf:toggle case="contact" ev:event="DOMActivate"/>
	</xf:trigger>
	<xf:switch>
		<xf:case id="home">
			<h1>Home</h1>

			<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
			nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
			sed diam voluptua.</p>

		</xf:case>
		<xf:case id="products">
			<h1>Products</h1>
                   <p>....</p>
		</xf:case>
		<xf:case id="support">
			<h1>Support</h1>
                   <p>....</p>
		</xf:case>
		<xf:case id="contact">
			<h1>Contact</h1>
                   <p>....</p>
		</xf:case>
	</xf:switch>
</body>

Note that implementations are beginning to use 'appearance="minimal"' to  
make clickable areas of text, rather than a button.

Getting it to look like tabs is just a question of getting the CSS right,  
which is basically colouring each button and its related heading the same

		#togglehome, #home h1 {background-color: blue}
		#toggleproducts, #products h1 {background-color: red}
		#togglesupport, #support h1 {background-color: yellow}
		#togglecontact, #contact h1 {background-color: #0f0}

and changing font sizes, padding, and the like to something suitable (see  
attached image).

I suppose we should create a tutorial on 'cross-browser styling' since  
some use CSS1 and CSS2, and some use CSS3, and they have different ways of  
addressing namespaces.

(Hint: the CSS selector 'trigger' means any element called trigger,  
regardless of namespace.
To address a particular element in a namespace in CSS1 and 2, you have to  
write

	xf\:trigger

and your document has to use the namespace prefix 'xf' (i.e. <xf:trigger>  
and not <xforms:trigger>).

In CSS3 you write

	@namespace xf url(http://www.w3.org/2002/xforms);

(don't forget the semicolon) and then use the selector

	xf|trigger

which matches regardless of the prefix you use in the document.

End of hint)

Hope this helps.

Best wishes,

Steven Pemberton

Attachments

Received on Tuesday, 8 February 2005 13:36:43 UTC