2013-03-25 96 views
0

我應該創建一個索引頁,其中某些部分(如頁眉和頁腳)已修復,但主要內容是可更改的, 我認爲必須將我的內容設置爲iframe並更改iframe src與JavaScript,但我沒有任何想法如何做到這一點。 我該怎麼做?有沒有其他解決方案?更改固定頁面中的可更改內容

+0

隨便找jquery.ajax,它會很容易。 – egig 2013-03-25 10:07:05

+0

我在ajax noob,我怎麼能改變**只是**頁面的一部分? – user2207044 2013-03-25 10:16:03

+0

顯示你的嘗試或你有什麼 – theshadowmonkey 2013-03-28 01:25:32

回答

0

嗨也許有更好的選擇比幀考慮(這是「壞」的做法)是否是適合你的項目,你可以使用基於jQuery的腳本爲Pagify

或其他一些你所選擇的:JQUERY ONE PAGE SCRIPTS 在這樣你將以更現代的方式表現你的內容。 但它總是取決於最終結果必須是什麼。所以如果不是答案,請提供一些更多細節。

+0

我認爲你需要遵循我的鏈接複製粘貼工作示例和構建你的頁面,你不需要AJAX這種方式,並會一次生成所有的內容,但不顯示它。 – 2013-03-25 10:21:11

+0

哇謝謝,我討厭改變幀也只是醜陋的,我認爲我的問題解決了。 – user2207044 2013-03-25 10:22:38

+0

這個腳本一次加載所有頁面? – user2207044 2013-03-25 10:28:02

0

你可以用CSS做

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<style type="text/css"> 
body { 
    margin: 0px; 
} 
#wrapper { 
    width: 1000px; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
} 
#wrapper #header { 
    width: 1000px; 
    height: 80px; 
    background-color: #C90; 
    position: fixed; 
    float: left; 
} 
#wrapper #main { 
    float: left; 
    font-family: Arial, sans-serif; 
    font-size: 12px; 
    color: #333; 
    padding: 5px; 
    width: 990px; 
    margin-top: 80px; 
margin-bottom: 80px; 
} 
#wrapper #footer { 
    background-color: #C60; 
    height: 80px; 
    width: 1000px; 
    position: fixed; 
    bottom: 0px; 
    float: left; 
} 
</style> 
<script> 

</script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header"> 
      Header 
     </div> 
     <div id="main"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> 
      <p>.....</p> 
     </div> 
     <div id="footer">footer</div> 
    </div> 
</body> 
</html> 

然後你就可以從服務器的數據加載到與使用Ajax