Best jQuery XML Plugins & Tutorials with Demo

    jStorage – store data locally with JavaScript

    jStorage - store data locally with JavaScript

    jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved.jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.

    jStorage makes use of HTML5 local storage where available and userData behavior in Internet Explorer older versions. Webkit SQLite is not supported.

    Javascript Turn HTML Tables Into Advanced Editable Components : EditableGrid

    Turn HTML Tables Into Advanced Editable Components : EditableGrid

    EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.


    You can use the EditableGrid library in two ways:

    1. Hook up to an existing HTML table
    2. Build your grid from an XML description of the table structure and contents

    Xml Driven Vertical News Scroller Script Using jQuery vScroller

    Xml Driven Vertical News Scroller Script Using jQuery vScroller

    Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.

    Today, we are featuring vScroller, a free XML-driven vertical news scroller for websites and blogs. Powered by jQuery, vScroller displays categorized and color-code content is a vertical scroll. Feeds come from standardized XML file and styled with simple CSS3 for a clean and attractive interface.

    BIGrid a Fixed Rows & Fixed Columns table in jQuery

    BIGrid a Fixed Rows & Fixed Columns table in jQuery

    BI Grid is designed to present your data, especially in the reports for enterprises.The idea comes from the BI system I produced months ago. It would be able to edit data easily, drill down to details easily and ajax enabled. Other good features will be supported in the future.

    Features to be supported:

    • It has two modes: View & Edit. The edit mode enable users to edit the data in the grid through Ajax.
    • Init data by using Ajax.
    • Drill down to details by using Ajax.
    • Support JSON & XML data types.
    • Support Multi-skins.

    XML Tree with jQuery

    XML Tree with jQuery

    XMLTree is a utility for visualising and traversing XML in tree format.

    The script creates the tree from a specified XML file or from manually-fed XML. Callback functions can be specified to fire as you traverse the tree, to which are automatically passed the node you clicked, and its XPath.

    HTML5 File Uploads with jQuery

    jQuery HTML5 File Uploads

    Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

    The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on the server, but you could improve it any way you like.

    jQuery Multi-level Photo Map

    jQuery Multi-level Photo Map

    This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right. The images can be viewed in medium size mode or in full lightbox-like mode. The map has a fullscreen option which will show the thumbnails of the images in their location.

    XML banner fader in jQuery

    jQuery XML banner fader

    More jQuery animation! This one puts a fading set of banners on your page. It uses simple XML to tell the javascript what banners to pull in, and the URLs you want the banners to link to. This is ideal for linking to top featured stories.

    MapIt-Lite a customizable google map in jQuery

    MapIt-Lite a customizable google map in jQuery

    A customizable Google map designed to make work with your locations a breeze.

    • One click map locator
    • Easy to use XML file
    • Customizable jQuery themes
    • Clean, simple, organized map locators
    • Support and much more…

    Uber-customsiable video carousel with jQuery

    This carousel and featured-content rotator excels in two areas: firstly, it serves both video and graphic content, and secondly, it is super-customisable in terms of where the three components of the carousel – namely the slides, the tabs and the ‘more info’ area – are positioned within it. An XML file controls all behavioral and visual aspects of the carousel, though default settings can be overridden at the point of instantiation.