Question

我正在尝试将灯箱功能添加到我的网站，但它似乎只是给了我一些问题。我正在使用标准的jQuery UI模板。我在网上看到脚本可能会发生冲突，但也被告知我遇到了问题，因为我一起使用Prototype和jQuery。请问你能告诉我吗？

这是我的代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>

    <link rel=Stylesheet href="css/lightbox.css" type="text/css" media="screen" />

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    <style type="text/css">
      body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;   }
    </style>

    <link type="text/css" href="css/dot-luv/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript">

      $(function(){

        // Accordion
        $("#accordion").accordion({ header: "h3" });

        // Tabs
        $('#tabs').tabs();

        // Dialog           
        $('#dialog').dialog({
          autoOpen: false,
          width: 600,
          buttons: {
            "Ok": function() { 
              $(this).dialog("close"); 
            }, 
            "Cancel": function() { 
              $(this).dialog("close"); 
            } 
          }
        });

        // Dialog Link
        $('#dialog_link').click(function(){
          $('#dialog').dialog('open');
          return false;
        });

        // Datepicker
        $('#datepicker').datepicker({
          inline: true
        });

        // Slider
        $('#slider').slider({
          range: true,
          values: [17, 67]
        });

        // Progressbar
        $("#progressbar").progressbar({
          value: 20 
        });

        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
          function() { $(this).addClass('ui-state-hover'); }, 
          function() { $(this).removeClass('ui-state-hover'); }
        );

      });
    </script>

    <style type="text/css">
      /*demo page css*/
      body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
      .demoHeaders { margin-top: 2em; }
      #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
      #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
      ul#icons {margin: 0; padding: 0;}
      ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
      ul#icons span.ui-icon {float: left; margin: 0 4px;}
    </style>

  </head>
  <body>
  </body>
</html>

Answer 1

在脚本标记内添加以下代码：

JQuery(document).ready(function ($) {
$('a[@rel*=lightbox]').lightbox()
})

你将以这种方式执行它：

<a href="WebSite.aspx" rel="lightbox">Text link</a>

以这种方式，“WebSite.aspx”将在灯箱中打开。

将Lightbox功能添加到Visual Studio 2010中的JQueryUI模板

1 个答案: