Artdialog Popup mode

Artdialog is a compact Web dialog component that compresses only 10 KB and does not rely on other frameworks.

In the page head introduced Artdialog, note that if the file with skin parameters will be non-blocking way to automatically load the corresponding skin CSS file, of course you can still use the traditional way to refer to the "skins/" directory of the CSS file, the two selected.

<script src="artDialog.js?skin=default"></script>

If the project uses jquery as the framework, reference the jquery Artdialog version:

<script src="jquery.artDialog.js?skin=default"></script>

If you need to provide better support under an IFRAME application, you need to add:

<script src="artDialog.iframeTools.js"></script>

Configuration parameters

name	type	Default Value	Description
Content
Title	String	Message	Title Content
Content	String	Null	The message content. 1, if the content type is object also need Tmpl parameter mate 2, 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 3, if not set content value will have loading animation
	HtmlElement
	Object
Button
Yesfn	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
Nofn	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; If passed in true indicates that only the button with the Close function is displayed The Close button in the title bar of the dialog box is actually the Cancel button, but the visual is different, click the same trigger Nofn event
	Boolean
Yestext	String	Determine	"OK button" text
Notext	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 control interface to restore the available 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. 1, if the fixed parameter is turned on the browser viewport as the benchmark; 2, can use ' 0% ' ~ ' 100% ' as the relative coordinates, if the browser window size is changed, it will also be adjusted accordingly
	String
Top	Number	' Goldenratio '	The coordinates of the y-axis. 1, if the fixed parameter is turned on the browser viewport as the benchmark; 2, you can use ' 0% ' ~ ' 100% ', ' goldenratio ' as the relative coordinates, if the browser window size is changed it will also be adjusted accordingly, where ' goldenratio ' represents the vertical center of the golden Ratio, Absolute Center please use ' 50% '
	String
Visual
Lock	Boolean	False	Turn on the lock screen. Interrupts the interaction outside the user dialog box to display very important actions/messages, so it is not recommended to use it frequently
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. Use: 1. Prevent repeated ejection 2, can be subsequently used ART.DIALOG.LIST[YOUID] Get control interface
	Number
Tmpl	String	Null	Enabling the template engine to stitch the message content, and also need to pass in the literal object with the content parameter to take effect, see example
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.
Initfn	Function	Null	Functions that are executed after a dialog box pops up
Closefn	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 a callback function for the Close button, and the Closefn will execute regardless of how the dialog is closed.
Show	Boolean	True	Whether to display a dialog box

To configure global default settings:

(function (config) { config[‘lock‘] = true; config[‘fixed‘] = true; config[‘yesText‘] = ‘yes‘; config[‘noText‘] = ‘no‘; // [more..] })(art.dialog.defaults);

Configuration parameter sample content [Content]1. Incoming string

art.dialog({ content: ‘我支持HTML‘ });

Run

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 to the dialog box, the Display:block property will be set to display the element 3, the dialog box closes when the element will revert to the original position in the page, style The display property is also restored

art.dialog({ content: document.getElementById(‘demoCode_content_DOM‘), id: ‘EF893L‘ });

Run

3. Advanced application: Incoming object and generate content using "Tmpl" template parameters

Note: Stitching strings is a rather uninteresting job, and Artdialog internally uses a mini-template engine to parse its own UI framework, which you can use to format content with the TMP parameter. The template supports native JavaScript syntax and can be conditionally judged. It is recommended that you try to store the template using the type= "Text/tmpl" script tag, such as:

var tmpl = document.getElementById(‘tmpl_demoCode_content‘).innerHTML; art.dialog({ content: { code: 0, users: [‘糖饼‘, ‘月月鸟‘, ‘水水‘, ‘丽丽‘, ‘花花‘, ‘大叔‘], me: ‘糖饼‘, web: ‘http://www.planeart.cn‘ }, tmpl: tmpl });

Run

Title [title]

art.dialog({ title: ‘hello world!‘ });

Run

OK Cancel button [YESFN & Nofn]

Note: The callback function this points to the extension interface, and if False will block the dialog box from closing

function () { this.title(‘3秒后自动关闭‘).time(3); return false; }, noText: ‘关闭‘, noFn: true //为true等价于function(){} });

Run

custom buttons [Button]

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

function () {this.content(‘你同意了‘).time(2); return false; }, focus: true }, { name: ‘不同意‘, callback: function () {alert(‘你不同意‘) } }, { name: ‘无效按钮‘, disabled: true }, { name: ‘关闭我‘ } ] });

Run

Timed-off messages [TIME]

art.dialog({ time: 2, content: ‘两秒后关闭‘ });

Run

Prevent duplicate popup [ID]

art.dialog({ id: ‘testID‘, content: ‘再次点击运行看看‘ }); art.dialog({id: ‘testID‘}).title(‘3秒后关闭‘).time(3);

Run

Define message icon [icon]

Built-in icons: Alert, succeed, error, confirm

art.dialog({ icon: ‘succeed‘, content: ‘我可以定义消息图标哦‘ });

Run

Content and boundary padding margin [padding]

Sometimes the default content padding is not required, such as displaying pictures and videos

art.dialog({ padding: 0, title: false, content: ‘‘, lock: true });

Run

Lock screen [lock & background & opacity]

function () { art.dialog({content: ‘再来一个锁屏‘, lock:true}); return false; }, noFn: true });

