將燈箱功能添加到Visual Studio 2010中的JQueryUI模板

我想向我的網站添加燈箱功能，但它似乎只是給了我一些問題。我正在使用標準的jQuery UI模板。我在網上看過腳本可能會發生衝突，但也被告知我遇到了問題，因爲我一起使用Prototype和jQuery。請你能提供建議嗎？將燈箱功能添加到Visual Studio 2010中的JQueryUI模板

這裏是我的代碼

<!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>

來源

2010-10-19 Mark

的腳本標籤中添加以下代碼：

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

，你打算以這種方式來執行它：

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

在這樣「WebSite.aspx」將在燈箱中打開。

來源

2011-10-06 23:43:51

將燈箱功能添加到Visual Studio 2010中的JQueryUI模板

回答

相關問題