Page 1 of 1

Custom tags for custom JavaScript UI

Posted: Fri Aug 24, 2007 8:07 am
by josamoto
I understand that with XHTML/XML it is possible to create custom tags. I've written some JavaScript code that creates a calendar, for example I can instantiate and create the calendar with:
HTML Code:

Code: Select all

<script>
      var myCalendar = new funkyCalendar('today'); myCalendar.render();
</script>
I basically want to wrap this in a custom tag and have the calendar created by means of something like:
XHTML Code:

Code: Select all

<funkyCalendar selectedDate='today' />
I know this is possible, as I've seen people creating their own markup languages such as OpenLazlo, see http://www.openlazlo.org.

I am creating a JavaScript library with skinnable UI components, and would like to use custom tags to instantiate the controls. More examples of what I am aiming for:

XHTML Code instantiating a funkyList control with funkyListItem items:

Code: Select all

<h1>Please select your favourate fruit :</h1>
   <funkylist>
      <funkylistitem>Apples</funkylistitem>
      <funkylistitem>Bananas</funkylistitem>
      ...
      <funkylistitem>Oranges</funkylistitem>
<funkybutton action="submit">Click Me</funkyButton>
I believe that the technologies used to implement the above will be PHP + JavaScript + XML + XHTML.

Posted: Fri Aug 24, 2007 8:41 am
by Zoxive
It would be easier, and valid xhtml if you just give it a certain class name.

So the JavaScript just looked for all html nodes with the class name as 'funkycalendar'.

Posted: Fri Aug 24, 2007 10:48 pm
by Kieran Huggins
I'm against using class names for this kind of thing, but that shouldn't stop you from using custom attributes. They're legal, and they work!

Code: Select all

<div fcal="week">
   <div fcal="day" name="monday"/>
   <div fcal="day" name="tuesday"/>
   //...
</div>

Posted: Sat Aug 25, 2007 5:49 am
by feyd
Kieran Huggins wrote:I'm against using class names for this kind of thing, but that shouldn't stop you from using custom attributes. They're legal, and they work!

Code: Select all

<div fcal="week">
   <div fcal="day" name="monday"/>
   <div fcal="day" name="tuesday"/>
   //...
</div>
Since when are they legal? They fail validation. Javascript can inject them legally, but that is another thing.

Posted: Sun Aug 26, 2007 11:37 am
by Kieran Huggins
While they technically fail validation, every browser natively supports their use. Besides, you can always modify the DTD if you really, really want to pass validation (for some reason).

I figure this is one of those innerHTML-type arguments where the spec has been bypassed/ignored/supplemented by everyone for a common good.

Posted: Wed Aug 29, 2007 1:40 am
by josamoto
Thanks [s]4[/s] for the replies guys. The closest thing to what I want to accomplish was mentioned on another forum, this guys indicated that XML Islands would be the best option, and then have a JavaScript read the tag and simply render the contents.
[url=http://forums.devnetwork.net/viewtopic.php?t=30037]Forum Rules[/url] Section 1.1 wrote:11. Please use proper, complete spelling when posting in the forums. AOL Speak, leet speak and other abbreviated wording can confuse those that are trying to help you (or those that you are trying to help). Please keep in mind that there are many people from many countries that use our forums to read, post and learn. They do not always speak English as well as some of us, nor do they know these aberrant abbreviations. Therefore, use as few abbreviations as possible, especially when using such simple words.

Some examples of what not to do are ne1, any1 (anyone); u (you); ur (your or you're); 2 (to too); prolly (probably); afaik (as far as I know); etc.