jQuery代碼在ASP.NET用戶控件中不起作用

我正在使用jQuery colorbox插件。這是真實的與asp.net頁面，但不是在asp.net用戶控制。有什麼問題？jQuery代碼在ASP.NET用戶控件中不起作用

<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>ColorBox Examples</title> 
    <style type="text/css"> 
     body 
     { 
      font: 12px/1.2 Verdana, Arial, san-serrif; 
      padding: 0 10px; 
     } 
     a:link, a:visited 
     { 
      text-decoration: none; 
      color: #416CE5; 
      border-bottom: 1px solid #416CE5; 
     } 
     h2 
     { 
      font-size: 13px; 
      margin: 15px 0 0 0; 
     } 
    </style> 
    <link media="screen" rel="stylesheet" href="colorbox.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="../colorbox/jquery.colorbox.js"></script> 
    <script> 
     $(document).ready(function() { 
      //Examples of how to assign the ColorBox event to elements 
      $("a[rel='example1']").colorbox(); 
      $("a[rel='example2']").colorbox({ transition: "fade" }); 
      $("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" }); 
      $("a[rel='example4']").colorbox({ slideshow: true }); 
      $(".example5").colorbox(); 
      $(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 }); 
      $(".example7").colorbox({ width: "80%", height: "80%", iframe: true }); 
      $(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" }); 
      $(".example9").colorbox({ 
       onOpen: function() { alert('onOpen: colorbox is about to open'); }, 
       onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, 
       onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, 
       onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, 
       onClosed: function() { alert('onClosed: colorbox has completely closed'); } 
      }); 

      //Example of preserving a JavaScript event for inline calls. 
      $("#click").click(function() { 
       $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1> 
     ColorBox Demonstration 
    </h1> 
    <h2> 
     Elastic Transition 
    </h2> 
    <p> 
     <a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee2.jpg" rel="example1" title="On the Ohoopee as a child">Grouped Photo 2</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee3.jpg" rel="example1" title="On the Ohoopee as an adult">Grouped Photo 3</a> 
    </p> 
    <h2> 
     Fade Transition 
    </h2> 
    <p> 
     <a href="../content/ohoopee1.jpg" rel="example2" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee2.jpg" rel="example2" title="On the Ohoopee as a child">Grouped Photo 2</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee3.jpg" rel="example2" title="On the Ohoopee as an adult">Grouped Photo 3</a> 
    </p> 
    <h2> 
     No Transition + fixed width and height (75% of screen size)</h2> 
    <p> 
     <a href="../content/ohoopee1.jpg" rel="example3" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee2.jpg" rel="example3" title="On the Ohoopee as a child">Grouped Photo 2</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee3.jpg" rel="example3" title="On the Ohoopee as an adult">Grouped Photo 3</a> 
    </p> 
    <h2> 
     Slideshow</h2> 
    <p> 
     <a href="../content/ohoopee1.jpg" rel="example4" title="Me and my grandfather on the Ohoopee."> 
      Grouped Photo 1</a></p> 
    <p> 
     <a href="../content/ohoopee2.jpg" rel="example4" title="On the Ohoopee as a child">Grouped Photo 2</a> 
    </p> 
    <p> 
     <a href="../content/ohoopee3.jpg" rel="example4" title="On the Ohoopee as an adult">Grouped Photo 3</a> 
    </p> 
    <h2> 
     Other Content Types</h2> 
    <p> 
     <a class='example5' href="test.aspx" title="Homer Defined">Outside HTML (Ajax)</a></p> 
    <p> 
     <a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">Flash/Video (Ajax/Embedded)</a> 
    </p> 
    <p> 
     <a class='example6' href="http://www.youtube.com/v/617ANIA5Rqs" title="The Knife: We Share Our Mother's Health"> 
      Flash/Video (Iframe/Direct Link To YouTube)</a></p> 
    <p> 
     <a class='example7' href="http://google.com">Outside Webpage (Iframe)</a></p> 
    <p> 
     <a class='example8' href="#">Inline HTML</a></p> 
    <h2> 
     Demonstration of using callbacks</h2> 
    <p> 
     <a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p> 
    <!-- This contains the hidden content for inline calls --> 
    <div style='display: none'> 
     <div id='inline_example1' style='padding: 10px; background: #fff;'> 
      <p> 
       <strong>This content comes from a hidden element on this page.</strong></p> 
      <p> 
       The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br /><a id="click" href="#" style='padding: 5px; background: #ccc;'>Click me, it will be preserved!</a></p> 
      <p> 
       <strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> 
      <p> 
       Updating Content Example:<br /><a class="example5" href="../content/flash.html">Click here to load new content</a> 
      </p> 
     </div> 
    </div> 
</body> 
</html>

來源

2010-09-28 Shahin

請將您的repro代碼降低到更可管理的程度。 – marcind 2010-09-28 05:57:17