Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "what is the front-end framework of jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Jquery front-end framework has: 1, EasyUI, a jQuery-based user interface plug-in collection; 2, MiniUI, professional WebUI control library, can shorten development time, reduce the amount of code; 3, jQuery UI, is a set of page UI plug-ins; 4, Smart UI;5, Liger UI and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery front-end framework

1 、 EasyUI

EasyUI is a collection of jQuery-based user interface plug-ins. Easyui provides the necessary functions for creating modern, interactive, JavaScript applications. With easyui you don't need to write a lot of code, you just need to write some simple HTML tags to define the user interface.

Advantages: open source is free, and the page makes sense.

Getting started with easyUI:

The page introduces the necessary js and css style files in the following order:

Then just write easyUI code on the page, and easyUI provides a lot of styles:

Examples are as follows:

The implementation code is as follows:

Basic Dialog-jQuery EasyUI DemoBasic Dialog

Click below button to open or close dialog.

CloseThe dialog content.

2 、 MiniUI

JQuery MiniUI-professional WebUI control library.

It can shorten the development time, reduce the amount of code, make developers more focused on business and services, easily achieve interface development, and bring an excellent user experience.

With MiniUI, developers can quickly create typical WEB application system interfaces such as Ajax without refresh, fast data entry with BBG S, CRUD, Master-Detail, menu toolbars, pop-up panels, layout navigation, data validation, paged tables, trees, tree forms, and so on.

Disadvantages: charge, no source code, based on this development if you want to expand the function, you need to find their team to upgrade!

The following broad categories of controls are provided:

Table control tree control

Layout controls: title panel, pop-up panel, folding splitter, scheduler, form scheduler, etc.

Navigation controls: paging navigator, navigation menus, tabs, menus, toolbars, etc.

Form controls: multi-selection input box, pop-up selection box, text input box, number input box, date selection box, drop-down selection box, drop-down tree selection box, drop-down table selection box, file upload control, multi-selection box, list box, multi-selection box group, radio box group, button, etc.

Rich text editor

Chart controls: bar chart, pie chart, line chart, biaxial chart and so on.

Technical highlights:

Rapid development: use Html to configure the interface and reduce the amount of interface code by 80%.

Easy to learn and use: simple API design, can be independent, combined use of controls.

Performance optimization: built-in mechanisms such as lazy data loading, low memory overhead, fast interface layout, etc.

Rich controls: contains more than 50 controls such as tables, trees, data validation, layout navigation, and so on.

Super tables: provide locked columns, multiple headers, paging sorting, row filtering, data summary, cell editing, detailed rows, Excel export and other functions.

Third-party compatibility: seamless integration with any third-party controls such as ExtJS, jQuery, YUI, Dojo, etc. Browser compatibility: support IE6+, FireFox, Chrome and so on.

Cross-platform support: support Java, .NET, PHP and so on.

Examples are as follows:

3 、 jQueryUI

JQuery UI is a set of jQuery page UI plug-ins, including many kinds of commonly used page space, such as Tabs (such as the upper right corner of the home page), curtain effect (upper left corner of the home page), dialog box, drag and drop effect, date selection, color selection, data sorting, form resizing and so on.

Technical highlights:

Easy to use: inherit the easy-to-use features of jQuery, provide a highly abstract interface, and improve the ease of use of the website in the short term.

Open source free: MIT & GPL double agreement license is adopted to easily meet various licensing needs from free products to enterprise products.

Widely compatible: compatible with all major desktop browsers. Including IE 6 +, Firefox 2 +, Safari 3 +, Opera 9 +, Chrome 1 +. Light and fast: components are relatively independent and can be loaded on demand to avoid wasting bandwidth and slowing down the opening speed of web pages.

Standard advanced: support for WAI-ARIA, progressive enhancements through standard XHTML code to ensure low-end environment accessibility.

Beautiful and changeable: provides nearly 20 preset themes, customizes up to 60 configurable style rules, and provides 24 background texture choices. Du Niang searches the api of jQueryUI, its usage is more or less the same as easyUI and MiniUI, and there will be no examples here.

4 、 Smart UI

Smart UI is an Ajax development framework based on JQuery, which realizes the separation of front and background, function and data. The UI layer is completed by htm+js+json, and the data is exchanged with the server through a unified data interface.

It mainly consists of three parts:

1. A set of JQuery plug-ins for daily applications (similar to JQuery UI,JQuery EasyUI). The core is based on template.js template plug-ins and has powerful custom functions.

2. A set of front-end development framework (js, css), which meets all kinds of basic scenarios and has good encapsulation and expansibility. The system automatically completes the tedious operations such as dynamically creating pages, interacting with the background, taking, assigning values and so on.

3. Background data framework (.net) seamlessly integrated with Smart UI.

The framework of Smart UI mainly includes four parts: UI layer (Smart UI), data interface, business layer and data layer. Today, I will mainly talk about the UI layer, this part is different from the usual framework architecture in the past, for the pure foreground development architecture, css+html], css and js all have detailed layering, not only in Smart UI, but also for friends of other frameworks. I also hope you can put forward valuable suggestions.

5 、 Liger UI

LigerUI is a jquery ui framework based on a series of control groups developed by jQuery, including forms, layouts, tables and other common UI controls. Using LigerUI can quickly create a unified interface effect.

6 、 Chico UI

Like jQuery UI, Chico UI includes auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar, etc., as well as a CSS layout framework for implementing web layout and tables.

7 、 PrimeUI

PrimeUI is a jQuery UI component library of the PrimeFaces team, which currently contains several UI parts

8 、 w2ui

Jquery-based UI library that contains common UI components, such as layout, tables, trees, Tabs, toolbars, pop-up menus, forms, and so on.

Written in Html5 + CSS3, it can support commonly used browsers, such as Chrome, FireFox7+, Safari 5 + and IE 9 +.

9 、 Ninja UI

JQuery is a very good JavaScript framework, and there are quite a few plug-ins. Some of these UI plug-ins are also quite powerful, such as Ninja UI, which is an interface plug-in that will add a lot of color to your project. This plugin contains common effects such as slides, smart tips, and so on.

10 、 B-JUI

B-JUI client Framework (Best jQuery UI) is an open source Ajax RIA framework based on Bootstrap style and jQuery library implementation.

The B-JUI client framework is easy to extend and easy to use. In many cases, as long as you are familiar with the HTML syntax and use the HTML attribute, you can easily develop projects with Ajax. It is very convenient for programmers who are not familiar with javascript, they only need to focus on the implementation of the back-end business logic, and they only need to write some HTML code on the front-end page.

This framework is based on Bootstrap front-end style and jQuery library development, provides a rich variety of components and UI, encapsulates a variety of components, and related Ajax request calls, and are all combined in the way of jQuery standard plug-ins, so it is very convenient for secondary development or re-expansion.

This is the end of the content of "what are the front-end frameworks of jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.