Run

Following elements [Follw]1, Standard form

art.dialog({ follow: document.getElementById(‘followTestBtn‘), content: ‘让对话框跟着某个元素，一个元素同时只能出现一个对话框‘ });

Run

2. Use shorthand form (the onclick event is already bound, note that this return value is no longer a dialog box control interface)

art(‘#demoCode_follow_a‘).dialog({ content: ‘让对话框跟着某个元素，一个元素同时只能出现一个对话框‘ });

Element trigger Run»

Custom coordinates [left & top]

art.dialog({ left: 100, top: ‘60%‘, content: ‘我改变坐标了‘ });

Run

Create a floating message window in the lower right corner

art.dialog({ id: ‘msg‘, title: ‘公告‘, content: ‘hello world!‘, width: 320, height: 240, left: ‘100%‘, top:‘100%‘, fixed: true, drag: false, resize: false })

Run

Set size [width & height]

art.dialog({ width: ‘20em‘, height: 55, content: ‘尺寸可以带单位‘ });

Run

Create a full-screen dialog box

art.dialog({ width: ‘100%‘, height: ‘100%‘, left: ‘0%‘, top: ‘0%‘, fixed: true, resize: false, drag: false })

Run

Stationary positioning [Fixed]

art.dialog({ fixed: true, content: ‘请拖动滚动条查看‘ });

Run

Don't drag [drag & Resize]

art.dialog({ drag: false, resize: false, content: ‘禁止拖拽‘ });

Run

Control Interface

name	Description
Close ()	Close dialog box
show ()	Show dialog box
Hide ()	Hide dialog
title (value)	Write title. No parameter returns the header container element
content (value)
button (arguments)	For example: button ({name: ' Login ', callback:function () {_form.submit ()}) For more usage See the example document
Follow (element)
position (left, top)	Reposition Dialog
Size (width, height)	Reset dialog box size
lock ()	lock screen
unlock ()	unlock
time (val)	timed off (per second)

Note: The control interface return value is this, so you can use the chained programming style.

Example of a control interface

The control interface can control the dialog box after the dialog is initialized, requires a certain JavaScript base, and does not show too much.

Get control Interface: direct reference Control Interface

var dialog = art.dialog({ title: ‘我是对话框‘, content: ‘我是初始化的内容‘ }); dialog.content(‘对话框内容被控制接口改变了‘).title(‘提示‘);

Run

Get Control Interface: Use dialog box ID

art.dialog({ id: ‘KDf435‘, title: ‘警告‘, content: ‘我是初始化的内容‘ }); art.dialog.list[‘KDf435‘].content(‘对话框内容被控制接口改变了‘).time(2);

Run

Get Control Interface: this reference

function () { this.content(‘你点了确定按钮‘).position(‘50%‘, null).lock().time(2); return false; }, initFn: function () { this.content(‘对话框内容被控制接口改变了‘); } });

Run

Demo Four

Close all dialog boxes on the page

var list = art.dialog.list; for (var i in list) { list[i].close(); };

Run

Button Interface Demo

Note: If the callback function returns False, the dialog box will be blocked from closing

function () { this.content(‘我更改了删除按钮‘).button({ name: ‘删除‘, disabled:false }); return false; }, focus: true }] }); dialog.button( { name: ‘删除‘, callback: function () {alert(‘remove‘) }, disabled: true } )

Run

Change the closing mode

function () {this.hide(); return false; } }).show();

Run

Ajax Advanced Applications: Execute special script tags in HTML fragments

The <script type= "Text/dialog" ></script> tagged JavaScript in the HTML fragment will be executed in the dialog box, which points to the dialog control interface, where the code executes within the closure without affecting the global , which allows for further modularity of the content.

(This example uses Ajax and needs to be run on the server.) can open the./ajaxcontent/login.html view custom scripts in the source code)

var dialog = art.dialog({id: ‘N3690‘}); // jQuery ajax $.ajax({ url: ‘./ajaxContent/login.html‘, success:function (data) { dialog.content(data); }, cache: false });

Run

Extension: IFrame App toolset

name	Description
Core approach
Art.dialog.parent	Gets the Artdialog available top-level window object. This is different from the direct use of window.top, it can exclude the Artdialog object does not exist or the top-level page is the framework set of cases This is the core method in the IFRAME application toolset, which you can use to manipulate the parent Page object (including the dialog box above)
Art.dialog.data (name, value)	The cross-frame data share write interface. The data exchange between the frame and the frame and the main page is a headache, and under normal circumstances you have to know the name of the framework in order to exchange data, and it is a nightmare to operate in a complex multi-layered framework. And the data method is to solve this problem, you do not have to control the framework level of the problem, it can write any type of data, and to do the data sharing between each page.
Art.dialog.data (name)	Cross-frame data sharing read interface. Specifying name returns data, and any page that references Artdialog is valid
Art.dialog.removeData (name)	Deletes an interface across a framework data share. Deletes data of the specified name, any page referencing Artdialog is valid
Asynchronous Data dialog box
Art.dialog.open (URL, options, cache)	Create an IFRAME page Parameters: Address, configuration parameters, cache switch (default true)
Art.dialog.open.api	The IFRAME page gets the open method control interface. (Note that the Artdialog script file must also be referenced in this IFRAME)
Art.dialog.open.origin	The IFRAME page gets the open method that triggers the source page window object. (Note that the Artdialog script file must also be referenced in this IFRAME)
Art.dialog.close ()	The IFRAME page closes the shortcut to the dialog box created by the open method. The Close method is equivalent to: var API = Art.dialog.open.api;api && api.close (); (Note that the Artdialog script file must also be referenced in this IFRAME)
Art.dialog.load (URL, options, cache)	Ajax Loading Content Parameters: Address, configuration parameters, cache switch (default true)
Basic Interaction dialog box
Art.dialog.alert (content)	Warning message (only one alert is allowed) Parameters: Content
Art.dialog.confirm (content, YESFN, nofn)	Confirm (only one confirm is allowed at the same time) Parameters: Content, OK button callback function, Cancel button callback function
Art.dialog.prompt (content, YESFN, value)	Ask a question (while allowing only one prompt) Parameters: Content, determining button callback function, text box default value
Art.dialog.tips (content, time)	Short notice (with only one tips allowed) Parameters: Content, display time (in seconds, default 1.5)
Custom
Art.dialog.through (Options)	Create a dialog box that is normal to traverse the frame It is discouraged to use window.top in such a way that it is possible for a dialog box to trigger a page reset that causes all objects to be emptied in memory and the dialog box cannot be closed, so you should create a custom dialog box with this secure method.

The frameset page cannot overwrite third-party elements, but you can use an IFRAME to set up the frameset page to work as expected, as shown in the following demo document

Artdialog Popup mode