JX - jQuery Extension OO Library

About JX

Only 23K minified
True Object Oriented jQuery Extension
Complex layouts by nesting Containers
Whole application configurable
'Custom event' driven programming
Extendable via Object Oriented Inheritance.
Drag and Drop

Latest version JX-Base 0.6 is a scaled down version only for layout and works with the latest jQuery 1.3.1. and works on smartphones like iphone and Nokia series 60 phones. It is only 7k minified. For the complete version you need version 0.52.

The objective here is an extremely small footprint widget library yet powerfull enough to have all the basic capabilities of a large library. In concrete terms the objective is
jQuery min + JX min <= 100k
Right now jQuery min + JX min is only 73k.

JX is a jQuery extension Library. All JX components/widgets are themselves extensions of jQuery. So all jQuery methods are available to JX components by default. You can extend JX via inheritance.

JX allows configuration of all components via config options. You can configure a whole application via the JX.Viewport. This page is completely configured via the viewport, so are the border layout, feed viewer examples.

Look at "Quick Start" to see how it works. Also look at the source code of this page and the Feed Viewer example.

Works on all major browsers. IE6, IE7, Firefox, Safari, Chrome, Opera

Quick Start

Let us look at the Border Layout example and look at the source code of this file. It is assumed that you have some knowledge of javascript and jQuery.

$(document).ready(function() {
    var viewport = new JX.Viewport({
        css: {padding: '0px', margin: '0px'},
        items: [{
            height: 50,
            css: {backgroundColor: '#aaaaaa', padding: '20px'},
            text: $('#north').text(),
            fitWidth: true
        },{
            jxtype: 'columncontainer',
            fitHeight: true,
            items: [{
                text: $('#east').text(),
                width: 150,
                css: {backgroundColor: '#cccccc', padding: '20px'},
                fitHeight: true
            },{
                text: $('#center').text(),
                fitWidth: true,
                css: {backgroundColor: '#eeeeee', padding: '20px', overflow: 'hidden'},
                fitHeight: true
            },{
                text: $('#west').text(),
                width: 150,
                css: {backgroundColor: '#cccccc', padding: '20px'},
                fitHeight: true
            }]
        },{
            height: 50,
            css: {backgroundColor: '#aaaaaa', padding: '20px'},
            text: $('#south').text(),
            fitWidth: true
        }]
    });
});                               
</script>                                                               
</head>                                                                 
<body> 
<div id='north'>This is the north panel. It has a fixed height. It extends to the width
of Viewport.</div>
<div id='east'>This is the east panel. It has a fixed width. It extends to the height
of the second item in the viewport.</div>
<div id='center'>This is the center panel. It extends to the remaining width and height
of the viewport. When you
resize your browser, you will see center shrinking or expanding, north & south's height remain
same, east and west's width remain same.</div>
<div id='west'>This is the west panel. It has a fixed width. It extends to the height of
the second item in the viewport.</div>
<div id='south'>This is the south panel. It extends to the width of Viewport.</div>
</body>                                                                 
</html>

First you will need to load jquery 1.2.6 and the jx.js files via script tags. The $(document).ready functions starts the program. There is only one statement in the program
var viewport = new JX.Viewport({ .... }).
The viewport contructor takes one config object as its argument. All JX Components take a config object as the argument to its constructor. The config object contains key value pairs. In this case the viewport has two key value pairs.
css: {padding: '0px', margin: '0px'}
items: [{
...
...
}]
The first one is a css value to be applied to the viewport. The Viewport represents the body element. In jQuery you would have done
$('body').css({padding: '0px', margin: '0px'});
So you see that the config objects key is actually a jQuery function name and the value is the argument to the jQuery function. All jQuery functions can be called via the config options like this! This is what makes JX unique. Also JX adds some of its own config options or functions.
The items: config option takes array of component config options which will be added to the component. It has three components which are layed out vertically one below the other. The first item in the item array is

{
    height: 50,
    css: {backgroundColor: '#aaaaaa', padding: '20px'},<
    text: $('#north').text(),
    fitWidth: true
}

height, css and text are all jQuery functions that will be called on the component. This component is the north panel of the demo. fitWidth: true is a JX config option which sets the component width to the viewports width. The option text takes the text of the "#north" element. This is interesting because the first thing the viewport does is hide all your content in the body element. Your content in the body will be visible only to those clients who have javascript disabled in their browsers. So JX is unobtrusive also!
The second item is a Column Container which lays out its component horizontally. jxtype is a JX config option that specifies the component type in this case 'columncontainer'. We didnt specify jxtype for the first item because default type is 'div'. jxtype can be types defined by jx like 'container', 'panel', 'frame', 'component' each one corresponding to the JX Class, or jxtype can be any dom element node name like 'div', 'span', 'input' etc.
fitHeight: true has been set for the second item. This is the second item of the container (which in this case is the viewport). What fitHeight does is that it expands the component to the remaining height of its parents after subtraction the heights of its siblings, in this case items 1 and 3.
The third item is the south panel.
The 2nd item, column container, has 3 items corresponding to east, center and west panels. The center panel specifies fitWidth: true. Inside a column container fitWidth will expand the item to take up the parents width minus the sibling widths.
You can only set fitHeight or fitWidth to one sibling in a list of children.

In this application there are no events to show. But applications are event driven. You can see the source code for this page or the feed viewer example to see an example of event driven application
To make you application event driven bind your component to a custom event and you can trigger the event from any where in your application and the bound function will be called. This is possible on JX components because JX Containers propagate the custom events to its children and so on. In the case of this page the panel your are reading now is bound to the event "loadcenter". The links on your left and right fire the event like this
viewport.trigger('loadcenter', [data ...]);
The variable vieport is available everywhere in the application because it was defined outside of the viewport config. "var viewport = ".