W3C home > Mailing lists > Public > whatwg@whatwg.org > June 2005

[whatwg] [WA1] <sl> - The Selection List element

From: Matthew Raymond <mattraymond@earthlink.net>
Date: Thu, 02 Jun 2005 10:13:25 -0400
Message-ID: <429F1405.2000707@earthlink.net>
    I'm proposing a new element named <sl>. This element is a list where 
the list items become selected when the items or their child elements 
are activated (i.e. someone clicks on them). Here's an example:

| <sl>
|   <li><a href="#s1">Section 1</a></li>
|   <li><a href="#s2">Section 2</a></li>
|   <li><a href="#s3">Section 3</a></li>
| </sl>

    In the example above, you have a list of links where the containing 
list item is selected when someone clicks on the link. The presentation 
of the selected items is handled through CSS:

| li:selected { /* Your style here. */ }

    By default, the selection would be mutually exclusive. In other 
words, the default for clicking on a list item is that it would become 
the ONLY selected item, similar to <select>. Also similar to the 
<select> element, you could specify a |multiple| attribute to select 
more than one item:

| <sl multiple="multiple">
|   <li>Name 1</li>
|   <li>Name 2</li>
|   <li>Name 3</li>
| </sl>

    If multiple items are selected, and the user performs a drag
operation on a list item, the drag would automatically be performed on
all list items selected rather than just the list item being dragged.

    If you want to use this element to create a tabbed control, it would 
look like this:

HTML:
| <sl>
|   <li selected="selected"><a href="#s1">Section 1</a></li>
|   <li><a href="#s2">Section 2</a></li>
|   <li><a href="#s3">Section 3</a></li>
| </sl>
|
| <switch>
|   <section active="active" id="s1">[...]</section>
|   <section id="s2">[...]</section>
|   <section id="s3">[...]</section>
| </switch>

CSS:
| sl > li { appearance: tab; display: tab }
| sl > li:selected { display: front-tab }

    The idea is that a hyperlink to a <section> within a <switch> will 
automatically set that <section> as active. Yes, I know that this makes 
<tabbox> pointless, but I don't see <tabbox> as having any serious 
advantages, especially when you have <switch>. With a very small amount 
of Javascript and CSS, you can make an unordered list and a <switch> 
behave in exactly the same manner as <tabbox>, so what do we need 
<tabbox> for?

    That's all I have to say for now. I'll probably have more later, but 
I just want to get some feedback right away.
Received on Thursday, 2 June 2005 07:13:25 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:58:41 UTC