jBox 2.3 is the latest multi-functional dialog plug-in based on jquery FAQ_jquery

Plug-in description
- jBox is a multi-functional dialog plug-in based on jQuery, which can achieve the overall style effect of the website and give users a new visual enjoyment.
Operating environment
- Compatible with IE6, Firefox, Chrome, Safari, Opera and other mainstream browsers.
Usage License
- jBox is free to use forever, but the relevant copyright information must be retained. If you have any good suggestions, you can leave a message directly below.

Version: 2.3
Size: 19.8k
Download: Click to download
Online demo: http://www.kudystudio.com/jbox/ jbox-demo.html
[2011-11-08] jBox v2.3 beta version update

Copy code The code is as follows :

- [New] The tip method adds an opacity option, which determines whether to display the isolation layer.
- [New] Added showScrolling option to hide the browser's scroll bars when displaying the jBox window.
- [New] When multiple windows coexist, when you click on a window title, the window will automatically be at the top.
- [Adjustment] The id option is changed to null by default. When it is null, a random id will be automatically generated, and only one jBox will be displayed for each id.
- [Adjustment] The loaded option adds a parameter h. The parameter h represents the jQuery object of the window content, which is convenient for users to initialize the content after the window is loaded.
- [Adjustment] Put global settings into independent js files and put them in the directory i18n. Currently, there is only jquery.jBox-zh-CN.js.
- [Adjustment] Pressing the space bar can directly execute the event submitted by the default button (to retain this functionality, the button does not look very good when it is focused, but the user experience should be prioritized).
- [Fix] Fixed the bug that the multi-window state cannot be displayed when switching between multiple windows in IE.

Usage:

Copy the code The code is as follows:

Common usage issues:
1. Please use the XHTML 1.0 standard

2. Don’t want to display the title?
Set title to null, for example: jBox('content', { title: null });
3. Don't want buttons? Custom button?
Set buttons to {} to not display buttons, for example: jBox('content', { buttons: {} });
Custom button: jBox('content', { buttons: {'Button 1 ':'Button 1 click return value','Button 2':'Button 2 click return value'} });
You can also set buttonsFocus which button you want to be the default button, and the index starts from 0
4. No Show isolation layer?
Set opacity to 0, for example: jBox('content', { opacity: 0 });
5. Will the window close automatically?
Set timeout to 0 to indicate that it will not close automatically. A positive number indicates how many milliseconds it will take to close automatically. For example, it will close after 3 seconds: jBox('content', { timeout: 3000 });
6. Do not display isolation In the case of layers, want to prevent multiple identical windows from popping up when clicking a button?
Just pass the id in, because an id will only display one window, for example: jBox('content', { id: 'my-id'});
7. The height and width of the window are certain Do you want to specify a value? Can it be adaptive?
In addition to iframe, in other cases, you can specify that the height and width of the window are adaptive, for example: jBox('content', { width: 'auto', height:'auto' });
jbox There are many optional parameters. Combining different parameters can have different effects. Please check the global parameter description below (in the file jquery.jBox-zh-CN.js). If you are using Simplified Chinese and do not want to change the global configuration, you do not need to load jquery.jBox-zh-CN.js, because the default settings in jquery.jBox-2.3.min.js are the same as jquery.jBox-zh-CN. js is the same. If you only want to modify certain options, such as window borders, you only need one line of code: jBox.setDefaults({ defaults: { border: 8} });
Friends who like jBox, don’t forget Click [Recommended] Oh, 3q

Copy code The code is as follows:

/* jBox global settings*/
var jBoxConfig = {};
jBoxConfig.defaults = {
id: null, /* The unique id in the page, if it is null then Automatically generate a random ID, one ID will only display one jBox */
top: '15%', /* The distance of the window from the top, which can be a percentage or pixel (such as '100px') */
border: 5, /* The pixel size of the outer border of the window must be an integer above 0*/
opacity: 0.1, /* The transparency of the window isolation layer. If set to 0, the isolation layer will not be displayed*/
timeout : 0, /* How many milliseconds will the window display before automatically closing? If set to 0, it will not automatically close*/
showType: 'fade', /* The type of window display. Optional values ​​are: show, fade, slide */
showSpeed: 'fast', /* The speed of window display. Optional values ​​are: 'slow', 'fast', and an integer representing milliseconds. */
showIcon: true, /* Whether to display the window title. icon, true to display, false not to display, or a custom CSS style class name (taking the icon as the background) */
showClose: true, /* Whether to display the close button in the upper right corner of the window*/
draggable: true, /* Whether the window can be dragged*/
dragLimit: true, /* When the window can be dragged, whether it is limited to the visible range*/
dragClone: ​​false, /* When the window can be dragged In the case of a window, whether to clone the window when the mouse is pressed */
persistent: true, /* When the isolation layer is displayed, whether to persist the window from closing when the isolation layer is clicked */
showScrolling: true , /* Whether to display the browsing scroll bar*/
ajaxData: {}, /* When the window content is identified with the get: or post: prefix, the data of the ajax post, for example: { id: 1 } or " id=1" */
iframeScrolling: 'auto', /* When the window content is identified by the iframe: prefix, the value of the scrolling attribute of the iframe. The optional values ​​are: 'auto', 'yes', 'no ' */
title: 'jBox', /* The title of the window*/
width: 350, /* The width of the window, the value is 'auto' or an integer representing pixels*/
height: ' auto', /* The height of the window, the value is 'auto' or an integer representing pixels*/
bottomText: '', /* The content to the left of the button of the window, this setting is invalid when there is no button*/
buttons: { 'OK': 'ok' }, /* Buttons of the window*/
buttonsFocus: 0, /* Indicates which button is the default button, and the index starts from 0*/
loaded: function ( h) { }, /* Function executed after the window is loaded. It should be noted that if it is ajax or iframe, the window loading will not be completed until the http request is loaded. The parameter h represents the jQuery object of the window content*/
submit: function (v, h, f) { return true; }, /* The callback function after clicking the window button. Returning true means closing the window. There are three parameters. v means the return value of the clicked button, and h means The jQuery object of the window content, f represents the form key value in the window content*/
closed: function () { } /* Function executed after the window is closed*/
};
jBoxConfig.stateDefaults = {
content: '', /* Status content, prefix identification is not supported*/
buttons: { 'OK': 'ok' }, /* Status button*/
buttonsFocus: 0, /* Indicates which button is the default button, and the index starts from 0*/
submit: function (v, h, f) { return true; } /* The callback function after clicking the status button, returning true means it is closed Window has three parameters, v represents the return value of the clicked button, h represents the jQuery object of the window content, and f represents the form key value in the window content*/
};
jBoxConfig.tipDefaults = {
content: '', /* Prompt content, prefix identification is not supported*/
icon: 'info', /* Prompt icon, optional values ​​​​are 'info', 'success', 'warning', 'error', 'loading', the default value is 'info', when it is 'loading', the timeout value will be set to 0, indicating that it will not automatically close.*/
top: '40%', /* The distance from the top of the prompt, which can be a percentage or pixels (such as '100px') */
width: 'auto', /* The height of the prompt, the value is 'auto' or an integer representing pixels*/
height: 'auto', /* The height of the prompt, the value is 'auto' or an integer representing pixels*/
opacity: 0, /* The height of the window isolation layer Transparency, if set to 0, the isolation layer will not be displayed*/
timeout: 3000, /* How many milliseconds will it take for the prompt to automatically close after it is displayed, which must be an integer greater than 0*/
loaded: function (h) { } /* Function executed after the window is loaded. The parameter h represents the jQuery object of the window content*/
};
jBoxConfig.messagerDefaults = {
content: '', /* Content of the message, prefix is ​​not supported Identity*/
title: 'jBox', /* The title of the message*/
icon: 'none', /* The message icon. When the value is 'none', the icon is not displayed. The optional value is 'none'. ', 'info', 'question', 'success', 'warning', 'error' */
width: 350, /* The height of the information, the value is 'auto' or an integer representing pixels */
height: 'auto', /* The height of the information, the value is 'auto' or an integer representing pixels*/
timeout: 3000, /* How many milliseconds after the information is displayed, it will automatically close. If set to 0, it will not automatically Close*/
showType: 'slide', /* Type of information display, optional values ​​are: show, fade, slide */
showSpeed: 600, /* Speed ​​of information display, optional values ​​are: 'slow', 'fast', an integer representing milliseconds*/
border: 0, /* The pixel size of the outer border of the message must be an integer above 0*/
buttons: {}, /* The pixel size of the message Buttons*/
buttonsFocus: 0, /* Indicates which button is the default button, and the index starts from 0*/
loaded: function () { }, /* Function executed after the window is loaded*/
submit: function (v, h, f) { return true; }, /* The callback function after clicking the information button. Returning true means closing the window. There are three parameters. v represents the return value of the clicked button, h jQuery object representing the window content, f represents the form key value in the window content*/
loaded: function (h) { } /* Function executed after the window is loaded, parameter h represents the jQuery object of the window content*/
};
jBoxConfig.languageDefaults = {
close: 'Close', /* Close button prompt in the upper right corner of the window*/
ok: 'OK', /* $.jBox.prompt() The "OK" button text of the series method */
yes: 'Yes', /* The "Yes" button text of the $.jBox.warning() method */
no: 'No', /* $. "No" button text for jBox.warning() method*/
cancel: 'Cancel' /* "Cancel" button text for $.jBox.confirm() and $.jBox.warning() methods*/
};
$.jBox.setDefaults(jBoxConfig);