Plug-in description
-Jbox is a multi-functional dialog box based on JQuery Plug-ins, can achieve the overall style of the site effect, to give users a new visual enjoyment.
Operating Environment
-compatible with ie6+, Firefox, Chrome, Safari, Opera and other mainstream browsers.
Use authorization
-Jbox is permanently free of charge, but must retain relevant copyright information. If you have 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 release update
Copy Code code as follows:
-the [new] Tip method adds the Opacity option, which determines whether the isolation layer is displayed.
-[Add] adds the showscrolling option to hide the browser's scroll bar when the Jbox window is displayed.
-[new] When multiple windows coexist, when clicked on a window title, the window is automatically at the top level.
-The Adjust ID option is changed to NULL by default, and random IDs are generated automatically when NULL, and an ID displays only one jbox.
-[adjust] the loaded option adds a parameter h, the parameter H represents the jquery object of the window content, facilitates the user to initialize the content after the window loading.
-[adjustment] put the global settings into a separate JS file, unified in the directory i18n, currently only jquery.jbox-zh-cn.js.
-[adjust] press the SPACEBAR to directly perform the events submitted by the default button (this feature is not very good-looking when the button is focused, but the user experience should be preferred).
-[fix] fixes bugs that are not displayed when multiple window state transitions are in IE.
How to use:
Copy Code code as follows:
<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"/>
Common usage Issues:
1. Please 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. Don't want buttons? Custom button?
Setting buttons to {} does 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 which button Buttonsfocus to be the default button, and the index starts at 0
4. Do not show the isolation layer?
Set the opacity to 0, for example: Jbox (' content ', {opacity:0});
5. Window closed automatically?
Setting the timeout to 0 means not automatically turning off, and a positive number is automatically closed after milliseconds, such as 3 seconds to close: Jbox (' content ', {timeout:3000});
6. Do you want to prevent the click button from popping multiple windows without displaying the isolation layer?
It's OK to pass in the ID, because an ID will only display a window, for example: Jbox (' content ', {id: ' My-id '});
7. The height and width of the window must you specify a value? Can you adapt yourself?
In addition to IFRAME, in other cases, it is possible to specify that the height and width of the window are adaptive, for example: Jbox (' content ', {width: ' auto ', Height: ' auto '});
There are many optional parameters for Jbox, which can have different effects with different parameters, please view the following global parameter description (in 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 the jquery.jbox-zh-cn.js because the default setting in Jquery.jbox-2.3.min.js is the same as jquery.jbox-zh-cn.js, and if you only want to modify a few options, such as a window border, you need only one line of code: Jbox.set Defaults ({Defaults: {border:8}});
Like Jbox friends don't forget to click [Recommended] Oh, 3q
Copy Code code as follows:
/* Jbox Global Settings * *
var jboxconfig = {};
Jboxconfig.defaults = {
Id:null,/* Unique ID on the page, if NULL then automatically generate a random ID, an ID will only show a jbox * *
Top: ' 15% ',///The distance of the window from the front, can be a percentage or pixel (such as ' 100px ') * *
Border:5,/* The outer frame pixel size of the window, must be more than 0 integer * *
opacity:0.1,/* Transparency of the Window isolation layer, if set to 0, the isolation layer is not displayed * *
timeout:0,/* window display how many milliseconds after automatic shutdown, if set to 0, do not automatically shut down * *
ShowType: ' fade ',/* window display type, optional values are: show, fade, Slide *
Showspeed: ' Fast ',/* window display speed, optional values are: ' Slow ', ' fast ', an integer representing milliseconds.
Showicon:true,//whether to display the icon for the window caption, true to display, false not to display, or custom CSS style class name (for icon background) * *
Showclose:true,/* Displays the Close button in the upper-right corner of the window.
Draggable:true,//Whether you can drag the window/*
Draglimit:true,/* If the window can be dragged, is limited to the visual range * *
Dragclone:false,/* When the window can be dragged, whether the window is cloned when the mouse is pressed * *
Persistent:true,/* In the case of showing the isolation layer, click on the isolation layer, whether to adhere to the window does not close * *
Showscrolling:true,/* Display scroll bar for browsing.
Ajaxdata: {},/* The data of the Ajax post, such as {id:1} or "Id=1", is used when the window content is identified with a get: or post: prefix.
Iframescrolling: ' Auto ',/* in the window content using iframe: prefix identification, the scrolling attribute value of the IFRAME, optional values are: ' Auto ', ' yes ', ' no '
Title: ' Jbox ',/* Window caption * *
WIDTH:350,/* Width of window, value ' Auto ' or integer representing pixel * *
Height: ' auto ',//High window, value ' Auto ' or integer representing pixel * *
Bottomtext: ",/* The contents of the button to the left of the window, this setting is invalid when there is no button * *
Buttons: {' OK ': ' OK '},/* Window button/*
buttonsfocus:0,/* Represents the default button for the first few buttons, and the index starts at 0.
Loaded:function (h) {},/* After the completion of the window loading function, it should be noted that if the Ajax or IFRAME is also to wait to load the HTTP request to calculate the completion of the window loading, parameter h to represent the content of the window jquery Object */
Submit:function (V, H, f) {return true;},//The callback function after clicking on the Window button, returns True when the window is closed, there are three parameters, V is the return value of the button, H is the JQuery object that represents the window content, f indicates the form form key value in the window content * *
Closed:function () {}/* function executed after window shutdown * *
};
Jboxconfig.statedefaults = {
Content: ",/* Status of the contents, do not support the prefix logo * *
Buttons: {' OK ': ' OK '},/* state button/*
buttonsfocus:0,/* Represents the default button for the first few buttons, and the index starts at 0.
Submit:function (V, H, f) {return true;}//The callback function after clicking the Status button, returns True when the window is closed, there are three parameters, V is the return value of the button, H is the JQuery object that represents the window content, f indicates the form form key value in the window content * *
};
Jboxconfig.tipdefaults = {
Content: ', * * hint contents, do not support prefix identification * *
Icon: ' Info ',/* hint icons, optional values are ' info ', ' success ', ' Warning ', ' error ', ' loading ', default value ' info ', when ' Loading ', the timeout value is set to 0, indicating that it is not automatically closed. */
Top: ' 40% ',/* tip distance from the front, can be a percentage or pixel (such as ' 100px ') * *
Width: ' Auto ', the height of the/* hint, the value is ' auto ' or an integer representing a pixel.
Height: ' auto ',/////////
opacity:0,/* Transparency of the Window isolation layer, if set to 0, the isolation layer is not displayed * *
timeout:3000,/* prompts to display how many milliseconds after automatic shutdown, must be greater than 0 integer * *
Loaded:function (h) {}/* function executed after the window load completes, parameter H represents the jquery object for the window content * *
};
Jboxconfig.messagerdefaults = {
Content: ", * * information contents, do not support prefix identification * *
Title: ' Jbox ',/* The headline of the message * *
Icon: ' None ',/* information icon, the value is ' none ' when not display icon, optional value has ' none ', ' info ', ' question ', ' success ', ' Warning ', ' ERROR ' *
WIDTH:350,/* The height of the information, the value is ' auto ' or an integer representing a pixel.
Height: ' auto ',///high information, value ' Auto ' or an integer representing a pixel * *
timeout:3000,/* Information shows how many milliseconds after the automatic shutdown, if set to 0, do not automatically shut down * *
ShowType: ' Slide ',/* information display type, optional values are: show, fade, Slide *
showspeed:600,/* Information display speed, optional values are: ' Slow ', ' fast ', an integer representing milliseconds * *
border:0,/* The outer-frame pixel size of the information must be more than 0 integers */
Buttons: {},/* Information button/*
buttonsfocus:0,/* Represents the default button for the first few buttons, and the index starts at 0.
Loaded:function () {},/* functions executed after the completion of the window loading * *
Submit:function (V, H, f) {return true;},//The callback function after clicking the info button, returns True when the window is closed, there are three parameters, V is the return value of the button, H is the JQuery object that represents the window content, f indicates the form form key value in the window content * *
Loaded:function (h) {}/* function executed after the window load completes, parameter H represents the jquery object for the window content * *
};
Jboxconfig.languagedefaults = {
Close: ' Off ',/* Close button on the top right corner of window/
OK: ' OK ',/* $.JBOX.PROMPT () "OK" button text for the series method * *
Yes: ' yes ',/* $.jbox.warning () ' Yes ' button text *
No: ' No ',/* $.jbox.warning () "No" button text * *
Cancel: ' Cancel '//$.jbox.confirm () and $.jbox.warning () method ' cancellation ' button text * *
};
$.jbox.setdefaults (Jboxconfig);
