DWZ framework learning

Source: Internet
Author: User

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:

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.