Feb 23, 2010

Custom HTML tags with Jquery

A colleague and myself were discussing it. We discussed it could be used for styling with css but then decided to use the span tag with a class instead.
Do you ever wish you could create your own tag what would behave just like you want? Well you can. there are two options -

Combine SPAN element with CSS to create your own custom tags

What does SPAN do? Nothing. That's the power of it. Since it has no defined display, you can write your own rules and apply them as you wish. Use either a CLASS or ID selector.

Use jquery to define your custom tags

Yes it is possible, you can use jquery to give definition to your custom html tags. Suppose you need to show a page with different colored text, beside defining different classes for different colors you simply use this code -

<script type="text/javascript">
$(document).ready(function() {
 $("*").each(function(e) {
  this.style.color = this.nodeName;
  });
 });

</script>

Write your custom tags like this -

<red>I am red text</red>
<green>i am the green</green> 

I know this is not according to the rules, what you think??


By : Motyar+ @motyar