本范例演示了对3栏式的网页进行宽度动态调整，用户可以用鼠标随意改变分栏的宽度，拖动过程非常的平滑，使用了mootools框架
在网页<head>区添加以下代码
<script type="text/javascript" src="js/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="js/mootools-1.2.3.1-more.js"></script>
<style type="text/css">
.clear { clear:both;}
p { padding:10px;}
#message{
border:1px solid #DDD;
background:#FFFFEE;
text-align:center;
padding:4px;
min-height:20px;
margin-bottom:10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#col_wrapper{
border:1px solid #0066cc;
position:relative;
min-height:300px;
margin-top:30px;
}
.column {
position:relative;
min-height:300px;
}
#col_1 {
position:absolute;
top:0px;
left:0px;
width:200px;
background:#ECECEC;
}
#col_2 {
position:absolute;
top:0px;
left:200px;
width:558px;
border-right:1px dotted #0066cc;
border-left:1px dotted #0066cc;
background:#EEEEEE;
}
#col_3 {
position:absolute;
top:0px;
left:760px;
width: 200px;
background:#EDEDED;
}
.column .col_title{
padding:4px;
background:#0066cc;
border-bottom:1px solid #FFF;
color:#FFF;
}
.column .col_msg{
float:right;
font-size:90%;
color:#FFF;
}
.resize {
position: absolute;
top: 26px;
right: -3px;
height: 30px;
width: 3px;
background: #666 url("images/handle.gif");
cursor: col-resize;
z-index:200;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid #666;
}
</style>
<script type="text/javascript">
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
window.addEvent('domready', function() {
// define column elemnts
var col_wrap = $('col_wrapper'); // define the column wrapper so as to be able to get the total width via mootools
var col_left = $('col_1');
var col_center = $('col_2');
var col_right = $('col_3');
// define padding (seperator line widths) for column borders as defined in css
var pad = 1;
// define snap if required - set to 0 for no snap
var w_snap = 5;
var w_total = col_wrap.getWidth()-(pad*2); // total width of wrapper
var w_min = 120; // minimum width for columns
var w_min_c = w_min-(2*pad);
// define message output elements (not essential to script)
var col_1_msg = $("col_1_msg");
var col_2_msg = $("col_2_msg");
var col_3_msg = $("col_3_msg");
//show column start widths in col headers (just for show)
col_1_msg.innerHTML = col_left.getWidth()+"px";
col_2_msg.innerHTML = col_center.getWidth()+"px";
col_3_msg.innerHTML = col_right.getWidth()+"px";
// left column - affects center column position and width
col_left.makeResizable({
handle: col_left.getChildren('.resize'),
grid: w_snap,
modifiers: {x: 'width', y: false},
limit: {x: [w_min,null]},
onStart:function(el){
// get available width - total width minus right column - minimum col with
w_avail=(w_total-col_right.getWidth())-w_min;
},
onDrag: function(el) {
if(el.getWidth()>=w_avail){
// max width reached - stop drag (force max widths)
el.setStyle("width",w_avail);
}
// set center col left position
col_center.setStyle("left",col_left.getWidth());
// define and set center col width (total minus left minus right)
w_center=w_total-col_left.getWidth()-col_right.getWidth();
col_center.setStyle("width",w_center.toInt()-(pad*2));
// messages
col_1_msg.innerHTML=" "+col_left.getWidth()+"px";
col_2_msg.innerHTML=" "+col_center.getWidth()+"px";
col_3_msg.innerHTML=" "+col_right.getWidth()+"px";
},
onComplete: function() {
//could add final width to form field here
}
});
// mootools can't resize to the left so we have to resize the center column rather than the right-hand column
col_center.makeResizable({
handle: col_center.getChildren('.resize'),
grid: w_snap,
modifiers: {x: 'width', y: false},
limit: {x: [w_min_c,null]},
onStart:function(el){
// get start width so as to be able to adjust center column width
w_start=el.getWidth();
// get available width - total width minus left column - minimum col with
w_avail=w_total-col_left.getWidth()-w_min-(pad*2);
},
onDrag: function(el) {
if(el.getWidth()>=w_avail){
// max width reached - stop drag (force max widths)
el.setStyle("width",w_avail);
}else if(el.getWidth()==w_min_c){
// ensure that right col has complete available width
el.setStyle("width",w_min_c);
}
// define new left position
l_new = col_left.getWidth()+col_center.getWidth(); // force left space for right col
col_right.setStyle("left",l_new.toInt());
// define and set right column width - will always be result of left and center columns
w_new = w_total-col_left.getWidth()-col_center.getWidth();
col_right.setStyle("width",w_new.toInt());
// show messages
col_1_msg.innerHTML=" "+col_left.getWidth()+"px";
col_2_msg.innerHTML=" "+col_center.getWidth()+"px";
col_3_msg.innerHTML=" "+col_right.getWidth()+"px";
},
onComplete: function() {
//could add final width to form field here
}
});
});
</script>
在网页<body>区添加以下代码
<div id="col_wrapper"> <div id="col_1" class="column drag_width"> <div id="col_1_title" class="col_title"> <span id="col_1_msg" class="col_msg"></span></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="resize"></div> </div> <div id="col_2" class="column drag_width"> <div id="col_1_title" class="col_title"> <span id="col_2_msg" class="col_msg"></span></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="resize"></div> </div> <div id="col_3" class="column"> <div id="col_1_title" class="col_title"> <span id="col_3_msg" class="col_msg"></span></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="clear"></div> </div> <p> <ul> <li>Drag the column handles to adjust the column widths.</li> <li>Uses <a href="http://www.mootools.net" title="Mootools" target="_blank">Mootools</a> v1.2.3</li> <li>See source code for implementation</li> <li>How to use at <a href="http://blog.cbolson.com/mootools-expandable-columns/" title="Back to blog">the blog</a></li> <li>Help and Suggestions on the <a href="http://forum.cbolson.com/viewforum.php?f=15" title="Need Help">forum</a></li> </ul> </p> </div>
