Js-artdialog Document Description

Artdialog is a JavaScript-based dialog box component that has a sophisticated interface and friendly interface Lself-adapting contentArtdialog's special UI framework adapts to content changes, and even the content that the external program dynamically inserts is still adaptive, so you don't have to consider the message content size to use it. Its message container even allows text to be centered or left-aligned based on its width-all xhtml+css native implementations.
LPerfect InterfaceIts interface is perfect and can be easily used in conjunction with external programs. such as asynchronous write message, control location, size, display and hide, close and so on.
La meticulous experienceIf it is not in the input state, it supports the ESC shortcut key to close, can be specified to pop up near the element, to make the operation more convenient; smart buttons to add focus; The super response area is especially optimized for touch screen devices such as the ipad, and the pre-cached skin images respond faster ...
Lcross-platform compatibilityCompatible: Mobile devices such as ie6+, Firefox, Chrome, Safari, opera, and ipad. And IE6 can also support the static positioning (fixed), alpha channel PNG background of modern browsers.：http://code.google.com/p/artdialog/downloads/list
Quick Start first, the use of traditional parametersArt.dialog (content, OK, cancel) Example: Art.dialog (' Simple pleasing interface, powerful expressiveness, graceful internal implementation ', function () {alert (' yes ');}); Art.dialog ("Simple and enjoyable interface, powerful expressive, elegant internal implementation");
second, the use of literal communication parametersArt.dialog (Options) example var dialog = Art.dialog ({title: ' Welcome ', content: ' Welcome to the Artdialog dialog box component! ', Icon: ' Succeed ', Follow:document.getElementById (' btn2 '), Ok:function () {this.title (' warning '). Content ( ' Please note that Artdialog will close after two seconds!         '). Lock (). Time (2);     return false; } });
third, the extension methodNeed to work on a popup dialog box? Artdialog simple and practical extension method can make all this simple. In the case of an AJAX asynchronous operation, we can first define an extension method returned by a Variable reference dialog box:
var mydialog = Art.dialog ();//Initialize an empty dialog box with loading icon jquery.ajax ({url: ' http://web5.qq.com/content?id=1 ', success : function (data) {mydialog.content (data);//Fill dialog box contents}});
If you need to use program control to close, you can use the Close method to close the dialog box: Mydialog.close ();
Plugins: Framework application ToolsArtdialog provides exclusive plugins for the framework applications of CMS classes, such as traversal framework, IFRAME, AJAX, cross-frame value operation, etc. Example: Use the Open method to embed a page, and use the data method to pass through each IFRAME:
var val = document.getElementById (' demoinput04-3 '). Value; Art.dialog.data (' Test ', Val); Art.dialog.data (' Homedemopath ', './_doc/'); At this point the iframea.html page can use Art.dialog.data (' test ') to obtain data such as://document.getElementById (' Ainput '). Value = Art.dialog.data (' Test '); Art.dialog.open ('./_doc/iframea.html ');
JQuery + artdialogArtdialog provides a jquery version that is functionally consistent with the standard version, calling only to change the art prefix to the jquery namespace. Normal call $.dialog ({content: ' Hello world! '}); Using the Selector method, the live click event is automatically used at this time, and the follow mode $ (' #main. Test ') is enabled. dialog ({content: ' Hello World '}); (Minimum compatible jquery1.3.2, but framework app plugin requires jquery1.4+ run [?])
Configuration Parameters

name	type	Default Value	Description
Content
Title	String	Message	Title Content
Content	String	' Loading. '	The message content. 1, if the HtmlElement type is passed in, if it is a hidden element will be set Display:block to display the element, the other properties and bound events will be fully preserved, the dialog box will revert to the original display properties, and reinsert the original document location 2, if not set content value will have loading animation
	HtmlElement
Button
Ok	Function	Null	Determines the button callback function. A function that returns false prevents the dialog box from closing; the function this pointer points to the internal API; If passed in true indicates that only the button with the Close function is displayed
	Boolean
