在ASP.Net MVC2中实现JQuery UI 1.8.2自定义主题 [英] Implementing JQuery UI 1.8.2 custom themes in ASP.Net MVC2

问题描述

HI，
我是JQuery的新手.我在执行相同操作时遇到问题.我想使用JQuery自定义主题中的选项卡.问题是css似乎不适用.我在Google上浏览了很多博客等，但是似乎对我没有任何帮助.

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.

我已遵循此处.

我也在这里粘贴site.master和/home/index.aspx的内容.

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

Site.Master- 标题部分看起来像这样

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:

index.aspx:

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

主页

</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?

非常感谢， jankajg

Many thanks in advance, jankajg

推荐答案

您将选项卡初始化得很早.运行脚本时，tabs元素尚未解析，一种检查方法是始终检查jquery对象的.length属性，以确保在id为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>

这篇关于在ASP.Net MVC2中实现JQuery UI 1.8.2自定义主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！