Activity Not Available
0
I Use This!

Project Summary

AboutHSJN is a lightweight jQuery DOM Builder plugin designed around a parser for a highly portable JSON-based HTML Snippet notation. The plugin itself is merely the logic engine which takes a Javascript object of properties and creates real DOM nodes.

Using HSJNHSJN has a couple key features which make it ideal:

Usually shorter than the HTML it generates Simple jQuery selector style tag, class, and ID declaration Easily add simple text or append children (or both!) to any node within an HSJN tree. Create complex jQuery chains right inside an HSJN object. Easily define attributes and custom CSS styles easily. Highly portable, can be parsed by the jQuery JSON parser, which means HTML DomBuilder snippets can be sent through AJAX!

ExamplesLets say you have the following, straightforward html snippet.


" and "$", respectively. See below.) An "Array" is treated as a nest for children HSJN elements. If the array is one level deep (['ul']) it is treated as appending a single child. If the array is two levels deep ([ ['li'], ['li'] ]), each element within the array will be appended as a child of the current element, and as siblings of each other.

Declaring Attributes and StylesWith any HSJN object, you have the opportunity to pass in attribute values, and custom CSS styling. HSJN treats a core level Object ( {} ) as an attribute group. CSS styling must be contained within the core level object, indexed by the character "".

An example of adding attribute values to the div:

['div#ui-tabs-container.ui-tabs', {
ref: '#someCSSSelectorForOtherUse',
_: { // CSS Styles
backgroundColor: '#565656',
position: relative
}
},
['ul',
['li',
['a', {href: 'site/page1.html', title: 'Click to Load!'},
['span', 'Load Page 1']
]
]
]
]Create jQuery ChainsLets say that we wanted to bind some jQuery methods to the snippet. We can easily add any jQuery methods (ones accessible to $('...').methodName()) to the snippet:

['div#ui-tabs-container.ui-tabs', {
ref: '#someCSSSelectorForOtherUse',
_: { // CSS Styles
backgroundColor: '#565656',
position: relative
},
$: {
appendTo: ['#someElem'],
tabs: [{ cache: true }],
bind: ['my-custom-event', 'myCallback'],
trigger: ['my-custom-event']
}
},
['ul',
['li',
['a', {href: 'site/page1.html', title: 'Click to Load!'},
['span', 'Load Page 1']
]
]
]
]Now, when the snippet is done building the HTML and children nodes, it will append itself to the specified element, make itself a tabs() widget, bind a custom event using a globally accessible function named "myCallback", then trigger it.

When declaring jQuery chains, there are a few important things to note.

You have the ability to declare "dot namespaces" to designate multiple calls to a single function within the hash. (ex. $:{'tabs.new': [], 'tabs.add': ['add', ...], 'tabs.add2': ['add', ...]) If you pass in a string, HSJN will assume you're referencing a function, and will attempt to find it. HSJN will begin looking for your function as a child of "window". (ex. $:{click: 'myClickHandler'}) If you need to use a function internal to an object, you can scope it in. (ex. $:{click: 'myClickHandler::myObject'} will look for window.myObject.myClickHandler) If you pass in an array, jQuery will assume each node of the array is a parameter for the function. (ex. $:{bind: ['click', 'myFunction']) Within an array, the HSJN parser will attempt to resolve any string it finds to a function. If it cannot, it will assume its a flat string, and not a function reference. If you pass in null, undefined, or false as the value of any object, it will simply call the function. (ex $:{show: null} is equivalent to $('...').show();) If you pass in an actual function, it will use the actual function as the parameter.

Direct Integration with jQueryIn addition to the HSJN core parser, ( which can be accessed by calling $.hsjn() ), the plugin also features an element modifier, for direct appending. $('#someElement').hsjn( myHSJNObject ) will parse myHSJNObject, and append it as a child of #someElement.

Share

 No code available to analyze

Open Hub computes statistics on FOSS projects by examining source code and commit history in source code management systems. This project has no code locations, and so Open Hub cannot perform this analysis

Is this project's source code hosted in a publicly available repository? Do you know the URL? If you do, click the button below and tell us so that Open Hub can generate statistics! It's fast and easy - try it and see!

Add a code location

Community Rating

Be the first to rate this project
 
Click to add your rating
   Spinner f6ecff617ec2ba7f559e6f535cad9b70a3f91120737535dab4d4548a6c83576c
 
Review this Project!
Sample ohloh analysis 84f338d459254c9abef212196db5fed5d219bf28c1fbaba6706f7f25d9e5ce29