Cancel	Function	Null	Cancels the button callback function. A function that returns false prevents the dialog box from closing; the function this pointer points to the internal API, or the Close button in the title bar of a button dialog box that shows only the close function is actually a Cancel button, except that the visual is different, and clicking the same triggers the Cancel event.
	Boolean
Okval	String	Determine	"OK button" text
Cancelval	String	Cancel	"Cancel Button" text
button	Array	Null	Custom button. Configuration parameter member: name--button name callback--The function that is executed after pressing focus--whether the focus point disabled--whether the button is marked as unavailable (subsequent use of the extension method to get it back to usable state) example: parameters such as: [{name: ' Login ', Callback:function () {}}, {name: ' Cancel '}]. Note that clicking the button by default triggers the button to close the action and needs to prevent the trigger from closing please let the callback function return False
Size
Width	Number	' Auto '	Sets the message content width, which can be taken with units. This is generally not required, and the dialog box will adapt itself to the content. If the unit is set to a percentage, it will be based on the viewable range of the browser, and will be adjusted if the browser window size is changed.
	String
Height	Number	' Auto '	Sets the message content height, which can be taken with units. It is not recommended to set this, but the content should be stretched to its own height. If the unit is set to a percentage, it will be based on the viewable range of the browser, and will be adjusted if the browser window size is changed.
	String
Position
Fixed	Boolean	False	Turn on static positioning. Stationary positioning is a property of the css2.1, which still remains in place in the browser, and is not affected by scroll bar dragging. (Artdialog support IE6 fixed)
Follow	HtmlElement	Null	Keeps the dialog box attached to the specified element. You can pass in the element ID name, noting that the ID name needs to be prefixed with the "#" number
	String
Left	Number	' 50% '	The coordinates of the x-axis relative to the viewable area. You can use ' 0% ' ~ ' 100% ' as the relative coordinate, if the browser window size is changed, it will also be adjusted accordingly
	String
Top	Number	' 38.2% '	The coordinates of the y-axis relative to the viewable area. You can use ' 0% ' ~ ' 100% ' as the relative coordinate, if the browser window size is changed, it will also be adjusted accordingly
	String
Visual
Lock	Boolean	False	Turn on the lock screen. Interrupts the interaction outside the user's dialog box to display very important actions/messages, so it is not recommended to use it frequently, which makes the operation cumbersome
Background	String	' #000 '	Lock screen Matte Color
Opacity	Number	0.7	Lock screen Matte Transparency
Icon	String	Null	Defines the message icon. You can define the icon name in the "skins/icons/" directory as the parameter name (without the suffix name)
Padding	String	' 20px 25px '	Content and boundary padding (i.e. CSS padding)
Interaction
Time	Number	Null	The Settings dialog box displays the time. In units of seconds
Resize	Boolean	True	Whether the user is allowed to adjust dimensions
Drag	Boolean	True	Whether to allow users to drag locations
Esc	Boolean	True	Whether the user is allowed to press ESC to close the dialog box
Senior
Id	String	Null	Sets the unique identifier for the dialog box. Usage: 1, prevent repeat popup 2, define ID can use Art.dialog.list[youid] get extension method
	Number
ZIndex	Number	1987	Resets the global ZIndex initial value. Used to change the height of the dialog box overlay. For example, sometimes with the external floating layer UI components, but they may default zindex is not artdialog high, resulting in unable to float to Artdialog, this time you can give the dialog box to specify a smaller zindex value. Note that this is a configuration that affects the global, and the subsequent dialog box overlay height will be added again.
Init	Function	Null	Functions that are executed after a dialog box pops up
Close	Function	Null	The function to execute before the dialog box closes. A function that returns false prevents the dialog box from closing. Note that this is not the callback function for the Close button, which closes the dialog box regardless of how close is executed.
Show	Boolean	True	Whether to display a dialog box

Extension methods

name	Description
Close ()	Close the dialog box
Show ()	Show dialog box
Hide ()	Hide dialog box
Title (value)	Writes a caption. No parameter returns the header container element
Content (value)	Writes content to the message container. Parameter supports string, DOM object, no parameter returns content container element
button (arguments)	Insert a custom button. Configuration parameter member: name--button name callback--The function that is executed after pressing focus--whether the focus point disabled--whether the button is marked as unavailable (subsequent use of the extension method to restore the available state) Example: button ({NA Me: ' Login ', Focus:true, Callback:function () {}}, {name: ' Cancel '})
Follow (Element)	To snap a dialog box near a specified element
Position (left, top)	Reposition dialog box
Size (width, height)	Resize dialog box
Lock ()	Lock screen
Unlock ()	Unlock
Time (Val)	Timed off (unit seconds)

Configuration Parameters Demo contents [Content] 1. Passing strings

Art.dialog ({content: ' I support HTML '});

2. Incoming HtmlElement Note: 1, the element is not copied but completely moved to the dialog box, so the original events and properties will be preserved 2, if the hidden element is passed into the dialog box, the Display:block property is set to display the element 3, When the dialog box closes, the element reverts to its original position on the page, and the style display property is restored

Art.dialog ({content:document.getElementById (' democode_content_dom '), ID: ' ef893l '});

Title [title]

Art.dialog ({title: ' Hello world! '});

OK Cancel button [OK & Cancel] Note: callback function This points to the extension interface, if False will prevent the dialog box from closing

Art.dialog ({content: ' If a callback function is defined to show the corresponding button ', OK: function() { This. Title (' Auto-off after 3 seconds '). Time (3); returnFalse }, Cancelval: ' Off ', cancel:true//is true equivalent to function () {}});

custom buttons [button] Note: The callback function this points to the extension interface, and if False will block the dialog box from closing; the extension method name corresponding to the button parameter is also "button"

Art.dialog ({id: ' TestID ', content: ' Hello world! ', button: [{name: ' Agree ', CA Llback: function() { This. Content (' You agree '). Time (2); returnFalse }, Focus:true}, {name: ' Disagree ', callback: function() {alert (' You Disagree ')}}, {name: ' Invalid button ', disabled:true }, {name: ' Close Me} '});

Timed-off messages [TIME]

Art.dialog ({time:2, content: ' Two seconds after closing '});

Prevent duplicate popup [ID]

Art.dialog ({id: ' testID2 ', Content: ' Click Run again to see '}); Art.dialog ({id: ' testID2 '}). Title (' closed after 3 seconds '). Time (3);

define the message icon [icon] see the icon in the Skin/icons directory

Art.dialog ({icon: ' Succeed ', content: ' I can define the message icon Oh '});

content and boundary padding [padding] Sometimes there is no need to fill margins with default content, such as displaying pictures and videos

Art.dialog ({padding:0, title: ' Photo ', content: '

Lock screen [lock & background & opacity]

Art.dialog ({lock:true, background: ' #600 ',//Background color opacity:0.87,//transparency content: ' Break the user's interaction outside the dialog box, show important Action and message ', Icon: ' Error ', OK: function{Art.dialog ({content: ' Another lock screen ', lock:true}); returnFalse }, cancel:true});

following elements [FOLLW] 1, standard form

Art.dialog ({follow:document.getElementById (' followtestbtn '), content: ' Let the dialog box follow an element, an element can only appear in one dialog '});

2, use shorthand form (already bound OnClick event, note that this return value is no longer a dialog box extension method)

Art (' #demoCode_follow_a '). dialog ({content: ' Let the dialog box follow an element, an element can only appear in one dialog '});

Custom coordinates [left & top]

Art.dialog ({left:100, top: ' 60% ', content: ' I changed coordinates '});

Create a floating message window in the lower right corner

Art.dialog ({id: ' msg ', title: ' Announcement ', content: ' Hello world! ', width:320, height:240, left: ' 100% ', top: ' 100% ', Fixed:true, Drag:false, resize:false})

Set size [width & height]

Art.dialog ({width: ' 20em ', height:55, content: ' Size can be taken with units '});

Create a full-screen dialog box

Art.dialog ({width: ' 100% ', Height: ' 100% ', left: ' 0% ', Top: ' 0% ', Fixed:true, Resize:false, Drag:false})

Stationary positioning [Fixed]

Art.dialog ({fixed:true, content: ' Please drag the scroll bar to view '} ');

Don't drag [drag & Resize]

Art.dialog ({drag:false, resize:false, content: ' Prohibit drag '});

Extension Method DemoSpecial Note: Extension methods support chained operationsget extension method One: direct reference returnsvar dialog = Art.dialog ({title: ' I am the dialog ', content: ' I am initializing the Contents '}); Dialog.content (' dialog box content has been changed by extension method '). Title (' Hint ');get extension method Two: Through the dialog box IDArt.dialog ({id: ' KDf435 ', title: ' Warning ', content: ' I am initializing contents '}); art.dialog.list[' KDf435 '].content (' dialog box content has been changed by extension method ');get extension Method Three: callback function in thisArt.dialog ({title: ' Warning ', content: ' I am the contents of the initialization ', Ok:function () {this.content (' You clicked the OK button '). Lock ();     return false;     }, Init:function () {this.content (' dialog box content was changed by extension method '); } });close all dialog boxes on the pagevar list = Art.dialog.list; for (var i in list) {List[i].close ();};

Button Interface Demo Note: A callback function that returns false will block the dialog box from closing var dialog = Art.dialog ({    title: ' Warning ',     content: ' Click the Manage button will let Delete button available ',     width: ' 20em ',     button: [{        name: ' admin ',         callback:function () {             this             content (' I changed the delete button ')            . Button ({                 Name: ' Delete ',                  Disabled:false             })            . Lock ();             return false;        },         focus:true    }]});   Dialog.button (    {        name: ' Delete ',    & nbsp;    callback:function () {            Alert (' Delect ')        },         disabled: True    })

Title Countdownvar timer;         Art.dialog ({content: ' time is getting less and less ..., init:function () {var. = this, i = 5;             var fn = function () {that.title (i + ' sec off ');             !i && that.close ();         I--;         };         Timer = setinterval (FN, 1000);     FN ();     }, Close:function () {clearinterval (timer); }}). Show ();Close does not delete contentArt.dialog ({id: ' show-hide ', Content: ' Block dialog box deleted after closing, hide dialog Only ', Close:function () {this.hide ();     return false; }}). Show ();AJAXAdvanced Apps: Execute special script tags in HTML fragmentsThe <script type= "Text/dialog" ></script> label wrapped JavaScript in the HTML fragment will be executed inside the Artdialog, which points to the dialog extension method, This allows for further modularity of message content. (This example uses Ajax and needs to be run on the server.)   can open the./ajaxcontent/login.html view the custom script in the source code) var dialog = Art.dialog ({id: ' N3690 ', title:false}); JQuery ajax $.ajax ({url: './ajaxcontent/login.html ', success:function (data) {dialog.content (data)     ; }, Cache:false});apply to your projectIntroduce artdialog in the page head, where the skin parameter represents the style file used by the dialog box (if the project uses jquery as the framework, then the jquery artdialog version is referenced). <script src= "Artdialog/artdialog.js?skin=default" _cke_saved_src= "Artdialog/artdialog.js?skin=default" > </script> Load Plug-ins: <script src= "Artdialog/plugins/iframetools.js" _cke_saved_src= "If you need better support in an IFRAME application     Artdialog/plugins/iframetools.js "></script> Configure global default parameters (optional): (function (config) {config[' lock '] = true;     config[' fixed '] = true;     config[' okval '] = ' Ok ';     config[' cancelval ' = ' Cancel '; [More..]}) (Art.dialog.defaults);

Source: http://www.91quanzi.com/article17/

Js-artdialog Document Description