jXs plug-in for jQuery

Last Updated Sept/13/2006
Tested to work with jQuery 1.1.1
Get the jXs plug-in code here less than 4k
For a better look checkout the jXs demo page

Short History

jXs was originally inspired by Mike Alsup's taconite parser port to jQuery. My first attempt was miniTaco which was satisfactory, but a little fat IMHO. I tryed to take the core Ideas for that project into jXs.

General Goals

My focus with this plug-in was to make it user extensible as well as fast and lean. jXs also still holds to true to the original idea behind taconite. Which was the abandonment of the innerHTML technique. All nodes are built from the ground up with traditional DOM methods.

My personnel goal for jXs was to bring uniformity to my AJAX returns, and make my apps more maintainable. A typical return could look like this

<root>
<append select="#nav">
<li class="menuitem" title="click here to start"> Start Processing </li>
</append>
</root>

Another goal was to try and let jQuery and its plug-ins do most of the work.

Supported Tags

jXs supports most all of the basic jQuery DOM function. The tag names a dictated by the jQuery methods. for example the above code would generate this call to jQuery jQuery("#nav").append(htmNodes);. The jXs tags are case insitive, but the jQuery methode are not, so camel cased methods require handler function. Handler function allow jXs to implement more of the complex jQuery function, or allow the user to override the defaut behaviuor of a tag. For instace to add effects to APPEND. Addtional tags can be added to jXs by simply adding plug-in to jQuery.

Unsupported

Inline styles and inline scripts are not supported. It's my philosophy that in any sizable project the style, script and presentation should be separated, and to add support for these would increase the code by at least a third. That said the SCRIPT tag is supported and you could easily write a handler for the jQuery.fn.css method

How does this work

It starts by setting up a callback that pass the returned XML and optional custom handler object to jQuery.jXs. jXs takes the passed handlers and extends its own to include them. Then jXs collects all the child elements of the documentElement and begins iterating through them. Each child element represents a jXs parser command node. Command nodes can not be nested. These commands are often directly associated with jQuery methods or plug-ins. If a command node contains child elements they are assumed to be HTML and are converted to HTML nodes and than pass to the command. If a handler is available that matches the command name it is called to complete the command and passed the command node and html node collection. If there is no handler the command is assembled in one of two ways then evaled.

How do I add new tags

You can add new tags the same way you add new plugs to jQuery.

jQuery.fn.replacein = function(a) {
return this.empty().append(a);
};

How do I alias or change tag names

To alias a tag name create an object and set the property name equal to the tag name you want to use and set the value to a function that can interface with the jQuery method you want. The handler object can then be pass to jXs as the second argument. IMHO handlers should not actual act upon the document or nodes but prep the variables for consummation by a jQuery method

What are handlers and why does jXs need them

Handlers allow you to alias tag names, or overide default tag behaviours, or interface with function that deviate from jXs standard interface methods. jQuery methods that are camel cased require handles because xml command nodes are case insensitive, but javascript is not.