Documentation

Web UI for PC, Mobile and Touch Devices

jQuery Widgets for PC and Mobile

What is jQWidgets?

jQWidgets represents a framework based on Javascript for building web-based applications that run on PC, Touch and Mobile devices. jQWidgets includes more than 60 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

jQWidgets takes the JavaScript & HTML UI development to a new level. It is platform 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 JavaScript library based jQuery, HTML5 and CSS3.The product supports all major desktop 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).

Optimized for Performance

Small footprint, highly responsive, carefully optimized to deliver outstanding experience on a wide range of devices, operating systems and browsers.

Theme Builder

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

Download jQWidgets or Install jQWidgets using Bower, npm or NuGet.

Information about the distribution package

  1. 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.light.css: Stylesheet for the Light Theme
    • styles/jqx.dark.css: Stylesheet for the Dark Theme
    • styles/jqx.arctic.css: Stylesheet for the Arctic Theme
    • styles/jqx.web.css: Stylesheet for the Web Theme
    • styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme
    • 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.metrodark.css: Stylesheet for the Metro Dark Theme
    • styles/jqx.orange.css: Stylesheet for the Orange 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.blackberry.css: Stylesheet for the Blackberry Theme
    • styles/jqx.android.css: Stylesheet for the Android Theme
    • styles/jqx.mobile.css: Stylesheet for the Mobile Theme
    • styles/jqx.windowsphone.css: Stylesheet for the Windows Phone 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 widgets. Include depending on project needs:
    • jqx-all.js: All plug-ins and widgets
    • jqxangular.js: AngularJS integration plug-in
    • jqxbargauge.js: Bar Gauge widget
    • jqxbuttons.js: Button, RepeatButton, SubmitButton & ToggleButton widgets
    • jqxbulletchart.js: BulletChart widget
    • jqxbuttongroup.js: Button group widget
    • jqxcalendar.js: Calendar widget
    • jqxcombobox.js: ComboBox widget
    • jqxcomplexinput.js: Complex Numbers TextBox widget
    • jqxchart.core.js: Chart widget's Core
    • jqxchart.rangeselector.js: Chart Range Selector
    • jqxchart.api.js: Chart API
    • jqxchart.annotations.js: Chart's annotations
    • jqxchart.waterfall.js: Waterfall Chart
    • jqxcheckbox.js: CheckBox widget
    • jqxdata.js: Data Source plug-in
    • jqxdata.export.js: Data Export plug-in
    • jqxdate.js: DateTime plug-in
    • jqxdatetimeinput.js: DateTimeInput widget
    • jqxcolorpicker.js: Color Picker widget
    • jqxdatatable.js: DataTable widget
    • jqxdocking.js: Docking widget
    • jqxdockinglayout.js: Docking Layout widget
    • jqxdropdownbutton.js: DropDown Button widget
    • jqxdragdrop.js: DragDrop plug-in
    • jqxdraw.js: Draw Plugin.
    • jqxdockpanel.js: DockPanel widget
    • jqxdropdownlist.js: DropDownList widget
    • jqxeditor.js: Editor widget
    • jqxexpander.js: Expander widget
    • jqxfileupload.js: FileUpload widget
    • jqxformattedinput.js: Binary, Octal, Hex TextBox 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
    • jqxinput.js: TextBox widget
    • jqxlayout.js: Layout widget
    • jqxloader.js: Loader widget
    • jqxkanban.js: Kanban widget
    • jqxknob.js: Knob widget
    • jqxknockout.js: Knockout integration plug-in
    • jqxlistbox.js: ListBox widget
    • jqxmaskedinput.js: Masked TextBox widget
    • jqxmenu.js: Menu widget
    • jqxnavigationbar.js: NavigationBar widget
    • jqxnavbar.js: NavBar widget
    • jqxnotification.js: Notification widget
    • jqxnumberinput.js: NumberInput TextBox widget
    • jqxrangeselector.js: RangeSelector widget
    • jqxpanel.js: Panel widget
    • jqxpopup.js: impements PopUp widget
    • jqxprogressbar.js: ProgressBar widget
    • jqxpasswordinput.js: Password input widget
    • jqxpopover.js: Popover widget
    • jqxpivotgrid.js: Pivot Grid widget
    • jqxpivotdesigner.js: Pivot Designer
    • jqxpivot.js: Pivot API
    • jqxrating.js: Rating widget
    • jqxribbon.js: Ribbon widget
    • jqxradiobutton.js: RadioButton widget
    • jqxresponse.js: Response plug-in
    • jqxresponsivepanel.js: Responsive Panel plug-in
    • jqxswitchbutton.js: Switch Button widget
    • jqxscrollbar.js: ScrollBar widget
    • jqxsortable.js: Sortable plug-in
    • jqxscrollview.js: ScrollView widget
    • jqxsplitter.js: Splitter widget
    • jqxslider.js: Slider widget
    • jqxscheduler.js: Scheduler widget
    • jqxscheduler.api.js: Scheduler's API plugin
    • jqxtabs.js: Tabs widget
    • jqxtagcloud.js: Tag Cloud widget
    • jqxtree.js: Tree widget
    • jqxtreemap.js: TreeMap widget
    • jqxtreegrid.js: TreeGrid widget
    • jqxtextarea.js: TextArea widget
    • jqxtoolbar.js: Toolbar widget
    • jqxtooltip.js: ToolTip widget
    • jqxvalidator.js: Validation plug-in
    • jqxwindow.js: Window widget

  2. Examples

    The index.htm file starts the demo/examples browser
    Individual widget examples are located in the /demos directory

  3. Documentation

    Browse the documentation and examples through the index.htm file
    Individual documentation files are located in the /documentation directory

  4. Other files

    The /scripts, /images, /styles folders contain the jquery library and other files used by the demo only.

  5. Unit tests

    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.

  6. Getting Started

    • 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: