[Learn AF3] The seventh APP framework component Popup

Popup dialog box for AF3

Component Name : Popup

　 whether the JS control: Yes, $.afui.popup

description : Af3 in the popup and af2 compared to the change is not small, still through the plugin popup to achieve

Method:

Show ()         Display Popup Dialog Hide ()         hides popup dialog box

Construction Parameters: when you construct a popup, you can simply pass a string, and the popup appears as an alert dialog box. An object object can also be passed with the following property settings:

1ID (string) The ID of the popup package DOM element2Title of the title (string) Popup3Message (string) to display4Canceltext (String) cancels the text of the button5Donetext (String) completes the text of the button6Cancelonly (Bool/false) whether to show only the Cancel button7Cancelclass (String) cancel the CSS class of the button8Doneclass (String) completes the CSS Class of the button9Autoclosedone (Bool/false) is automatically hidden and set to True when the user clicks the Done button, the popup is automatically hidden.TenSuppresstitle (Bool/false) whether to hide the header row of the dialog box
Cancelcallback callback function for function Cancel button
Donecallback function Completion button is clicked on the callback
The callback function when the OnShow function popup is displayed

Event:

Close     Popup Closes

Examples of Use :

1, Basic Alert dialog box

$.afui.popup ("I ' m replacing an alert box");

2, use the popup with more settings

$.afui.popup ({    "warning",    "This is a test of the emergency alert system!! Don ' t panic! " ,    " Cancel Me ",    function  () {        console.log (" cancelled ");    },    " I ' m done! " ,     function () {        console.log ("Done for!" );    },    false});

3, advanced Use, Implement Login dialog box (by setting HTML code for the message property)

$.afui.popup ({    "user Login",    "Username: <input type= ' text ' class= ' af-ui-forms ' ><br > "
+ "Password: <input type= ' text ' class= ' af-ui-forms ' style= ' Webkit-text-security:disc ' >",    "Cancel" ,     function  () {},    " Login ",    function  () {        alert (" Login ... ")    },    false });

4, declarative popup (does not seem to be the spirit)

<a class= "button" Data-popup data-message= "Hello World" >Hello</a>

Sixth built-in vector icon in App Framework 3.0 [Learn AF3 series]

[Learn AF3] The seventh APP framework component Popup