Custom tags for custom JavaScript UI

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
josamoto
Forum Commoner
Posts: 41
Joined: Fri Aug 24, 2007 6:57 am
Location: South Africa
Contact:

Custom tags for custom JavaScript UI

Post 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.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Post 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'.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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.
User avatar
josamoto
Forum Commoner
Posts: 41
Joined: Fri Aug 24, 2007 6:57 am
Location: South Africa
Contact:

Post 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.
Post Reply