在Web項目中兩欄固定寬度居中的方式較多，三欄比較少見，一欄在某些場合還是有用的，比如說有整版的表格列表。因此我們的程序有必要能在兩種方式中切換。
以前我們使用的切換方式是兩個頁面模版，這種方式稍嫌麻煩一些，因為多了一個文件需要維護。現在使用JS也能達到同樣的效果。讓我們先看看siderbar和concept兩個div的css定義：
#sidebar{
margin-left:auto;
margin-right:auto;
width:191px;
height:480px;
float:left;
background-color:#fafafa ;
border-top:1px #e4e4e4 solid;
border-bottom:1px #e4e4e4 solid;
border-left:1px #e4e4e4 solid;
padding:2px;
}
#concept{
margin-left:auto;
margin-right:auto;
padding:10px;
width:759px;
height:480px;
float:left;
border:1px #e4e4e4 solid;
}
這兩者之所以能并列的原因是一是向左浮動，二是二者的寬度加起來正好等于頁面的總寬度950.如果我們需要變換成一欄方式，把siderbar隱藏，使concept的寬度變成950，這樣不就可以了嗎？這使用JavaScript很容易辦到，代碼如下：
var sidebar=$("sidebar");
sidebar.style.display="none";
var concept=$("concept");
concept.style.width=950;
再把它包裝成一個函數，在需要單欄的頁面中的窗口加載事件中調用這個函數，就能把兩欄變成一欄：
//-- Common.js中
function makeConceptFullScreen(){
var sidebar=$("sidebar");
sidebar.style.display="none";
var concept=$("concept");
concept.style.width=950;
}
..
//-- userMenuIntroBody.jsp中
window.onload=function(){
// 隱藏邊欄，加寬內容欄，使得內容如同全屏一樣
makeConceptFullScreen();
}
--全文完--