概观

---

这是一款基于jQuery+css3实现的类似lightbox弹出界面的效果。

Download

---

You can download the last version of the plugin, or browse the archive for older versions.

First you need to include the jQuery library, since uCompare is a plugin. You can download it from the jQuery website or link it directly from the Google CDN. Also, if you want draggable windows, you'll need jQuery UI.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Secondly, you need to include the jQuery uLightBox javascript and the css file into your page. You can do it by adding the code below to your page.

<script type="text/javascript" src="js/jquery.ulightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ulightbox.css" />

Last, you trigger the uLightBox function on the element you just created. In this case, we trigger the function on the element with the id alert.

<script type="text/javascript">
$(document).ready(function() {
   uLightBox.init({
      override:true,
      background: 'white',
      centerOnResize: true,
      fade: true
   });

   $('#alert').click(function() {
      alert('Hello');
   });
});
</script>

Options

---

The attributes below are called upon the initialization of the lightbox.

override - If set to true, calling alert(text) will fire uLightBox with your text inside. Can be true/false.

background - Can be used to specify the background shade. Can be 'white', 'black', or 'none'.

centerOnResize - Used to specify wether or not the lightbox should stay centered on window resize. Can be true/false.

fade - Used to specify wether or not the lightbox's background should fade in or appear instantly. Can be true/false.

The attributes below are called per-lightbox.

text - Used to set the message displayed in the content pane.

width - Used to dictate uLightBox's width. Set to adhere as a CSS String, e.g. "300px", "55%", etc.

title - Used to dictate uLightBox's Title. Set to whatever you please.

leftButtons - Used to add buttons on the left side of the lightbox. Adhere to the following structure: leftButtons: ['Close']

rightButtons - Used to add buttons on the right side of the lightbox. Adhere to the following structure: rightButtons: ['Login', 'Register']

opened - Callback function for when the lightbox has fully opened. Perfect for loading data via ajax to the content pane (#lbContent)

onClick - Callback function for when the a button is clicked. If a button was titled "Enter", the parameter of this function will be "Enter". Used with switch/if else statements, one can add any functionality they want to each button.