这篇文章继续介绍关于Shadowbox的使用方法。如果大家是{dy}次了解Shadowbox的话，可以参见我的上一篇《》来进行了解。这篇文章主要讲Shadowbox的可选参数。

在上一篇文章中已经介绍了如果在HTML标签里添加属性来使用shadowbox，当然，如果你不愿意在你的HTML标签里添加属性的话，你可以只 要Javascript来操作和控制，虽然这个使用方法稍微有一点复杂，但是它可是让你的HTML代码非常清洁干净，而且你可以很轻松的把一段 shadowbox的代码嵌入到一个已经存在的项目中。

如果你注意观察HTML标签的话，你会发现shadowbox对象有一些常用的属性，我们把它列在下表：

当我们使用HTML标签的时候，每一个属性都是通过Shadowbox.buildObject这个方法自动生成的，但是现在你可以通过给Shadowbox.open设置一个对象或者一个对象的数组，就可以真正知道幕后的操作，一下来举个例子：

  1. <link rel="stylesheet" type="text/css" href="shadowbox.css">
  2. <script type="text/javascript" src="shadowbox.js"></script>
  3. <script type="text/javascript">
  4. Shadowbox.init({
  5.     // let's skip the automatic setup because we don't have any
  6.     // properly configured link elements on the page
  7.     skipSetup: true
  8. });
  9. window.onload = function() {
  10.     // open a welcome message as soon as the window loads
  11.     Shadowbox.open({
  12.         content:    '<div id="welcome-msg">Welcome to my website!</div>',
  13.         player:     "html",
  14.         title:      "Welcome",
  15.         height:     350,
  16.         width:      350
  17.     });
  18. };
  19. </script>

当然，你也可以使用Shadowbox.setup来手动的建立链接。例如可以用作通过AJAX来来动态的生成和销毁页面：

  1. <link rel="stylesheet" type="text/css" href="shadowbox.css">
  2. <script type="text/javascript" src="shadowbox.js"></script>
  3. <script type="text/javascript">
  4. Shadowbox.init({
  5.     // skip the automatic setup again, we do this later manually
  6.     skipSetup: true
  7. });
  8. window.onload = function() {
  9.     // set up all anchor elements with a "movie" class to work with Shadowbox
  10.     Shadowbox.setup("a.movie", {
  11.         gallery:            "My Movies",
  12.         autoplayMovies:     true
  13.     });
  14. };
  15. </script>

标签: ,

Evan on 三月 11th, 2010 | File Under | -