About:
A simple widget library using XML and some CSS3 features.
Faults and problems:
- Internet Explorer 9 does not support CSS3's border-image at all. Rounded CSS borders would not quite do it in this case (the double corners and shared horizontal border) and I did not want to add extra elements just for the corners.
- CSS(3) has no offset option for background-image. I was forced to add a background color on the image itself for the rounded corners in the tab bar, and thus it only works as long as the background is white. I did not want to add extra elements for the edges.
- CSS(3) has no partial repeat option for background-image, forcing use of multiple images or nested elements. Because the individual images have a different width, due to patterns, I was forced to use separate image files.
- CSS(3) has no reverse direction options for background images. CSS3's transforms does not solve the issue as it effects not only the image.
- CSS(3) has no pseudo classes for mouse events other than hovering, requiring scripts to handle such events.
- CSS(3) has a target pseudo class, but it seems to not be supported for custom namespaces (see test case).
- Using CSS3's support for multiple background-images requires multiple URLs even if the same image file is used more than once.
- JQuery's DOM ready event is not fired in certain browsers when served as "application/xml" (see test case).
- There seems to be a problem with changing tabs. Content is not rendered.
Modifications:
- 2012-02-29: Started working on script for TabBox.
- 2012-02-29: Now serving as "application/xml".
- 2012-02-12: Fixed a small quirk with TabMenu in Google Chrome.
- 2012-02-10: Added horizontal orientation option to Menu.
- 2012-02-10: Modified the tab graphics somewhat.
- 2012-02-07: Added Menu.
- 2012-02-07: Added TabMenu.
- 2012-02-06: Declared some missing font rules.
- 2012-02-06: Implemented support for tabs below the content.
- 2012-02-05: Implemented camel-case naming convention.
- 2012-02-05: Added tab bar orientation option.
- 2012-02-05: Added some missing anti-aliasing.
- 2012-02-05: Combined most of the image files.
- 2012-02-05: Added corner and tab bar on the right side as well.
- 2012-02-05: Removed the dashed line on selected tab because the pattern might not match the element width.
Ideas:
- Implement a fix for IE's lacking border-image support.
- Implement a vertical TabBar orientation.
- Further explore usage of XML schemas to validate UI templates.