----- Original Message -----
From: "Ian Hickson" <[EMAIL PROTECTED]>
To: "Matthew Raymond" <[EMAIL PROTECTED]>
Cc: "WHAT WG List" <[EMAIL PROTECTED]>
Sent: Tuesday, February 27, 2007 9:38 PM
Subject: Re: [whatwg] Ideas regarding Web Applications 1.0
....
On Tue, 23 Nov 2004, Matthew Raymond wrote:
I'd rather not depend on XBL to do something as basic and common as
tabs. It's entirely possible that some WA1 clients may not support XBL.
I'd prefer that we be able to implement tabs with little more than HTML
and CSS.
I'm not convinced tabs are as simple as you say.
....
That said, if I could somehow link navigational lists to <switch>:
| <div id="tabbox">
| <nl orientation="horizontal">
| <h>Contents</h>
| <li><a href="#introduction">Introduction</a></li>
| <li><a href="#conformance">Conformance</a></li>
| <li><a href="#references">References</a></li>
| </nl>
|
| <switch>
| <section id="introduction">
| <p>Introduction contents...</p>
| </section>
| <section id="conformance">
| <p>Conformance contents...</p>
| </section>
| <section id="references">
| <p>References contents...</p>
| </section>
| </switch>
| </div>
The above markup is fairly obvious. The <nl> element creates a serious
of blocks that can be styled as buttons or tabs. These "tabs" contain
hyperlinks to sections in the <switch> element. When the hyperlinks are
clicked, the respective section is made active.
....
I'm definitely not convinced that it is a _semantic_ of that document that
the three sections are mutually exclusive. Why would I never want to
compare the references and the conformance section side-by-side?
....
Yeah. At the moment we've just dropped the tab feature. I think a good
argument can be made for saying it's presentational, and I didn't see any
good proposals for how to put it into markup.
--
Ian Hickson U+1047E )\._.,--....,'``. fL
http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,.
Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'
Tabs are not more than styled group of <button type="radio">
(tabs per se) binded with some visibility attribute of
correspondent panels.
"Ideologically" tab/panel pair is close to <label for=...> and
correspondent <input> - click on first causes some event happen
on second.
The simplest way to define it is to use something like:
<button type="radio" name="tabs"
bind=":checked; $(#panel1):expanded"> First tab </button>
<button type="radio" name="tabs"
bind=":checked; $(#panel2):expanded">Second tab</button>
Where 'bind' connects :checked state flag of the button
with :expanded state of correspondend panel
so CSS will be able to style it appropriately.
Tabs need to be presented in wide range of ways so I think
to have label of the tab combined with the panel in single
DOM element/entity will simply do not work.
There are also other cases when state of 'master' element
(frequently it has radio button behavior) needs to be mapped
on state of another 'slave' element so to have some simple
binding mechanism will be a good thing.
As an example, "collapsible list":
http://terrainformatica.com/htmlayout/images/animation-slide-bar.jpg
can also be defined by such simple 'bind' attribute.
Ability to style buttons + simple bind(what; with-what) will cover
surprisingly many cases implemented now by scripts only.
Andrew Fedoniouk.
http://terrainformatica.com
