2009-07-08 7 views
0

私は不可能を求めたが、私は私の問題を設定してみましょうすることができる(また、ページナビゲーションのためのポストバックをcuasingながら)、ハイパーリンクのクリックでパネルが見えるように画像とマウスオーバーイベントをデザイン目的で使用します。 メニューオプションの1つでは、親メニュー項目のクリックにサブメニューオプションのセットを表示する必要があります。メニュー項目自体も、指定されたURLにナビゲートする必要があります。ASP.NETは

私はもともとAJAXアコーディオンパネルを使用しようとしていましたが、アコーディオンパネルが1つしかなかったので、常にサブメニュー項目を表示していました。

私はまたdivにオプションを入れて、javascriptで表示を設定しようとしました。これはうまくいきましたが、ページナビゲーションポストバックが発生すると上書きされました。ここで

はソースです:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %> 
<%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
     <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript"> 
var revert = new Array(); 
var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact'); 


// Preload 
if (document.images) { 
    var flipped = new Array(); 
    for(i=0; i< inames.length; i++) { 
    flipped[i] = new Image(); 
    flipped[i].src = "images/"+inames[i]+"2.jpg"; 

    } 
} 

function over(num) { 
    if(document.images) { 
    revert[num] = document.images[inames[num]].src; 
    document.images[inames[num]].src = flipped[num].src; 

    } 
} 

function out(num) { 
    if(document.images) document.images[inames[num]].src = revert[num]; 
} 


function ShowHide(elementId) 
{ 
    var element = document.getElementById(elementId); 
    if(element.style.display != "block") 
    { 
     element.style.display = "block"; 
    } 
    else 
    { 
     element.style.display = "none"; 
    } 
} 
function UpdateText(element) 
{ 
    if(element.innerHTML.indexOf("Show") != -1) 
    { 
     element.innerHTML = "Hide Details"; 
    } 
    else 
    { 
     element.innerHTML = "Show Details"; 
    } 
} 



    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> 
       <uc1:LeadHeader ID="LeadHeader" runat="server" /> 
      </asp:ContentPlaceHolder> 
      <div id="nav"> 
       <div class="menu-item"> 
        <a href="Default.aspx"> 
         <img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)" 
          class="right" /></a> 
       </div> 
       <div class="menu-item"> 
        <a href="AboutUs.aspx"> 
         <img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)" 
          onmouseout="out(1)" class="right" /></a> 
       </div> 
      <%-- <asp:ScriptManager ID="ScriptManager1" runat="server"> 
       </asp:ScriptManager> 
       <cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true" 
        TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" > 
        <Panes> 
         <cc1:AccordionPane runat="server"> 
          <Header>--%> 
           <div class="menu-item"> 
            <a href="WhatWeDo.aspx"> 
             <img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)" 
              onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div> 

          <%--/Header> 
          <Content>--%> 
         <div id="divDetails" style="display:none;"> 

          <a href="management.aspx" title="Management Development">Management Development</a><br /> 
           <a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br /> 
           <a href="personal.aspx" title="Personal Development">Personal Development</a><br /> 
           <a href="realteams.aspx" title="Team Building/Facilitation">Team Building & Facilitation</a><br /> 
           <a href="coaching.aspx" title="Coaching">One to One Coaching</a> 
          </div> 

         <%-- </Content> 
         </cc1:AccordionPane> 
        </Panes> 
       </cc1:Accordion> 
       --%> 

      <div class="menu-item"> 
       <a href="OurApproach.aspx"> 
        <img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)" 
         onmouseout="out(3)" /></a> 
      </div> 
      <div class="menu-item"> 
       <a href="OurValues.aspx"> 
        <img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)" 
         onmouseout="out(4)" /></a> 
      </div> 
      <div class="menu-item"> 
       <a href="ContactUs.aspx"> 
        <img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)" 
         onmouseout="out(5)" /></a> 
      </div> 
     </div> 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 
     </asp:ContentPlaceHolder> 
     <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server"> 
      <uc2:LeadFooter ID="LeadFooter" runat="server" /> 
     </asp:ContentPlaceHolder> 
     </div> 
    </form> 
</body> 
</html> 
+0

コードが多すぎる、ヘレン!私たちだけではなく、私たちのラップ:) – roosteronacid

答えて

1

私はこれを正しく読んでいる場合は、別のページにご案内し、さらにオプションを表示するには、サブメニューを開くには、ナビゲーションボタンを必要としています。

これを行う最も簡単な方法は、マスターページにサブメニュー全体を作成し、グローバルスタイルシートで非表示にすることです。各ページには、JavaScriptを必要とせずに適切なパネルを表示するためのcssの行を含めることができます。

より効率的な方法はthis.Master.Page.FindControl( "myPanelId")を使用してサーバー側で必要な項目を管理することです。

私はあなたが何をしているかを正確に視覚化することはできませんが、私はjQueryアコーディオンメニューを使って何かを同じようにしています。私のサーバー側のコードでは、リンクと適切な画像を持つネストされた順序付けられていないリストが構築されていました。私はホバリングイベントをアコーディオンのパネルに切り替えて、リンクのどれかをクリックして対応するページに行くことができるようにしました。これはあなたが望むものに近い場合、私はあなたのコード/ cssの必要の一般的なアイデアを与えることができます。

希望に役立ちます。

+0

ありがとうapocalyse9上のファイルの内容をダンプの関連するHTMLとJavaScriptを示し、 が示唆したように最後に、私は別のパネルに私のサブメニューを配置して、背後にあるコードでの視認性を取り扱います理想的ではありませんでしたが、当時の選択肢を見つけられませんでした。私は、URLでの視認性フラグを渡すために持っています(?= trueの拡大)、これを制御します。 それははるかに良い解決策のように聞こえるように私はjQueryのを検討します。 jqueryのポストバックの後に可視性が残っていますか? – Helen