Inside Technique : Using Dynamic Expressions : Style based on Structure

In addition to modifying the style based on raw content you can modify the style based on the structural content. For example, a popular use of Dynamic Styles is to create an expanding and collapsing outline. Implementing an outline is extremely simple - you just swap the display property. Below is a simple example (IE4 or later - click on the list-items):

• Item 1
  • Item 1a
  • Item 1b
• Item 2
  • Item 2a
    • Item 2ai
    • Item 2bii
  • Item 2b

In IE4 and later you can expand and collapse the list-items that have children. We created this list using a very simple function:

<STYLE>
  #outline {cursor: default}
  #outline UL {display: none}
</STYLE>

<SCRIPT>
function displayChild() {
  var elChild = event.srcElement.children.tags("UL")
  if (elChild.length>0) 
    elChild[0].style.display = elChild[0].style.display == "" ? "block" : ""
}
</SCRIPT>

<UL ONCLICK="displayChild()" ID=outline>
  <LI>Item 1
    <UL>
      <LI>Item 1a
      <LI>Item 1b
    </UL>
  <LI>Item 2
    <UL>
      <LI>Item 2a
        <UL>
          <LI>Item 2ai
          <LI>Item 2bii
        </UL>
      <LI>Item 2b
    </UL>
</UL>

This example has one problem. As a user, you can't easily distinguish between the list elements that can be expanded and those that cannot. Traditionally this is solved by modifying the HTML with hard-coded attributes identifying the list-items with and without children. With Dynamic Expressions, we can provide custom rendering without touching the HTML. We accomplish this by defining the default appearance of all the list-items. For this example, we turn off the bullet on all list-items using the CSS list-style property:

  #outline2 LI {list-style: none}

This causes all the list-items to be displayed without any bullets. Next we want to add the expression that displays the bullet only for elements that have sub-lists. To accomplish this we need to determine which list-items have children and modify the list-items appearance. The easiest way to do this is to apply a style to all the sub-lists. This style uses an expression that sets the list-style of the parent item:

<STYLE>
  #outline2 LI {list-style: none}
  #outline2 UL {display: expression(setParent(this))}
</STYLE>
<SCRIPT>
function setParent(el) {
  // Change the list-style of the sub-menus parent.
  el.parentElement.style.listStyle = "square"
  return "none"	
}	
</SCRIPT>

Below is the complete solution. As you expand the list only list-items with children have a bullet:

• Item 1
  • Item 1a
  • Item 1b
• Item 2
  • Item 2a
    • Item 2ai
    • Item 2bii
  • Item 2b

<STYLE>
  #outline2, #outline {cursor: default}
  #outline2 LI {list-style: none}
  #outline2 UL {display: expression(setParent(this))}
</STYLE>

<SCRIPT>
function displayChild() {
  var elChild = event.srcElement.children.tags("UL")
  if (elChild.length>0) 
    elChild[0].style.display = elChild[0].style.display == "" ? "block" : ""
}

function setParent(el) {
	el.parentElement.style.listStyle = "square"
	return "none"	
}	
</SCRIPT>

<UL ONCLICK="displayChild()" ID=outline2>
  <LI>Item 1
    <UL>
      <LI>Item 1a
      <LI>Item 1b
    </UL>
  <LI>Item 2
    <UL>
      <LI>Item 2a
        <UL>
          <LI>Item 2ai
          <LI>Item 2bii
        </UL>
      <LI>Item 2b
    </UL>
</UL>

You have now seen three different applications of Dynamic Expressions. Dynamic Expressions are another great way to separate the style of your document from the structure. Be sure to check out Microsoft's MSDN on-line for more information on Dynamic Expressions.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.