Вкладки jquery и главные страницы asp.net - PullRequest
Новая
       22

Вкладки jquery и главные страницы asp.net

4 голосов
/ 27 февраля 2012

У меня есть веб-сайт с мастер-страницами и страницами с контентом.код для главной страницы: 

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
    <form id="form1" runat="server">
    <div id="TopNav">
        <ul>
            <li><a href="TopDeals.aspx">Top Deals</a></li>
            <li><a href="AllDeals.aspx">All Deals</a></li>
            <li><a href="Account.aspx">Account</a></li>
            <li>
                <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
                <asp:Button ID="Search" runat="server" Text="Search" />
            </li>
        </ul>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <!--Adding jQuery-->
    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <!--JavaScript and jQuery functions-->
    <script type="text/javascript">
        $(document).ready(function () {
            $("#TopNav").tabs();
        });
    </script>
</body>
</html>

И мои страницы содержимого выглядят так: 

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>

Теперь вкладки отображаются отлично, но текст, используемый внутри вкладок или

разделаотображается снова в каждой вкладке содержимого.

Скриншот того, как это рендеринга: enter image description here

А вот это визуализированный HTML: 

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

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

<head><title>



</title>

<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>

<body style="height: 800px">

    <form method="post" action="TopDeals.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />

</div>



<div class="aspNetHidden">



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />

</div>

    <div id="TopNav">

        <ul>

            <li><a href="TopDeals.aspx">Top Deals</a></li>

            <li><a href="AllDeals.aspx">All Deals</a></li>

            <li><a href="Account.aspx">Account</a></li>

            <li>

                <input name="ctl00$SearchBox" type="text" id="SearchBox" />

                <input type="submit" name="ctl00$Search" value="Search" id="Search" />

            </li>

        </ul>

    </div>

    <div>



Top deals page.



    </div>

    </form>

    <!--Adding jQuery-->

    <script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

    <!--JavaScript and jQuery functions-->

    <script type="text/javascript">

        $(document).ready(function () {

            $("#TopNav").tabs();

        });

    </script>

</body>

</html>

Любой может сказать, чтоЯ тут не так делаю?

1 Ответ

4 голосов
/ 27 февраля 2012

Поведение, которое вы видите, соответствует вкладкам jQuery - вы используете его неправильно.
Один из типичных сценариев сценария использования будет иметь разметку, например: 

<div id="tabs">
    <ul>
       <li><a href="#tabs-1">First Tab</a></li>
       <li><a href="#tabs-2">Second Tab</a></li>
    </ul>
    <div id="tabs-1">
           Tab 1 Content
    </div>
    <div id="tabs-2">
           Tab 2 Content
    </div>
</div>

Обратите внимание на локальные ссылкиhref на li и соответствующий div содержимого вкладки (с тем же идентификатором).

В случае, если используются URL-адреса, вкладки jquery автоматически создадут div содержимого и загрузят его с помощью AJAX (см. содержимое через AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).

Это касается вашего кода, вы используете URL-адреса - jquery загружает содержимое URL-адреса во вкладку. Итак, для первой вкладки вы можете увидеть содержимое страницы TopDeals.aspx - и этостраница использует тот же мастер и, следовательно, в разделе содержимого появляется разметка вкладки.

РЕДАКТИРОВАТЬ : обходной путь

Во-первых, при открытии новой страницы с помощью вкладки осуждаетсяэкспертами по юзабилити - отметьте http://www.useit.com/alertbox/tabs.html! Однако, чтобы достичь того, что вы хотите, вам нужно установить href активной вкладки для локальной ссылки.

Например, на главной странице 

<div id="TopNav">
    <ul>
        <li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
        <li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
        <li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
        <li>
            <asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
            <asp:Button ID="Search" runat="server" Text="Search" />
        </li>
    </ul>
    <div id="TabContent">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </div>
</div>

Обратите вниманиеразмещение контента заполнителя.Теперь на каждой странице вы должны соответствующим образом настроить вкладку активного элемента.Например, в TopDeals.aspx вы должны добавить следующую строку, скажем, page_load или page_prerender: 

Tab1.HRef = "#TabContent";

Вместо использования жестко закодированных идентификаторов вкладок и т. Д., Я бы предложил использовать Repeater на главной странице изаполнить его из-за кода.Таким образом, вы можете выставить свойство ActiveTab на главной странице (устанавливается страницами содержимого), которое будет корректировать href правильной вкладки.

Наконец, последняя часть - это навигация по вкладкам: см. этот FAQ из вкладок jquery, чтобы при нажатии на другую вкладку браузер открывал эту страницу (вместо загрузки контента через AJAX).

EDIT : Похоже, что вышеупомянутые часто задаваемые вопросы были удалены jqueryкоманда.Чтобы перейти по URL-адресу вкладки, нужно обработать событие select - например, 

$('.tabs').tabs({
  select: function(event, ui) {
     var url = $.data(ui.tab, 'load.tabs');
     location.href = url; // follow url
     return false; // to disable default handling
  }
});
...