Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use the jQuery dialog plug-in jBox 2.3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the jQuery dialog plug-in jBox 2.3.

Plug-in description

-jBox is a multi-functional dialog plug-in based on jQuery, which can achieve the overall style of the website and give users a new visual enjoyment.

Operation environment

-compatible with mainstream browsers such as IE6+, Firefox, Chrome, Safari, Opera, etc.

Use authorization

-jBox * * is free to use, but the relevant copyright information must be retained. If you have any good suggestions, you can leave a message below.

[2011-11-11] jBox v2.3 official version

-[adjust & repair] if there is iframe under IE6 or active or applet controls on the page, use iframe to mask automatically.

-[fixed] the style error in which the border is not visible when dragging the window to the right under IE6 (there is still 20px, but the impact is not significant).

-[fix] incorrect style correction for the minimum height of icons of prompt related methods and messager methods under IE6.

-[fix] the window of the messager method under IE6 is incorrectly positioned when the scroll bar is dragged.

-[repair] fix the bug where the mask layer is incomplete when the browser changes size.

[2011-11-08] jBox v2.3 beta version update

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

-[added] added the showScrolling option to hide the browser's scroll bar when displaying the jBox window.

-[add] when multiple windows coexist, when you click on a window title, the window is automatically at the top level.

-[adjust] the id option is changed to null by default. When it is null, a random id is automatically generated, and only one jBox is displayed in an id.

-[adjust] the loaded option adds a parameter h, which represents the jQuery object of the window content, which makes it convenient for users to initialize the content after the window is loaded.

-[adjust] put the global settings in a separate js file and put them in the directory i18n. Currently, there is only jquery.jBox-zh-CN.js.

-[adjust] Press the space bar to directly execute the events submitted by the default button (to retain this feature, the button does not look good when it is in focus, but user experience should be given priority).

-[repair] fixed Bug that cannot be displayed when switching multi-window status under IE.

How to use it:

Common usage questions:

1. Please use the XHTML 1.0 standard and make sure the following line is added at the top of the html

two。 Don't want to display the title?

Set title to null, for example: jBox ('content', {title: null})

3. You don't want the button? Custom button?

Setting buttons to {} means that the button is not displayed, for example: jBox ('content', {buttons: {}})

Custom button: jBox ('content', {buttons: {'button 1click return value, button 1click return value, button 2click return value'})

You can also set which button buttonsFocus wants as the default button, with the index starting at 0

4. Do not show the isolation layer?

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

5. Does the window close automatically?

Setting timeout to 0 means not automatically shutting down. A positive number indicates how many milliseconds it takes to shut down automatically, for example, after 3 seconds: jBox ('content', {timeout: 3000})

6. Do you want to prevent multiple identical windows from popping up by clicking the button without displaying the isolation layer?

Just send id in, because an id will only display one window, for example: jBox ('content', {id: 'my-id'})

7. Must I specify a value for the height and width of the window? Is it adaptive?

In addition to iframe, you can 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, and different parameters can have different effects. Please see the following description of global parameters (in the file jquery.jBox-zh-CN.js). If you use 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. If you only want to modify a few options, such as the window border, you only need one line of code: jBox.setDefaults ({defaults: {border: 8}})

Thank you for reading, the above is "how to use the jQuery dialog plug-in jBox 2.3" content, after the study of this article, I believe you on how to use the jQuery dialog plug-in jBox 2.3 this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.