jQuery Widgets for PC, Mobile and Touch Devices
jQWidgets 代表一個基於jQuery框架(framework)建構可在PC、觸控和行動設備上運作的網頁製作應用程式。jQWidgets 具超過30個UI widgets 。jQWidgets 不只是jQuery UI toolkit 的進化版。所有 widgets 的設計概念都是基於一個強大的共同的核心。此框架核心提供支援 widget 的擴充套件(extensions)和延續、widget 的設置、內部事件處理和進程(routing) ,性能更改通知、設備和瀏覽器兼容性的檢測和調整。
跨平台運作
jQWidgets 將 JavaScript & HTML 的 UI 界面發展到一個新的水平。它是個獨立平台、跨瀏覽器相容性,並可在PC和移動設備上運作。Don 花時間在不同的設備和瀏覽器上測試。使用可靠且基於jQuery、HTML5 和 CSS3 並與 CSS 相容的JavaScript library。此產品支援所有主要的桌上型和行動網路瀏覽器 - 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 的依賴性和相容性
jQWidgets 依賴於 jQuery library。 jQWidgets 經測試並相容於所有的 jQuery 版本,我們致力於支援所有 jQuery 的新版本,並確保最高水平的品質。它是理想的企業網路應用程式和網站,可讓瀏覽者透過行動設備、電腦和舊版的瀏覽器來瀏覽。
重要:jQuery開發團隊已決定,從 jQuery V1.9.0 開始,該項目將在兩條平行的軌道發展。V1.9 * 將支援舊版的瀏覽器,而從 V2之後的版本則不支援。這意味著,如果您正尋找運用層面最廣泛的設備和瀏覽器之間的相容可能性,
您有時該使用 V2.0.0 之前的舊版。另一方面,如果您使用的是jQWidgets在行動應用程式或建立一個不在使用某些特定舊版瀏覽器的解決方案,就使用具有jQuery 2.0.0的jQWidgets。重點是要強調,保持與某些舊版瀏覽器的相容性的優缺點總是在不斷變化。如果您希望一個良好的、完善的資訊決定,我們建議您檢查近期的瀏覽器使用情況統計和分析您網站的訪客所使用的瀏覽器和設備。
卓越性能
不佔空間、高度回應,精心升級,以提供在廣泛的設備、操作系統和瀏覽器卓越的使用經驗。
主題建立器(Theme Builder)
主題建立器是一個強大的線上工具,可幫助您快速建立基於jQWidgets 的應用程式的使用者界面。
新版介紹
What's New:
Sparklines in jqxGrid.
Context Menu in jqxGrid.
What's Improved:
Added 'blur' method to jqxNumberInput.
Added 'filterAppointments' method to jqxScheduler.
What's Fixed:
Fixed an issue in jqxPopover. Popover was not closing, if a button is clicked.
Fixed an issue in jqxCheckboxGroup and jqxRadioButtonGroup. An error occurs when the ‘disabled’ attribute is set to true. Doesn't happen if the "disable" method is used.
Fixed an issue in jqxCheckboxGroup and jqxRadioButtonGroup. If the ‘change’ attribute is not specified, values cannot be retrieved using the ‘val’ or ‘getValue’ method.
Fixed an issue in jqxCheckboxGroup and jqxRadioButtonGroup. Setting values in disabled state doesn't trigger the 'change' attribute. This can be verified by clicking "Disable" and "Set Items".
Fixed an issue in jqxDropDownList. The 'change' event doesn't work when using keyboard to select an item.
Fixed an issue in jqxKanban. 'updateItem' of an item when passing empty tags does not work.
Fixed an issue in jqxEditor. When the editor is displayed in a window, the color pickers are displayd below the window.
Fixed an issue in jqxSplitLayout for Angular. The component did not render in Angular 17.
Fixed an issue in jqxTextArea. The 'theme' property cannot be changed dynamically.
Fixed an issue in jqxMaskedInput. The 'CapsLock' did not work.
Fixed an issue in jqxNumberInput. Can't enter decimal point on mobile devices.
Fixed an issue in jqxRating with the Fluent theme.
Fixed an issue in jqxGrid. Column reorder duplicates column over another when we drop over a checkbox column.
Fixed an issue in jqxGrid. When the Grid is localized, the filter row list filter was not working correctly.
Fixed an issue in jqxGrid. 'getselectedcells' method sometimes returns wrong result.
Fixed an issue in jqxGrid. Grouping rows appear empty if there is only one visible column.
Fixed an issue in jqxGrid. jqxGrid sometimes displays unnecessary scrollbar.
Fixed an issue in jqxGrid. Applying state to a grouped grid sometimes reorders the columns incorrectly.
Fixed an issue in jqxGrid. Incorrect column calculation when some columns are with 'px' and others are with 'percentage'.
Fixed an issue in jqxGrid. 'columnresize' property cannot be changed dynamically.
Fixed an issue in jqxGrid. 'getgroup' does not return the 'expanded' state of the group.
Fixed an issue in jqxGrid. Group aggregates are not updated after editing a cell.
Fixed an issue in jqxGrid. When 'sortmode' is 'many', the savestate does not save all sort options.
Fixed an issue in jqxGrid. 'savestate' always saves column widths in pixels instead of the original value.
為jQuery開發者所設計的功能強大 UI widgets
jQWidgets 提供您需要的一切,用JavaScript,HMTL5和jQuery UI來構建豐富的客戶端 UI。它包含超過30個 UI widgets,是在網路上發展最快的 JavaScript UI frameworks 之一。
適用於PC、觸控和行動設備
jQWidgets 已為廣泛的觸控和移動設備做好準備
。框架(framework)自動偵測設備類型、相容性和瀏覽器的版本,並調整為最佳渲染(optimal rendering)的內部行為和最佳的用戶經驗。該框架支援所有主要的桌上和行動網路瀏覽器 - Internet Explorer 7.0+、Firefox 2.0+、Safari 3.0+、Opera 9.0+、 Google Chrome、IE Mobile、 Android、 Opera Mini、Mobile Safari(IPhone 和 IPad)。
高品質的標準
大多數JavaScript和jQuery widgets 並不相互整合。他們往往缺少的功能,包含 bugs 和需要大量的時間來適當地融入一個真實的項目。相比之下,jQWidgets提供專業的開發經驗,並配備完整又無縫接軌的 widgets ,還提供一致的、高品質的外觀和介面。所有的 widgets 需再多個設備和瀏覽器上進行測試,以確保最大的相容性。
強大的框架(framework)、獨特的功能
jQWidgets 不只是 jQuery UItoolkit 的修改版本。jQWidgets 不只是jQuery UI toolkit 的進化版。所有 widgets 的設計概念都是基於一個強大的共同的核心。此框架核心提供支援 widget 的擴充套件(extensions)和延續、widget 的設置、內部事件處理和進程(routing) ,性能更改通知、設備和瀏覽器兼容性的檢測和調整。
優化性能
jQWidgets著重於性能表現。它體積小、高度模塊化(modular)和可擴展的。個別 widgets 和主題可按照您的需求加載,同時進一步優化了下載時間和節省您的記憶體。所有的 widgets 可依照在智慧型手機、平板和電腦所運行的不同系統和瀏覽器進行最佳用戶經驗優化。
Web Demos
Introduction
jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 60 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.
Highlights
- Feature complete UI widgets.
- Works on PC, Touch and Mobile Devices.
- Rich functionality and great performance.
- Angular 6 Components.
- AngularJS Directives.
- Custom Elements.
- Typescript Definitions.
- ASP .NET and ASP .NET MVC integration and how-to demos.
- Java integration and how-to demos.
- PHP integration and how-to demos.
- PhoneGap Integration.
- Wordpress and Joomla Integration.
- 60+ UI widgets, 30+ Charts, 1200+ code samples are provided to accelerate your learning.
- Search-engine friendly.
- Guaranteed 24h support time for licensed developers Mon-Fri.
- Outstanding technical assistance provided by software developers.
- Free fully functional Download and upgrades for a full calendar year.
- Chart Studio - cloud solution for visual editing and hosting of interactive charts.
- jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas.
- Easy CSS styling and online Theme Builder tool.
- Ready to use, built-in Themes.
- Unique and completely customizable architecture for JQuery widgets.
- Integration tutorials for Bootstrap, RequireJS, BreezeJS, KnockoutJS.
- AngularJS, jQuery Mobile, WordPress, Joomla and more.
Works on PC, Touch and Mobile Devices
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. With jQWidgets, you can target new devices such as tablets and smartphones by using the extensive range of touch enabled jQuery Widgets. The jQWidgets framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience.a
Optimized for performance
jQWidgets is built with performance in mind. It is small in size, highly modular and extensible. Individual widgets and themes can be loaded on demand to further optimize the download time and save memory. All widgets are optimized for optimal user experience on smart phones, tablets and PCs running different operating systems and browsers.
Powerful framework. Unique features.
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.
High quality standards
Most JavaScript and jQuery widgets don’t integrate well with each other. They often lack features, contain bugs and require a lot time to properly fit into a real project. In contrast, jQWidgets provides professionally developed and feature complete widgets that seamlessly integrate with each other and deliver a consistent, high quality look & fell. All widgets are tested on multiple devices and browsers to ensure maximum compatibility.
Browser Support & Mobile Device Compatibility
jQWidgets is ready for a wide range of touch and mobile devices. The framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience. 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 Mobile, Mobile Safari(IPhone, IPad).
Easy to Use
Browse over 200 online demos of our Web UI widgets. All demos come with full source code and are presented in multiple different themes. If you want to build your own theme, you can use our Online Theme Builder. Our widgets feature intuitive API and come with getting started documentation.
Theme Builder
jQWidgets comes with multiple built-in and cross-browser compatible themes. They are everything you need to build awesome-looking applications with consistent look and feel. To help you build new themes, we have developed a Theme Builder tool.
Roadmap
jQWidgets is evolving quickly. Our development schedule is very aggressive and we are committed to equip you with the best tools for HTML5, JavaScript and jQuery User Interface development. We aim to respond quickly to your requests, and to adapt our plans to optimize quality. Based on customer feedback and demands, we may prioritize the development of new features and new widgets. The plan for the next 3 months can be found here: Roadmap. jQWidgets also offers the most aggressive release schedule in the industry with four major releases guaranteed per year.
Web UI Widgets | ||||
jqxGrid
|
jqxTree
|
jqxComplexInput
|
jqxScrollView
|
jqxSplitter
|
jqxTabs
|
jqxPasswordInput
|
jqxTooltip
|
jqxSlider
|
jqxValidator
|
jqxTextArea
|
jqxNotification
|
jqxRating
|
jqxDataAdapter
|
jqxLayout
|
jqxWindow
|
jqxBarGauge
|
jqxDraw
|
jqxEditor
|
jqxButtons
|
jqxKnob
|
jqxTagCloud
|
jqxDataTable
|
jqxDropDownList
|
jqxKanban
|
jqxResponsivePanel
|
jqxScheduler
|
jqxToolBar
|
jqxDateTimeInput
|
jqxBulletChart
|
jqxChart
|
jqxNavigationBar
|
jqxFormattedInput
|
jqxProgressBar
|
jqxSortable
|
jqxMenu
|
jqxMaskedInput
|
jqxColorPicker
|
jqxScrollBar
|
jqxPanel
|
jqxInput
|
jqxPopOver
|
jqxRangeSelector
|
jqxResponse
|
jqxDockingLayout
|
jqxDocking
|
jqxExpander
|
jqxDragDrop
|
jqxRibbon
|
jqxForm
|
jqxGauge
|
jqxLoader
|
jqxTreeMap
|
jqxListBox
|
|
jqxNavBar
|
jqxTreeGrid
|
jqxComboBox
|
jqxCalendar
|
|
jqxPivotGrid
|
jqxListMenu
|
jqxNumberInput
|
jqxFileUpload
|
Integration & Tools | ||||||
Chart Studio(Beta)
|
JSEditor
|
AngularJS 1
|
Typescript
|
KnockoutJS
|
Bootstrap
|
RequireJS
|
jQuery Mobile
|
ASP .NET
|
PHP
|
Java
|
Mobile Demos
Works on PC, Touch and Mobile Devices
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. With jQWidgets, you can target new devices such as tablets and smartphones by using the extensive range of touch enabled jQuery Widgets. The jQWidgets framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience.
Deliver web applications for any browser, platform or device
As the world goes more and more online, the need for high-quality, stable and tested web-based applications that can work On PC, Touch and Mobile devices is crucial. We believe that using our products leads to better results, less code and thus less maintenance for you.
Browser Support & Mobile Device Compatibility
jQWidgets is ready for a wide range of touch and mobile devices. The framework automatically detects the device type, capabilities and browser version, and adjusts the internal behavior for optimal rendering and best user experience. 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 Mobile, Mobile Safari(IPhone, IPad).
Documentation & Samples
Browse over our samples with the source code to help you study how the widgets work. The documentation can be found here:
jQWidgets Online Documentation If you have a question, please feel free to contact us at [email protected] We offer free technical support with guaranteed 48 hours response time from Monday-Friday during your 30-days evaluation period.
jqxCalendar |
jqxButtonGroup | jqxSwitchButton |
jqxButton | jqxTouch | jqxGrid |
jqxListBox | jqxTree | jqxScrollView |
jqxSplitter | jqxTabs | jqxMenu |
jqxListMenu |
Theme Builder for jQWidgets
The Theme Builder is a tool which helps you to create a new theme for jQWidgets.
● Import colors from a theme - enables you to import the colors from an existing theme.
● Theme settings - edit the widgets colors and states.
Getting started with the Theme Builder
● Choose a state. For example, click "Header areas".
● Click on any DropDown to edit a state color("Header background" and "Header background2" specify the background for the header areas, "Header border" specifies the border color, "Header color" specifies the text color).
● Preview the changes by clicking the "Preview" tab.
● Get the theme by clicking the "Get Theme" tab.
● In case you wish to import the colors from an existing theme, click on a Theme name from the "Import colors from a theme" section.
● Theme settings
- Header areas
- Header background and Header background 2 - determines the background for the header areas(Grid columns, Calendar and Window title, Tabs header, etc.).
- Header border - determines the border color.
- Header color - determines the text color.
- Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
- Content areas
- Content background - determines the background for the content areas(Grid cells, Calendar, Tabs and Window content, etc.).
- Content border - determines the border color.
- Content color - determines the text color.
- Default state
- Default state background and Default state background 2 - determines the background in the default display state(buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
- Default state border - determines the border color.
- Default state color - determines the text color.
- Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
- *Some of the themes include additional settings like "Alt default state color". These settings are used for styling theme specific elements(jqxNavigationBar items, jqxTabs tabs in default state, etc.). For example, the "Shiny Black" theme has an additional "Alt icon type" setting which determines the icon type of jqxTree and jqxMenu's DropDown.
- Hover state
- Hover state background and Hover state background 2 - determines the background in the hover display state(grid and calendar cells, buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
- Hover state border - determines the border color.
- Hover state color - determines the text color.
- Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
- *Some of the themes include additional settings like "Alt hover state color". These settings are used for styling theme specific elements(jqxGrid and jqxCalendar cels in hover state, jqxListBox items in hover state, jqxCalendar cells in hover state, etc.).
- Active(Selected) state
- Active state background and Active state background 2 - determines the background in the active display state(grid and calendar cells, buttons, dropdowns, checkboxes, radio buttons, navigation bar items, splitter bar, etc.)
- Active state border - determines the border color.
- Active state color - determines the text color.
- Icon type - determines the icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
- *Some of the themes include additional settings like "Alt active state color". These settings are used for styling theme specific elements(jqxGrid and jqxCalendar cels in hover state, jqxListBox items in hover state, jqxCalendar cells in hover state, etc.).
- Misc
- Font family - determines the font family used by the widgets.
- Border radius - determines the border radius of the widgets.
- Alternating background - determines the background of the Grid cells when the "altrows" property is set to true.
- Alternating color - determines the text color of the Grid cells when the "altrows" property is set to true.
- Alternating background 2 - determines the background of the Grid cells in a sorted, pinned or filtered column.
- Alternating color 2 - determines the text color of the Grid cells in a sorted, pinned or filtered column.
- Context menu background - determines the background of the context menu(in the Preview tab, a context menu is available in the Grid - move the cursor over a column and click the dropdown button to open a context menu).
- Focus border - determines the boder color when a widget is on focus.
- Cells color - determines the Grid cells text color.
- Cells border - determines the Grid cells border color.
- Radio button check color - determines the color of the radio button's check mark.
Inputs, dropdowns and lists
- Input background - determines the background of text inputs.
- Input border - determines the border color of text inputs.
- Input color - determines the text color of text inputs.
- DropDown background - determines the background of drop downs(jqxDropDownList, jqxComboBox, jqxMenu).
- DropDown border - determines the border color of drop downs.
- DropDown color - determines the text color of drop downs.
- Tooltips
- Tooltip background and Tooltip background 2 - determines the background for the tooltips(jqxTooltip).
- Tooltip border - determines the border color.
- Tooltip color - determines the text color.
- Buttons and scrollbar
- Button background and Button background 2 - determines the background for the buttons(jqxButton).
- Button border - determines the border color.
- Button color - determines the text color.
- Scrollbar background - determines the background color of the scrollbar(jqxScrollBar).
- Scrollbar border - determines the border color.
- Scrollbar thumb border - determines the border color of the Thumb element.
- Scrollbar thumb background and Scrollbar thumb background 2- determines the background of the Thumb element.
- Scrollbar thumb hover border - determines the hovered(mouse cursor is over the element) border color of the Thumb element.
- Scrollbar thumb hover background and Scrollbar thumb hover background 2- determines the background of the hovered Thumb element.
- Scrollbar thumb active border - determines the active(mouse button is pressed) border color of the Thumb element.
- Scrollbar thumb active background and Scrollbar thumb active background 2- determines the background of the active Thumb element.
- Scrollbar button border - determines the border color of the buttons.
- Scrollbar button background and Scrollbar button background 2 - determines the background of the scrollbar buttons.
- Scrollbar button hover background and Scrollbar button hover background 2 - determines the background of the hovered scrollbar buttons.
- Scrollbar button hover border - determines the border color of the hovered buttons.
- Scrollbar button active background and Scrollbar button active background 2 - determines the background of the active scrollbar buttons.
- Scrollbar button active border - determines the border color of the active(pressed) buttons.
- Scrollbar button icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons).
- Scrollbar button hover icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons) when the button is hovered.
- Scrollbar button active icon type - determines the scrollbar button's icon type("light" for white icons, "dark" for black icons, "metro_dark" for black metro style icons, "metro_light" for white metro style icons) when the button is pressed.
Getting and using the Theme
● Create a new CSS file in the jqwidgets/styles folder.
● Click the "Get Theme" tab.
● Enter your theme's name in the input field.
● Click the "Get CSS..." button.
● Copy and Paste the CSS from the text area into your new CSS file.
● Include the CSS file in your project after jqx.base.css.
● Set the "theme" property of any widget to your theme's name.
Theme settings | ||
Header areas | Content areas | Default state |
Hover state | Active state | Misc |
Inputs, dropdowns and lists | Tooltips | Buttons and scrollbar |
Import colors from a theme | ||
Web | High Contrast | Summer |
Metro | Classic | Energy Blue |
Fresh | Office | Bootstrap |
Dark Blue | Black | Shiny Black |
The commercial license is suitable for commercial websites and projects or a corporate intranet. The license allows royalty free distribution with your websites and applications. Each license includes 1-year subscription for free product updates and premium or standard technical support plan.
Website License
- For 1 developer and 1 project
- Perpetual and royalty free
- No Source Code
- Standard Support
- Includes all jQWidgets UI widgets, technical support and updates to newer versions for 1 year
- jQWidgets for Angular
- jQWidgets for React
- jQWidgets for Vue
- jQWidgets for jQuery
Developer License
- For 1 developer and unlimited number of projects
- Perpetual and royalty free
- Source code
- Premium Support
- Includes all jQWidgets and Smart UI widgets, technical support and updates to newer versions for 1 year
- jQWidgets for Angular
- jQWidgets for React
- jQWidgets for Vue
- jQWidgets for ASP .NET
- jQWidgets for jQuery
- jQWidgets for Blazor
- Smart UI
Team License
- For 5+ developers and unlimited number of projects
- Perpetual and royalty free
- Source code
- Platinum Support
- Includes all jQWidgets and Smart UI widgets, technical support and updates to newer versions for 1 year
- jQWidgets for Angular
- jQWidgets for React
- jQWidgets for Vue
- jQWidgets for ASP .NET
- jQWidgets for jQuery
- jQWidgets for Blazor
- Smart UI
Enterprise License
- These options are suitable for large organizations with multiple subsidiaries and affiliates or companies interested in OEM licensing options.
- Customized agreements
- Source code
- Ultimate Support
- Includes all jQWidgets and Smart UI widgets for all platforms, technical support and updates to newer versions for 1 year