Implementing JQuery UI 1.8.2 custom themes in ASP.Net MVC2

问题:

HI,
I am new to JQuery. I am having issues implementing the same. I want to use the tab from the JQuery custom themes. The issue is that the css don't seem to apply. I have gone through a lot of blogs etc on google but nothing seem to work for me.

I have followed what is mention here.

I am also pasting the contents of site.master and /home/index.aspx here.

Site.Master - the header section looks like this

<link href="../../Content/Site.css" rel="stylesheet" type="text/css"/>   <link href="../../Content/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />   <script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"> </script>   <script src="../../Scripts/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>`

index.aspx:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>  

Home Page

</asp:Content>   <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   <script type="text/javascript">     // Tabs     $('#tabs').tabs();</script>`   <h2 class="demoHeaders">   Tabs</h2>   <div id="tabs">       <ul>           <li><a href="#tabs-1">First</a></li>           <li><a href="#tabs-2">Second</a></li>           <li><a href="#tabs-3">Third</a></li>       </ul>       <div id="tabs-1">           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud         exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </div>       <div id="tabs-2">           Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet         ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum         bibendum.  </div>       <div id="tabs-3">           Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi         urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor         ullamcorper augue.  </div>   </div>  <h2>     <%: ViewData["Message"] %></h2>   <p>       To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.   </p>  

can anybody spot any obvious errors?

Many thanks in advance, jankajg

回答1:

Your initialising the tabs to early. When you run the script the tabs element has not been parsed, one way to check this is to always check the .length property of the jquery object to ensure, in the case of an id that it is 1.

To fix: either wrap the script in a document ready statement

<script type="text/javascript">     // Tabs $(function(){     $('#tabs').tabs(); });  </script>

or move the script tag down to the bottom of the document just before the closing body tag.

<script type="text/javascript">         // Tabs         $('#tabs').tabs(); </script> </body>

转载请标明出处:Implementing JQuery UI 1.8.2 custom themes in ASP.Net MVC2

文章来源: Implementing JQuery UI 1.8.2 custom themes in ASP.Net MVC2