Get Started

The w2ui is a JavaScript UI. Working knowledge of JavaScript, HTM, and CSS is required. You can use the library with any server side language (NodeJS, php, Java, .NET, perl, etc.). It can render data returned from the server or generated in the browser with JavaScript.

Download

You can download nightly builds that are available on github at /master/dist. There 2 files that you will need, w2ui.js and w2ui.css. Those files need to be included in every page where you want to use the library.

Download W2UI 1.5 Open GitHub Project

What is Included

The following JavaScript components are included:

Grid - the most feature complete grid in existance
Forms - declarative forms, auto-generated HTML
Layout - user full "real estate" available
Toolbars - check/radio/regular buttons, drop menu, checkboxes, etc.
Sidebars - navigation and sub-navigation
Tree - sidebar can function as a tree
Tabs - modern looking tabs
Popup - alerts, confirmation boxes or general purpose popup
Fields - input fields upgraded
Utilitis - things I do not want to reimplement in each project

Working Example

Below is a complete example of HTML page that uses grid widget: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.5.min.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script type="text/javascript" src="http://w2ui.com/src/w2ui-1.5.min.js"></script> </head> <body> <div id="grid" style="width: 100%; height: 250px;"></div> </body> <script> $(function () { $('#grid').w2grid({ name: 'grid', header: 'List of Names', columns: [ { field: 'fname', text: 'First Name', size: '30%' }, { field: 'lname', text: 'Last Name', size: '30%' }, { field: 'email', text: 'Email', size: '40%' }, { field: 'sdate', text: 'Start Date', size: '120px' } ], records: [ { recid: 1, fname: "Peter", lname: "Jeremia", email: 'peter@mail.com', sdate: '2/1/2010' }, { recid: 2, fname: "Bruce", lname: "Wilkerson", email: 'bruce@mail.com', sdate: '6/1/2010' }, { recid: 3, fname: "John", lname: "McAlister", email: 'john@mail.com', sdate: '1/16/2010' }, { recid: 4, fname: "Ravi", lname: "Zacharies", email: 'ravi@mail.com', sdate: '3/13/2007' }, { recid: 5, fname: "William", lname: "Dembski", email: 'will@mail.com', sdate: '9/30/2011' }, { recid: 6, fname: "David", lname: "Peterson", email: 'david@mail.com', sdate: '4/5/2010' } ] }); }); </script> </html>