DWZ framework learning

The object structure is as follows:

The biggest feature of DWZ is that it uses html extension to replace javascript code, rather than using traditional object-oriented methods to develop javascript libraries;
The html extension method is simple, easy to expand, and based on jQuery;
The javascript library features a way of thinking that is closer to the application and called in the form of components; however, the implementation is complicated and the expansion is not convenient;

Core JS introduction:
Dwz. core. js
Provides the program entry;
Extended jQuery for DWZ and extended basic data types;

 

Dwz. ui. js
Provides a global callback method;
During DWZ initialization, the Global method initEnv () is called back and the interface is initialized. The Custom plug-in can be extended in the initUI () method;

 

Dwz. ajax. js
Provides a global tool for ajax operations;

 

Dwz. regional. zh. js
It provides Chinese-based English-to-Chinese language conversion;

 

List of common components:
1. Link (a), dialog box (dialog), and tab layout (navTab) components
The format is as follows:

Attribute description:
Target:

Ajax: Sends an ajax request and returns it to the container;

AjaxTodo: Adds a selection dialog box based on ajax (the title attribute is required );

NavTab: return to a component similar to the tab;

Dialog: return to the dialog box component;

DwzExport: used to export files; targetType (dialog, navTab) is navTab by default; the pagerForm of the current container will be submitted together; title indicates the prompt information;
Rel: execute the caller's pointer (navTab and diank are _ blank by default). You can use the rel attribute to refresh the page, or use the navTabId value in json returned by the server for dynamic transmission;
NavTab attributes:
Fresh: indicates whether to reload data when navTab is repeatedly opened. The default value is true;
External: if external = "true" or href is an Internet connection, open the navTab page in iframe mode;
Dialog related attributes:
Max: attribute indicates that the dialog is maximized by default when it is enabled;
Mask: indicates that the background is overwritten after the layer is opened;
Maxable: whether to maximize;
Minable: whether it can be minimized;
Mixable: whether to maximize;
Resizable: variable size;
Drawable: whether to drag;
Width: the default width when enabled;
Height: the default height when enabled;
Width and height: the width and height of the dialog;
Fresh: whether to re-load data when the dialog is repeatedly opened. The default value is true;
Close: listener function for disabling dialog. A boolean type return value is required;
Param: list of parameters of the close listener function, in json format, for example, {msg: 'message '};
Callback: callback function;

 

2 panel components
The format is as follows:

Attribute description:
Close: Disabled. Default value;
Collapse: it can be folded;
DefH: height (unit: px). The default value is the actual height;
MinH: minimum height (unit: px );

 

3 tab panel (tabs) component
The format is as follows:

Attribute description:
EventType, click: mouse click, hover: Move the mouse;
CurrentIndex. The default value is 0 (0 ~ N );

4. Prompt window
Confirmation prompt box
AlertMsg. confirm ("The information you modified has not been saved. Please save or cancel it! ",{
OkCall: function (){
$. Post (url, {accountId: accountId}, DWZ. ajaxDone, "json ");
},
CancelCall: function (){}
});
Success prompt box, alertMsg. correct ('your data has been submitted successfully! ')
Error prompt box, alertMsg. error ('The data you submitted is incorrect. Please check and submit again! ', [Options])
Warning box, alertMsg. warn ('The data you submitted is incorrect. Please check and submit again! ', [Options])
Information prompt box, alertMsg.info ('The data you submitted is incorrect. Please check and submit again! ', [Options])
Options object attributes:
OkName: specifies the button name;
OkCal: confirmation button callback;
CancelName: the name of the cancel button;
CancelCall: cancels the button callback;
KeyCode: keyboard key definition. See DWZ. keyCode;

 

5. table)
The format is as follows:

Attribute description:
LayoutH: parent div height-current layoutH = actual height, minimum: 50px;

6. Form submission
The format is as follows:

Class: defines whether to verify the form;
Onsubmit: specifies the callback function when submitting the request. By default, DWZ. ajaxDone (json) is called. If the prompt information is specified, a prompt message is displayed;
Built-in callback function:
NavTabAjaxDone: the default callback in The Tab mode. DWZ. ajaxDone (json) is called first to display the prompt information;
CallbackType = "closeCurrent" to close the current window;
CallbackType = "forward", redirects the current window to forwardUrl;
CallbackType = "forwardConfirm", prompting confirmMsg. If you are sure, redirect to forwardUrl; otherwise, disable it;

DialogAjaxDone: the default callback in the dialog box mode. DWZ. ajaxDone (json) is called first to display the prompt information;
CallbackType = "closeCurrent" to close the current window;

DWZ framework learning