2012-03-30 11 views
1

Ich habe Probleme, die jQuery easySlider funktioniert. Kann jemand herausfinden, wo ich falsch liege?jQuery easySlider funktioniert nicht in ASP.NET mit C#

<%@ Page Title="About me" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeFile="About.aspx.cs" Inherits="About" %> 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script> 
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#slider").easySlider(); 
    }); 
</script> 
</asp:Content> 

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <h2>About me</h2> 

    <p> Info on the user logged in.</p> 
    <p>Name:</p> 
    <p>Student number:</p> 
    <p>If information displayed is incorrect, please email with corect details.</p> 

    <div id="slider"> 
     <ul> 
      <li><a href="#"><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="#"><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="#"><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="#"><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></a></li> 
      <li><a href="#"><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></a></li> 
     </ul> 
    </div> 

</asp:Content> 

Der Name und die Pfade der jQuery-Dateien sind alle korrekt. Ich kann nicht finden, wo sonst das Problem sein könnte.

EDIT Wenn die Seite gerendert wird, ist das, was der HTML-Code wie folgt aussieht:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 


<head> 
<title>About me</title> 

<link href="Styles/Site.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="Scripts/easySlider1.7.js"></script> 

<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script> 

<script type='text/javascript' src='Scripts/jquery.cookie.js'></script> 

<script type='text/javascript' src='Scripts/jquery.dcjqaccordion.2.7.min.js'></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $('#accordion-menu').dcAccordion({ 

      eventType: 'click', 

      autoClose: true, 

      saveState: true, 

      disableLink: true, 

      showCount: false, 

      speed: 'slow' 

     }); 

     $('#slider').easySlider(); 

    }); 

</script> 

</head> 

<body> 

    <div id="header"> 

     <div class="headerLogo"><img src="Styles/images/reading_uni_logo.gif" /></div> 

     <div class="loginDisplay">Welcome <span id="HeadLoginName">Username</span>! | Logout</div> 

     <div class="news"> 

     </div> 

     <div class="polls"><span id="question">Do you think the library should be open 24 hours?</span> 

     <br /><a href="Polls.aspx">See more</a></div>  

    </div> 

    <div id="addGadgetButton">Add gadget</div> 


    <div id="menu"> 

     <ul class="menu" id="accordion-menu"> 

     <li><a href="Default.aspx">Home</a></li> 

     <li class="current-parent"><a href="GettingStarted.aspx">Getting Started</a></li> 

     <li><a href="#">Apps</a> 

      <ul> 

       <li><a href="#">Apps 1</a></li> 

       <li><a href="#">Apps 2</a></li> 

       <li><a href="#">Apps 3</a></li> 

      </ul> 

     </li> 

     <li><a href="#">Social</a> 

      <ul> 

       <li><a href="#">Social 1</a></li> 

       <li><a href="#">Social 2</a></li> 

       <li><a href="#">Social 3</a></li> 

       <li><a href="#">Social 4</a></li> 

      </ul> 

     </li> 

     <li><a href="About.aspx">About me</a></li> 

     </ul> 

    </div> 

    <div id="main"> 

    <h2> 

     About me 

    </h2> 

    <p> Info on the user logged in.</p> 

    <p>Name:</p> 

    <p>Student number:</p> 

    <p>If information displayed is incorrect, please email with corect details.</p> 

    <div id="slider"> 

     <ul> 

      <li><a href="#"><img src="Styles/images/slider/01.jpg" alt="Css Template Preview" /></a></li> 

      <li><a href="#"><img src="Styles/images/slider/02.jpg" alt="Css Template Preview" /></a></li> 

      <li><a href="#"><img src="Styles/images/slider/03.jpg" alt="Css Template Preview" /></a></li> 

      <li><a href="#"><img src="Styles/images/slider/04.jpg" alt="Css Template Preview" /></a></li> 

      <li><a href="#"><img src="Styles/images/slider/05.jpg" alt="Css Template Preview" /></a></li> 

     </ul> 

    </div> 

    </div> 

    <div class="clear" /> 

    <div id="footer"> 

     <a id="FeedbackHyperLink" href="Feedback.aspx">Feedback</a> | 

     <a id="ContactHyperLink" href="Contact.aspx">Contact us</a> | 

     <a id="SitemapHyperLink" href="Sitemap.aspx">Sitemap</a> | 

     <a id="HelpHyperLink" href="Help.aspx">Help</a> 

    </div> 

</body> 

</html> 
+0

Vermissen Sie die CSS-Datei? –

+0

Die CSS-Datei wurde in der Master-Datei angegeben. Ich habe versucht, es zu dieser ASPX-Datei hinzuzufügen, aber ich habe immer noch das gleiche Problem. –

Antwort

2

Sie müssen jQuery laden, bevor Sie Easyslider laden, so dass nur die Reihenfolge der Skripte ändern:

Von:

<script type="text/javascript" src="Scripts/easySlider1.7.js"></script> 
<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script> 

An:

<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script> 
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script> 

, die den Trick tun sollten :)

+0

Kümmere dich nicht um meinen Beitrag, Bonjin hat es schon verstanden :) – Jonas

5

Versuchen jquery-1.7.js Referenzierung zuerst:

<script type="text/javascript" src="Scripts/jquery-1.7.js" ></script> 
<script type="text/javascript" src="Scripts/easySlider1.7.js"></script> 

Seit easySlider1.7 .js erweitert jquery und erwartet, dass es bereits definiert ist.

Immer wenn Sie ein jquery-Plugin (jquery UI oder whatnot) verwenden, denken Sie daran, zuerst auf jquery zu verweisen. Ich habe mir die Beispiele für easySlider1.7 angeschaut, und die Beispiele verweisen zuerst korrekt auf jquery. Eine gute Debugging-Technik, die zu verwenden ist, besteht darin, mit dem zu beginnen, was funktioniert, d. H. Den Beispielen, und zu versuchen, die Unterschiede zwischen dem, was funktioniert, und dem, was nicht funktioniert, zu finden. In diesem Fall bestand der Unterschied darin, dass Sie nach dem Plugin auf jquery verwiesen haben.

+0

Danke! Dies schien zu funktionieren. Ich werde mich von nun an daran erinnern :) –

Verwandte Themen