TopUp-基于jQuery的超酷Lightbox控件

• 2010-05-04
• 4711 View

TopUp是一个基于jQuery/jQuery UI开发的Lightbox控件。可以展示图片、视频、网页和HTML内容。具有高度可定制的特性。
支持模式对话框的开启和关闭。支持Prototype和jQuery两种插件。  

TopUp 具有以下优点：

    * TopUp是完全免费的，也用于商业用途
    * 一个非常容易的设置过程（只有一个 include 仅此而已）
    * Using TopUp presets keeps your HTML code 100% clean, no extra code needed whatsoever
    * The ability of displaying images, flash (from sites like Youtube, SWF and FLV files), movies (QuickTime, Windows Media and Realplayer), iframes, DOM elements and raw HTML
    * TopUp can be used along with Prototype (just include TopUp before Prototype)
    * TopUp is compressed with Yahoo! YUI Compressor to 33.4 KB (includes JS, HTML and CSS)
    * Sprite的CSS的使用，以减少图像请求金额占两个布局 更快的加载
    * 跨浏览器兼容
    * 别致的布局，动画和过渡效果
    * 根据需求自适应
    * 可以创建组
    * 支持AJAX请求
    * And many more...

官方网站：http://gettopup.com/
演示地址：http://gettopup.com/examples
参数设置：http://gettopup.com/demo
下载地址：http://gettopup.com/releases/packed/1.7.2.zip
最新版本：http://gettopup.com/releases/packed/latest.zip

示例：

Setting up TopUp for your website requires the least amount of effort. You have the choice of either hosting the javascript and images on your own webserver or you can just include the javascript with one line of code and that's it! This has been made possible because TopUp injects the stylesheet code in the webpage. Choosing for the last option gives you the possibility of always being up-to-date with the latest features and bugfixes WITHOUT altering your code!

When including from gettopup.com (the easiest setup)

1. Put the following in the head element:
   <script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>
   Note: You can configure TopUp (libs, fast mode, paths) in the querystring of the URL (read documentation)
   ( you can also include a specific release by replacing latest with the version e.g. 1.3.2 )

When hosting the Javascript and images yourself

1. Download and unpack the latest TopUp version
2. Copy the entire(!) jquery directory in the same directory as the TopUp Javascript file. TopUp will automatically determine which Javascript libraries (jQuery and/or jQuery UI) to include from the jquery directory when missing. Please note that TopUp will only include one(!) file to reduce the amount of HTTP requests! An include will look like this:
   <script type="text/javascript" src="path/to/your/jquery/*.js"></script>
3. Copy the entire(!) images directory to the correct location. At default, TopUp assumes that the images reside at the same host as the file itself in the following path /images/top_up/. You can change the path (and even the host) by changing the variables TopUp.host and TopUp.images_path as the following:
   <script type="text/javascript">
     TopUp.host = "http://www.anotherwebsite.com/";
     TopUp.images_path = "assets/images/top_up/";
   </script>
   Note:  The proper place for Rails developers would be the application.js
4. Copy the entire(!) players directory to the correct location. At default, TopUp assumes that the players reside at the same host as the file itself in the following path /players/. You can change the path and host by changing the variables TopUp.host and TopUp.players_path as the following:
   <script type="text/javascript">
     TopUp.host = "http://www.anotherwebsite.com/";
     TopUp.players_path = "assets/players/";
   </script>
   Note:  The proper place for Rails developers would be the application.js
5. Now you start using TopUp on your webpages by putting the following in the head element:
   <script type="text/javascript" src="path/to/your/top_up-min.js"></script>
   Note: You can configure TopUp (libs, fast mode, paths) in the querystring of the URL (read documentation)

Remember: You can still use Prototype without having conflicts, just make sure you include TopUp first.

Configure TopUp with the query string

It is possible to configure TopUp without(!) typing a single line of Javascript code. How can this be done? By passing parameters in the query string of the TopUp library inclusion URL. You can configure the following:

• which jQuery libraries to auto-include or not to auto-include libraries at all
• whether to enable fast mode for better performance in IE
• the variables TopUp.host, TopUp.images_path and TopUp.players_path

A few examples to configure TopUp:

1. libs  -  Specify which jQuery libraries to auto-include or not to auto-include libraries at all:
   
   Instruct TopUp not to auto-include any jQuery libraries at all
   <script type="text/javascript" src="path/to/top_up-min.js?libs="></script>
   Instruct TopUp only to auto-include the jQuery Core library
   <script type="text/javascript" src="path/to/top_up-min.js?libs=core"></script>
   Instruct TopUp to auto-include the jQuery Core library and jQuery Effects Core & Clip library
   <script type="text/javascript" src="path/to/top_up-min.js?libs=core+clip"></script>
   Available libs:
   (empty) -  instruct TopUp not to auto-include any of the jQuery libraries at all
   all     -  include all the available libraries
   core    -  jQuery Core library (currently 1.4.2)
   clip    -  which enables using clip / switch effect
   resize  -  which enables resizing the TopUp dialog
   
2. fast_mode  -  Specify whether fast mode has to be enabled or not:
   
   Instruct TopUp to enable fast mode
   <script type="text/javascript" src="path/to/top_up-min.js?fast_mode=1"></script>
3. host, images_path, players_path  -  Override the default assets variables:
   
   Alter the TopUp.images_path variable
   <script type="text/javascript" src="path/to/top_up-min.js?images_path=/foo"></script>
4. And as usual with URL query string parameters, you can combine them using '&':
   
   Instruct TopUp only to auto-include the jQuery Core library and to enable fast mode
   <script type="text/javascript" src="path/to/top_up-min.js?libs=core&fast_mode=1"></script>

Setting up link elements

You can accomplish this in 3 ways:

1. By adding the class top_up to the link:
   <a href="/images/photos/1.jpg" class="top_up">
     <img src="/images/thumbnails/1.jpg"/>
   </a>
   Note:  TopUp will appear in the default preset
2. By specifying TopUp options in the toptions attribute of the link:
   <a href="/images/photos/1.jpg" toptions="shaded = 1, overlayClose = 1">
     <img src="/images/thumbnails/1.jpg"/>
   </a>
   Note:  Adding the class top_up is not required anymore
3. By specifying TopUp preset(s). Presets make it possible to assign certain toptions for a specific group of elements. Such a group is identified using the well-known CSS selector. Using TopUp presets keeps your HTML code clean and keeps it simple. The following shows an example of specifying toptions for (1) links within the element with the id images and (2) for elements with the class shaded:
   <script type="text/javascript">
     TopUp.addPresets({
       "#images a": {
         group: "images",
         layout: "quicklook",
         modal: 0
       },
       ".shaded": {
         shaded: 1
       }
     });
   </script>
   Note:  The proper place for Rails developers would be the application.js

Available toptions

As mentioned earlier, you can pass options to TopUp by using either the attribute toptions or by specifying a TopUp preset. This is an overview of the possible toptions you can pass. Most of them are self describing.

Just call your friend TopUp!

Eventually, all the TopUp actions are initiated by function calls to the TopUp Javascript module. Adding the top_up class, the toptions attribute or specifying TopUp presets only tells TopUp to bind the click event of the elements to a wrapper function in the TopUp module that there upon calls the core function to display TopUp. Aside from TopUp.display(), the TopUp module also has several other functions to communicate.