Documentation
概观
这是一款基于jQuery+css3实现的类似lightbox弹出界面的效果。
Download
You can download the last version of the plugin, or browse the archive for older versions.
Usage
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.