DWZ (J-UI) framework--Getting Started

Http://www.cnblogs.com/chenyongsai/p/4933982.html

DWZ (J-UI) framework--Getting Started

First, understand

Overview: The Ajax-enabled Open source Framework developed by the Chinese themselves based on jquery.

Objective: Simple and practical, easy to expand (on the basis of the original architecture to expand convenience), rapid development,RIA ideas, lightweight

Use: to replace JavaScript code with HTML extensions

Idea: According to the official web page sample, view the offical code package, consult the relevant sub-page, see the Help document, add a fixed tag attribute syntax

Advantage: The first time the page is loaded into the interface to the client, after the interaction with the server is only data interaction, do not occupy the interface-related network traffic, open source free

Disadvantages: Fewer documents, fewer developers, less shared resources, and easy to read documents

Ii. Information

Official Address (Online demo address):http://j-ui.com/or http://www.duqn.com/

SOURCE Bundle: Https://codeload.github.com/dwzteam/dwz_jui/zip/master

Help Document: Extract source Package--"Dwz_jui-master\doc

Video commentary: Http://pan.baidu.com/s/1bnngfqJ

　　

Third, the source directory structure

　　

1. Folder:

Idea: Build the configuration file generated by the code release (regardless)

Bin: Compressed JS folder in the DWZ frame JS file code and Compression tool

Chart: The JS code of the graphical module

Demo: Store temporary demo data files

Doc: Help documentation

JS:DWZ Framework Core JS Code library

Themes: Style sheet CSS Code

Uploadify: Uploading controls

Xheditor: Official website default small icon style

2.html file:

Index.html: Main Page

...

Xxxx.html: Content Code Snippet

...

3. Configuration file:

Dwz.frag.xml: Initializing the configuration file

Iv.hellow World

1. Import the following dependent files into the project (depending on the dependencies, you can view the dependent files referenced by index.html)

　　　　

2. Start the service and access index.html

Page effect:

　　　　

V. Modular Multiplexing

Find the page you need in the official access address:

　　　　

As shown above: The style effect code snippet shown in the page content area is in the demo_page1.html file

Vi. Data Interaction

1. Form submission

Submission Format:

Default commit: <form onsubmit= "return validatecallback (this);" action= ' ... ' method= ' ... '>

Navtab Type page submission: <form onsubmit= "return validatecallback (this,navtabajaxdone);" action= ' ... ' Method= ' ... '>

Dialog Type page submission: <form onsubmit= "return validatecallback (this,dialogajaxdone);" Action= " ... ' method= ' ... '>

The server returns data:

json:{

"StatusCode": "200",

"Message": "Operation succeeded",

"Navtabid": "",

"rel": "",

"Callbacktype": "Closecurrent",

"Forwardurl": ""

}

Tips:

Callbacktype Closecurrent will close the current tab, only callbacktype= "forward" requires Forwardurl value

Navtabajaxdone This callback function is basically generic, if you have special needs, you can customize the callback function, if the form submission only prompts the operation is successful, you can not specify a callback function. The framework will call Dwz.ajaxdone () by default

...

For more information, please see the online Help document :http://j-ui.com//doc/dwz-user-guide.pdf

　　

DWZ (J-UI) framework--Getting Started