使用jQuery $就提交表單 - 改變形式的視圖

我這是比如我的我的網頁上表單列表：http://jsfiddle.net/GSC3x/

它的偉大工程，但是當我有很多的列表中的項目我的網頁上，它不是用戶友好的。我想在點擊列表項之一後改變顯示錶單的方式。

我想要一種方式，當我點擊該項目時，表單顯示在頁面的中心，其他列表項目在窗體爲ON時不可見 - 當我點擊我以前點擊的項目時再次 - 它應該返回到正常的列表視圖 - 如何做到這一點？

@@更新 - 增加超級專業圖像，以顯示它應該如何工作！：]

enter image description here

來源

2012-05-30 pawel

試試下面我的代碼...

CSS追加下面

ul{ 
    position:relative; 
} 

.centerDiv{ 
    position:absolute; 
    z-index:1000; 
    top:0px; 
    left:30px; 
}

和Javascript

$(document).ready(function(){ 

    $(".slidingDiv").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').click(function(e){ 
     if($(e.target).next(".slidingDiv").css('display') != 'block'){ 
      $(".slidingDiv").hide(); 
      $(".show_hide").hide(); 
      $(e.target).show(); 
      $(e.target).next(".slidingDiv").addClass("centerDiv"); 
      $(e.target).next(".slidingDiv").slideToggle(); 
     }else{ 
       $(".slidingDiv").hide(); 
       $(".show_hide").show(); 
     } 
    }); 
});

來源

2012-05-30 11:27:22

感謝您的關注，這很好 - 但我的觀點是整個表格與列表項目被移動到頁面的中心 - 現在它只出現在點擊項目下面 - 如前所述。 – pawel

@pawel看到更新的答案。 –

請看更新的問題：） – pawel

$(document).ready(function(){ 

     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 

     $('.show_hide').click(function(e){ 
      $('.show_hide').not($(this)).next(".slidingDiv").hide(); 
      $(e.target).next(".slidingDiv").slideToggle(); 
     }); 
});

來源

2012-05-30 11:33:19

很酷，但是您可以在活動時將頁面的動畫放入頁面中央嗎？ – pawel

而不是$(e.target).next(".slidingDiv").slideToggle();您可以添加下面的代碼以將該表單設置爲中心。

var t=($(window).height() - $(this).next(".slidingDiv").height()) /2+$(window).scrollTop(); 
var l= ($(window).width() - $(this).next(".slidingDiv").width())/2+$(window).scrollLeft();   
$(e.target).next(".slidingDiv").css('position','absolute'); 
$(e.target).next(".slidingDiv").animate({ 
left: l, 
top: t, 
}, 500).show(); 
});

來源

2012-05-30 12:36:22

使用jQuery $就提交表單 - 改變形式的視圖

回答

相關問題