JQuery MINIUI Development Series: Creating Component objects

Original: Http://miniui.com/bbs/forum.php?mod=viewthread&tid=20&extra=page%3D1

JQuery MINIUI can be used to create objects in two ways, both JavaScript and HTML.
1) JavaScript Creation object
Using JavaScript to create objects is the most basic way, with the following points:
1) Use the New keyword. such as: var Grid = new Mini. DataGrid ();
2) Set the property using the Set method. such as: Grid.seturl ("getdata.jsp");
3) Use the On method to listen for events. such as: Grid.on ("Rowclick", Onrowclick);
4) render to the page using the Render method. such as: Grid.render (document.body);
Common points of note:
1) The constructor parameter is empty. Create any one of the Miniui control objects: var button = new Mini. Button (); The constructor function has no parameters.
2) Multiple properties can be set in batches. Such as:

1. Grid.set ({
2. URL: "Getdata.jsp",
3. Style: "width:700px;height:280px;",
4. Columns: [...]
5. ...
6. });

Copy Code

This way, you do not have to write multiple seturl, SetStyle, SetColumns methods, and only need to write a set method.
3) event handler function object.

1. Grid.on ("Rowclick", Onrowclick);
2. function Onrowclick (e) {
3. var Grid = E.sender;//sender is the Component object itself
4. //...
5. }

Copy Code

4) Each component has a DOM element. such as: var el = Grid.getel (). Once the component DOM element is obtained, the developer can add the DOM to any location in the traditional JavaScript way.
2) HTML tag creation object
JQuery MINIUI recommends the use of HTML tag configuration to create objects.
When creating a separate table object, there is no difference between JavaScript and HTML two ways.
When creating a complex form interface, the benefits of HTML tag configuration are exposed.
HTML is created as follows:
1) Use class to name the control. such as: <div class= "Mini-datagrid" ></div>. The
2) equals sign setting property. such as: <div class= "Mini-datagrid" url= "getdata.jsp" ></div>.
3) "On" Plus event name binding event. such as: <div class= "Mini-datagrid" ></div>.
Common Note:
1) The class name of the component, both "mini-" and the lowercase class name. such as "Mini-button", "Mini-textbox", "Mini-tree", "Mini-tabs" and so on.
2) The event name must be lowercase. It is not possible to name "OnClick" or "Onrowclick".
3) Event binding function with no parentheses. Cannot appear onclick= "OnClick ()", onrowclick= "Onrowclick ()" and so on.
4) The HTML tag placeholder, which is the component location. You do not need to call the "render" method to render.
5) Gets the component object by ID. If <div id = "grid1" class= "Mini-datagrid" ></div> defined, you can pass: var Grid = Mini.get ("Grid1"); To get the Component object. The following operation refers to JavaScript mode.
from a concise, fast, and prescriptive development perspective, JQuery MINIUI recommends using HTML tabbed configuration to build the interface. The
is also the default way of writing in all examples, so you can learn to use the features well.