W3C home > Mailing lists > Public > www-forms@w3.org > February 2005

Re: xforms:subpage

From: Steven Pemberton <Steven.Pemberton@cwi.nl>
Date: Tue, 08 Feb 2005 14:36:37 +0100
To: "secam secam" <secam2004@yahoo.fr>, www-forms@w3.org
Message-ID: <opslvr3bx8smjzpq@r600.lan>
On Mon, 31 Jan 2005 16:05:55 +0100 (CET), secam secam <secam2004@yahoo.fr>  

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

Here is the underlying code:

	<xf:trigger id="togglehome" appearance="minimal">
         	<xf:toggle case="home" ev:event="DOMActivate"/>
	<xf:trigger id="toggleproducts" appearance="minimal">
         	<xf:toggle case="products" ev:event="DOMActivate"/>
	<xf:trigger id="togglesupport" appearance="minimal">
         	<xf:toggle case="support" ev:event="DOMActivate"/>
	<xf:trigger id="togglecontact" appearance="minimal">
         	<xf:toggle case="contact" ev:event="DOMActivate"/>
		<xf:case id="home">

			<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 id="products">
		<xf:case id="support">
		<xf:case id="contact">

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  


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


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

End of hint)

Hope this helps.

Best wishes,

Steven Pemberton

(image/png attachment: tabbed.PNG)

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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:36:14 UTC