[whatwg] Ideas regarding Web Applications 1.0

[Andrew Fedoniouk]

----- Original Message ----- 
From: "Ian Hickson" <ian at hixie.ch>
To: "Matthew Raymond" <mattraymond at earthlink.net>
Cc: "WHAT WG List" <whatwg at whatwg.org>
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