Jquery UI developed by Chinese people-miniui

Today, I am hanging out on the Internet, looking for a better jquery UI, and seeing this. Let's introduce it to you.

Jquery miniui

Http://www.miniui.com/index.html

Sample Code: http://www.miniui.com/demo/index.html

API: http://www.miniui.com/docs/api/index.html

Development Guide: http://www.miniui.com/docs/tutorial/index.html

 

Miniui system architecture cross-platform display layer controls

Miniui is a set of JavaScript control libraries, including forms, tables, trees, layout, navigation, and other controls, to meet the functional needs of integrated web interface development.

It is on the Web Client and provides client users with rich functions and powerful controls.

Supports web development platforms such as JSP, ASP. NET, PHP, ASP, ColdFusion, and Ruby on Rails.

Supports IE6 +, Firefox, chrome, Safari, opera, and other browsers.

Modular Design

Miniui is designed and developed based on the modular idea.

A single control is an independent function module. The control and the control are loosely coupled and independent of each other.

For example, developers can use the DataGrid, menu, tree, and other controls independently, instead of loading other controls, reducing the amount of javascipt code loading and optimizing the generation efficiency.

Note: by default, miniui contains all controls. After compression, the JS volume cannot exceed 200 kb. Developers can also load only used controls as needed, without additional controls.

Inheritance System

The miniui control is developed based on the "Object-Oriented" idea. It can implement inheritance between controls to reduce the appearance of repeated code.

Mini. Control is a control base class that implements attributes such as ID, style, CLS, width, height, and enabled and the render method.

All other controls are inherited and extended based on Mini. control, so as to obtain the size, style appearance, and rendering capabilities.

The inheritance tree of miniui is very simple, and complex inheritance relationships should be avoided as much as possible. Trace any widget up to 1 ~ For the three parent classes, you can find mini. Control.

Widget category

Any control has its own functional value, which is why it is designed and developed.

Miniui divides controls into the following five categories:

• Form Control: Provides input box, single choice, multiple choice, and other functions.
• Data Table: displays and operates list data.
• Tree control: displays and operates tree data.
• Layout control: Provides overall and Local interface layout display in special ways.
• Navigation controls: provides functions such as interface classification and data navigation display.

Each control category consists of more than one control to achieve more detailed and more specific functions.

Table and tree control are two special categories. They are both advanced and complex controls that implement complex and rich functions.

Create and use control objects

How to create and use a miniui control object.

First, use the "new" keyword to create a control instance:

var button = new mini.Button();

All the controls in the miniui start with "Mini." and add the control name. For example, "Mini. DataGrid" and "Mini. ComboBox.

Then, Set Properties and listen for event processing:

Button. settext ("hello"); // sets attributes

Button. On ("click", onhelloclick); // listens for event processing

Finally, you need to render the control object to the page:

button.render(document.body);

Create an object using HTML tagging

Miniui provides a simpler way to create and use control objects. The Code is as follows:

<input id="helloBtn" class="mini-button" text="Hello" onclick="onHelloClick"/>

Explanation:

1. Class = "mini-button": indicates that this label is a mini. Button control object.
2. TEXT = "hello": Sets object attributes.
3. Onclick = "onhelloclick": listens for processing events

Note: the location of HTML is where the control object is rendered. You do not need to use the render method to render the control to the DOM element.

All examples of miniui are written in HTML tagging.

Using HTML to create objects reduces JavaScript code by 80%, making it easier to write, read, and maintain.

Only some event processing functions require additional JavaScript writing methods.

Integration with third-party controls

Miniui focuses on integration with third-party controls. Because the functions of controls are limited, and the demand for software development is unlimited.

Third-party controls have two forms:

1. Javascript controls: such as jquery, Yui, dojo, and extjs.
2. Plug-in controls: such as flash charts and Silverlight workflow engines.

For all the controls of miniui, there is a way to get the control DOM elements:

var button = mini.get("helloBtn");

var el = button.getEl();

After obtaining the DOM element of the control, the developer can appendchild and other methods to move it to any dom element.

If you want to set a flash chart object to the Mini. Panel, you can do this:

VaR swfchart = Document. getelementbyid ("swfchart"); // obtain the DOM element of the flash chart.

VaR pbodyel = panel. getbodyel (); // obtain the bodyel of the Panel.

Pbodyel. appendchild (swfchart); // Add the DOM element of the flash chart to the Panel.

Note: by exposing the control Dom Element Object, developers can easily integrate miniui with any third-party control.