動態加載和控制多個內容區域

如果我在這裏不熟悉，請提前致歉。我是一個設計師試圖學習。我試圖讓我的設計可行，但我看過各種方法（jQuery，AJAX，燈箱），但我不知道用什麼來適合我的設計。鏈接是在底部，但這裏的基本問題：動態加載和控制多個內容區域

對於投資組合中的每個項目，我有主圖像區域，一些副本和選擇區域有一個圖像的短標題，你可以選擇（以數字表示），我想要做的是既能夠更改圖像，並在選擇區域中改變標題和數字，還可以在懸停在不同的數字上時顯示它們，無需重新加載頁面。（我很抱歉，我讓這個聲音太複雜了，當你看到實際的頁面時，它會有更多的電報信息）。理想情況下，我希望找到一種方法，當你改變的時候，允許一個細微的/短暫的淡入淡出，而不是一個尖銳，粗暴的開關，但這是錦上添花。

如果任何人有任何想法指向正確的方向，我將非常感激！非常感謝你的幫助！

http://personal.justgooddesign.net/draft/work.html

來源

2011-06-15 Justin

嗯，這可以使用Ajax來完成。事實上，使用Jquery相當容易。我會建議你有不同的「部分」分解成頁面。

我的意思是，例如，您將有一個print.html頁面，其中只包含打印頁面的標記，網頁也相同，運動頁面也相同。（只有標記=「主圖像區域，一些副本，以及圖像標題較短的選擇區域」，否<html>,<head>或<body>標記，因爲我們實際上正在爲您的頁面創建「分段」

主要頁面容器的標記幾乎是相同的，只不過你目前的ID爲content3和content4的div將是空的（因爲這是我們插入頁面的地方，實際上你甚至可以將這兩個div分別放到你的頁面上並替換他們由一個<div id='dynamic'></div>（更好，因爲你有更好地控制在你的細分市場的項目的位置）

從這裏我假設你有一些jquery的知識，所以如果你不明白你的東西可以查詢或詢問。

你可以讓每個鏈接（web/print/motion）都有一個「load_segment」類和一個web/print/motion標識。爲了方便起見，我將這些ID命名爲與我上面討論的頁面段相同（當然沒有.html擴展名）以使一些工作自動化。

這是這樣做後，包括jQuery腳本，做一些類似下面的

<script> 
    $(function(){ // shorthand document.ready, ensures dom is loaded before starting 

     $('.load_segment').click(function(){ // binds a click event handler to your links 

      var page = $(this).attr("id") + '.html' 

      /* 
       here is why we named our id the same as our page segments, we auto generate 
       filenames, and thus only need to write this code once for all 3 links. you could 
       even add more later and as long as you have the corresponding html file segment 
       it will still work all the same 
      */ 

      $.get(page,function(segment){ 
      // perform ajax request, fetch page, and then execute function 

       $("#dynamic").html(segment); 
       // the segment is inserted in the dynamic div created above. 

      }); //end ajax request 

     }); // end .load_segment click event 

    }) // end of jquery document.ready 
</script>

請注意，在每個部分中的編號鏈接，您也可以創建嵌入AJAX取程序，如在上述你的段（不需要再在每個段中包含jquery）並且爲每個頁面創建......「子段」，但是如果頁面要增長，那麼從長遠來看，這可能會有點複雜。

來源

2011-06-15 20:26:47 kyushiro

動態加載和控制多個內容區域

回答

相關問題