jQuery Widgets for PC, Mobile and Touch Devices
What is jQWidgets?
jQWidgets represents a framework based on jQuery for building web-based applications
that run on PC, Touch and Mobile devices. jQWidgets includes more than 30 UI widgets.
jQWidgets is not a modified version of the jQuery UI toolkit. All widgets are designed
from ground-up and based on a powerful common core. The framework core provides
fundamental capabilities like support for widget extensions and inheritance, widget
settings, internal event handling and routing, property change notifications, device
and browser compatibility detection and adjustments.
Works across devices and browsers
independent, cross-browser compatible and works on PC and mobile devices. Don’t
spend time testing on different devices and browsers. Use a reliable, CSS compliant
and mobile web browsers - Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera
9.0+, Google Chrome, IE Mobile, Android, Opera Mini, Mobile Safari(IPhone, IPad).
jQuery dependency and compatibility
jQWidgets has a dependency on the jQuery library. jQWidgets is tested and compatible with all jQuery versions from jQuery 1.6.0 to jQuery 2.0.0.
We are committed to supporting all new versions of jQuery and ensuring the highest level quality. At present, we highly recommend that you use jQuery 1.8.3. This version is stable, high quality, and works well with a large number of popular devices and browsers. It is ideal for enterprise web applications and Internet web sites where the visitors use a mix of mobile devices, PCs, new and older browsers.
Important: jQuery team has decided that starting from jQuery version 1.9.0 the project will evolve in two parallel tracks. Versions 1.9.* will support older browsers while versions starting from 2.* will not. This means that if you are looking for the highest possible compatibility across the broadest set of devices and browsers, you should stick with versions earlier than 2.0.0 for some time. On the other hand, if you are using jQWidgets in a mobile application or building a solution where certain older browsers will not be required, feel free to use jQWidgets along with jQuery 2.0.0. It is important to emphasize that the pros and cons of maintaining compatibility with certain older browsers is always changing. If you want to make a good, well informed decision, we recommend you to check the recent browser usage statistics and analyze the browsers and devices used by your website’s visitors.
Optimized for Performance
Small footprint, highly responsive, carefully optimized to deliver outstanding experience
on a wide range of devices, operating systems and browsers.
The Theme Builder is a powerful online tool that helps you to quickly create themes for the user interface of your application based on jQWidgets.
Online Theme Builder
Download and Installation
Information about the distribution package
The SDK files are located in the jqwidgets directory
In general you need to use files from this directory only.
Files list & description:
Files required in all projects using the SDK
- jqxcore.js: Core jQWidgets framework
- Stylesheet files. Include at least one stylesheet Theme file and the images folder:
- styles/jqx.base.css: Stylesheet for the base Theme.
The jqx.base.css file should be always included in your project.
- styles/jqx.classic.css: Stylesheet for the Classic Theme
- styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme
- styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme
- styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme
- styles/jqx.office.css: Stylesheet for the Office Theme
- styles/jqx.metro.css: Stylesheet for the Metro Theme
- styles/jqx.summer.css: Stylesheet for the Summer Theme
- styles/jqx.black.css: Stylesheet for the Black Theme
- styles/jqx.fresh.css: Stylesheet for the Fresh Theme
- styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme
- styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme
- styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme
- styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme
- styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme
- styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme
- styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme
- styles/jqx.ui-start.css: Stylesheet for the UI Start Theme
- styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme
- styles/images: contains images referenced in the stylesheet files
Files for individual widgets. Include depending on project needs:
- jqx-all.js: All plug-ins and widgets
- jqxdata.js: Data Source plug-in
- jqxchart.js: Chart widget
- jqxgrid.js: Grid widget
- jqxgrid.sort.js: Grid Sort plug-in
- jqxgrid.filter.js: Grid Filter plug-in
- jqxgrid.grouping.js: Grid Grouping plug-in
- jqxgrid.selection.js: Grid Selection plug-in
- jqxgrid.columnsresize.js: Grid Columns Resize plug-in
- jqxgrid.columnsreorder.js: Grid Columns Reorder plug-in
- jqxgrid.pager.js: Grid Pager plug-in
- jqxgrid.edit.js: Grid Editing plug-in
- jqxgrid.storage.js: Grid Save/Load state plug-in
- jqxgrid.aggregates.js: Grid Aggregates plug-in
- jqxgauge.js: Radial and Linear Gauge widget
- jqxbuttons.js: Button, RepeatButton, SubmitButton & ToggleButton widgets
- jqxbuttongroup.js: Button group widget
- jqxswitchbutton.js: Switch Button widget
- jqxcalendar.js: impements Calendar widget
- jqxdatetimeinput.js: impements DateTimeInput widget
- jqxdockpanel.js: DockPanel widget
- jqxdropdownlist.js: DropDownList widget
- jqxcombobox.js: ComboBox widget
- jqxtabs.js: Tabs widget
- jqxtree.js: Tree widget
- jqxcheckbox.js: CheckBox widget
- jqxradiobutton.js: RadioButton widget
- jqxexpander.js: Expander widget
- jqxlistbox.js: ListBox widget
- jqxmaskedinput.js: Masked TextBox widget
- jqxmenu.js: Menu widget
- jqxnavigationbar.js: NavigationBar widget
- jqxnumberinput.js: NumberInput TextBox widget
- jqxinput.js: TextBox widget
- jqxpanel.js: Panel widget
- jqxpopup.js: impements PopUp widget
- jqxprogressbar.js: ProgressBar widget
- jqxscrollbar.js: ScrollBar widget
- jqxtooltip.js: ToolTip widget
- jqxrating.js: Rating widget
- jqxsplitter.js: Splitter widget
- jqxslider.js: Slider widget
- jqxwindow.js: Window widget
- jqxdocking.js: Docking widget
- jqxcolorpicker.js: Color Picker widget
- jqxdropdownbutton.js: DropDown Button widget
- jqxvalidator.js: Validation plug-in
- jqxdragdrop.js: DragDrop plug-in
- jqxknockout.js: Knockout integration plug-in
The index.htm file starts the demo/examples browser
Individual widget examples are located in the /demos directory
Browse the documentation and examples through the index.htm file
Individual documentation files are located in the /documentation directory
The /scripts, /images, /styles folders contain the jquery library and other files
used by the demo only.
All jQWidget unit tests are located in the tests directory.
You can use the unit tests if you're planning to modify some of the widgets.
- Download jQWidgets
- Unzip to a directory of your choice
- Copy the jqwidgets directory to your project
- Use your favorite text editor to create a basic HTML page:
The result of the above code is: