[Jbox] multi-function jquery dialog box plug-in download in 2.3 Beta and FAQs

Plugin description

-Jbox is a jquery-based multi-function dialog box plug-in that can achieve the overall style of the website and give users a new visual experience.

Running Environment

-Compatible with mainstream browsers such as IE6 +, Firefox, chrome, Safari, and opera.

Authorization

-Jbox is permanently free to use, but relevant copyright information must be kept. If you have good suggestions, you can leave a message below.

 

 

Version: 2.3

Size: 19.8 K

Download: Click to download

 

Online Demo: http://www.kudystudio.com/jbox/jbox-demo.html

 

[] Jbox v2.3 beta version updated

-[New] The opacity option is added to the tip method, which determines whether to display the isolation layer.

-The showscrolling option is added to [new] To hide the browser's scroll bar when displaying the jbox window.

-[New] When multiple Windows coexist, When you click a window title, the window is automatically at the top level.

-[Adjust] The ID Option is changed to null by default. If it is null, a random ID is automatically generated, and only one jbox is displayed for an ID.

-[Adjust] The loaded option adds the parameter H, which indicates the jquery object of the window content, so that you can initialize the content after loading the window.

-[Adjust] Put the global settings in a separate JS file, unified in the directory i18n, currently only jquery. jBox-zh-CN.js.

-[Adjust] Press the Space key to directly execute the event submitted by the default button (to retain this function, it is not very nice when the button is focused, but the user experience should be prioritized ).

-[Fixed] the bug that cannot be displayed during Multi-Window switching in IE.

 

Usage:

<SCRIPT type = "text/JavaScript" src = "jbox/jquery-1.4.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "jbox/jquery. jBox-2.3.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "jbox/i18n/jquery. jBox-zh-CN.js"> </SCRIPT>

<Link type = "text/CSS" rel = "stylesheet" href = "jbox/skins/skin Folder/jbox.css"/>
// Or
<Link type = "text/CSS" rel = "stylesheet" href = "jbox/skins2/skin Folder/jbox.css"/>

 

FAQs:

1. Use the XHTML 1.0 Standard

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

2. Do not want to display the title?

Set the title to null, for example, jbox ('content', {Title: NULL });

 

3. Do not want a button? Custom button?

Setting buttons to {} indicates that no button is displayed, 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 the button for buttonsfocus as the default button. The index starts from 0.

 

4. Do not display the isolation layer?

Set opacity to 0, for example, jbox ('content', {opacity: 0 });

 

5. Is the window automatically closed?

Set timeout to 0 to disable automatically. A positive value indicates the number of milliseconds after which it is automatically disabled. For example, disable jbox ('content', {Timeout: 3000}) after 3 seconds });

 

6. If the isolation layer is not displayed, do you want to prevent multiple identical windows from being displayed by clicking the button?

Pass the ID in, because an ID only displays one window, for example, jbox ('content', {ID: 'My-id '});

 

7. Do you need to specify a value for the window height and width? Can it be adaptive?

Besides IFRAME, in other cases, the height and width of the window can be specified to be adaptive. For example: jbox ('content', {width: 'auto', height: 'auto '});

 

There are a lot of optional parameters for jbox, combined with different parameters can have different effects, please see the following global parameter description (in the file jquery. jBox-zh-CN.js ). If you are using simplified Chinese and do not want to modify the global configuration, you do not need to load jquery. jBox-zh-CN.js, because jquery. default settings in the jBox-2.3.min.js and jquery. jBox-zh-CN.js is the same, if you just want to modify a few options, such as window border, just a line of code can: jbox. setdefaults ({defaults: {border: 8 }});

 

If you like jbox, don't forget to click [recommended] Oh, 3q

 

/* Jbox global settings */
VaR jboxconfig = {};

Jboxconfig. defaults = {
ID: NULL,/* unique ID in the page. If it is null, a random ID is automatically generated. One Id only displays one jbox */
Top: '200',/* The distance from the window to the top, which can be a percentage or pixel (for example, '100px ')*/
Border: 5,/* The pixel size of the window's outer border, must be an integer greater than 0 */
Opacity: 0.1,/* Transparency of the window isolation layer. If it is set to 0, no isolation layer is displayed */
Timeout: 0,/* the window is automatically closed after how many milliseconds are displayed. If it is set to 0, it is not automatically closed */
Showtype: 'fade ',/* type displayed in the window. Optional values: Show, fade, and slide */
Showspeed: 'quick',/* display speed of the window. Optional values: 'low', 'quick', and an integer in milliseconds */
Showicon: True,/* Whether to display the icon of the window title, true, false, or custom CSS style class name (for the icon as the background )*/
Showclose: True,/* Whether to display the close button in the upper-right corner of the window */
Draggable: True,/* Whether to drag the window */
Draglimit: True,/* whether to restrict the display range when the window can be dragged */
Dragclone: false,/* Whether to clone the window when the mouse is pressed when the window can be dragged */
Persistent: True,/* If the isolation layer is displayed, do you want to stick to the window not close when you click the isolation layer */
Showscrolling: True,/* Whether to display the browser scroll bar */
Ajaxdata :{},/* Ajax post data when the window content is identified by get: or post: prefix, for example: {ID: 1} or "id = 1 "*/
Iframescrolling: 'auto',/* the scrolling attribute value of IFRAME when the window content is identified by IFRAME: prefix. Optional values include: 'auto', 'yes', and 'no '*/

Title: 'jbox',/* Title of the window */
Width: 350,/* The window width. The value is 'auto' or an integer representing a pixel */
Height: 'auto',/* the height of the window. The value is 'auto' or an integer that represents a pixel */
Bottomtext: '',/* content on the left of the button in the window. This setting is invalid when no button exists */
Buttons: {'confirmed': 'OK'},/* window button */
Buttonsfocus: 0,/* indicates which buttons are the default buttons, and the index starts from 0 */
Loaded: function (h) {},/* The function executed after the window is loaded. Note that, if Ajax or IFRAME is used, the window is loaded only after the HTTP request is loaded, parameter h indicates the jquery object of the window content */
Submit: function (v, H, f) {return true ;},/* The callback function after the window button is clicked. If true is returned, the window is closed. There are three parameters, V indicates the return value of the clicked button, h indicates the jquery object of the window content, and F indicates the form key value in the window content */
Closed: function () {}/* function executed after the window is closed */
};

Jboxconfig. statedefaults = {
Content: '',/* Status content, does not support prefix identification */
Buttons: {'confirmed': 'OK'},/* Status button */
Buttonsfocus: 0,/* indicates which buttons are the default buttons, and the index starts from 0 */
Submit: function (v, H, f) {return true;}/* callback function after the status button is clicked. If true is returned, the window is closed. There are three parameters, V indicates the return value of the clicked button, h indicates the jquery object of the window content, and F indicates the form key value in the window content */
};

Jboxconfig. tipdefaults = {
Content: '',/* content prompted. prefix identification is not supported */
Icon: 'info',/* indicates the icon. Optional values include 'info', 'success', 'warning', 'error', and 'loading ', the default value is 'info'. When it is 'loading', the timeout value is set to 0, indicating that it will not be automatically disabled. */
Top: '200',/* indicates the distance from the top, which can be a percentage or pixel (for example, '100px ')*/
Width: 'auto',/* indicates the height. The value is 'auto' or an integer representing a pixel */
Height: 'auto',/* indicates the height. The value is 'auto' or an integer representing a pixel */
Opacity: 0,/* Transparency of the window isolation layer. If it is set to 0, no isolation layer is displayed */
Timeout: 3000,/* indicates the number of milliseconds that will be automatically disabled. The value must be an integer greater than 0 */
Loaded: function (h) {}/* The function executed after the window is loaded. Parameter h indicates the jquery object of the window content */
};

Jboxconfig. messagerdefaults = {
Content: '',/* content. prefix ID is not supported */
Title: 'jbox',/* Information title */
Icon: 'none',/* information icon. If the value is 'none', the icon is not displayed, optional values include 'none', 'info', 'Question ', 'success', 'warning', and 'error '*/
Width: 350,/* the height of the information. The value is 'auto' or an integer representing a pixel */
Height: 'auto',/* the height of the information. The value is 'auto' or an integer that represents a pixel */
Timeout: 3000,/* indicates how many milliseconds the information will be automatically disabled. If it is set to 0, it will not be automatically disabled */
Showtype: 'slide',/* type of information display. Optional values: Show, fade, and slide */
Showspeed: 600,/* display speed of information. Optional values: 'low', 'quick', and an integer in milliseconds */
Border: 0,/* indicates the pixel size of the outer border. It must be an integer greater than 0 */
Buttons :{},/* Information Button */
Buttonsfocus: 0,/* indicates which buttons are the default buttons, and the index starts from 0 */
Loaded: function () {},/* function executed after the window is loaded */
Submit: function (v, H, f) {return true ;},/* callback function after the information button is clicked. If true is returned, the window is closed. There are three parameters, V indicates the return value of the clicked button, h indicates the jquery object of the window content, and F indicates the form key value in the window content */
Loaded: function (h) {}/* The function executed after the window is loaded. Parameter h indicates the jquery object of the window content */
};

Jboxconfig. languagedefaults = {
Close: 'close',/* indicates the close button in the upper-right corner of the window */
OK: 'OK',/* $. jbox. Prompt () series of "OK" button text */
Yes: 'yes',/* $. jbox. Warning () method's "yes" button text */
No: 'no',/* $. jbox. Warning () method's "no" button text */
Cancel: 'cancel'/* $. jbox. Confirm () and '$. jbox. Warning ()' button text */
};

$. Jbox. setdefaults (jboxconfig );

Online Demo: http://www.kudystudio.com/jbox/jbox-demo.html