1.分隔条插件
有左右分隔,上下分隔,我这里介绍的是左右分隔。可以拖动这个分隔条,让左边或者右边的区域放大或缩小。
2.html文件:
<div id="splitter">
<h2>Terms & Conditions</h2>
<div class="pane" id="tocPane">
<div class="inner">
<ol>
<li><a href="#privacy">Your Privacy</a></li>
<li><a href="#celebs">Celeb's Privacy</a></li>
<li>Ownership & Intellectual Property
<ol style="list-style-type: lower-roman">
<li><a href="#liability">Liability</a></li>
<li><a href="#rights">Exclusive & Non-exclusive rights</a></li>
<li><a href="#ugc">User Generated Material</a></li>
</ol>
</li>
</ol>
</div>
</div>
<div class="pane" id="contentPane">
<div class="inner">
<h3>User Generated Material</h3>
<p>This website contains messaging systems and other user generated content toward the purpose and fulfillment of directory or indirectly contacting or stalking celebrities and/or their family and/or people in their vaguely related social sphere. Such content is here forth and eternally regarded as property of StarTrackr and parent company et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
3.js文件片断:
$(document).ready(function(){
$('#splitter > div:first').resizable({
handles: 'e',
minWidth : '100',
maxWidth : '400',
resize: function() {
var remainingSpace = $(this).parent().width() - $(this).outerWidth();
var divTwo = $(this).next();
var divTwoWidth = remainingSpace - (divTwo.outerWidth() - divTwo.width());
divTwo.css('width', divTwoWidth + 'px');
}
});
});
4.用到的css样式:
#splitter {
height:150px;
margin-top:30px;
margin-bottom:50px;
}
#splitter .pane {
width:50%;
height:100%;
float:left;
}
#splitter h2 {
margin-bottom:0;
padding-bottom:0;
}
#tocPane {
overflow: hidden;
background:#d6dde5 url(handle.png) no-repeat right center;
}
#tocPane .inner {
width: 300px;
}
#contentPane {
overflow: auto;
}
#contentPane .inner {
padding: 0 5px;
}
5.引入js类库:
<script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../lib/jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script.js"></script>
(完......)
分享到:
相关推荐
可拖动的jQuery分割div容器插件 split.js是一款可上下左右拖动的jQuery分割div容器插件。该插件可以实现父容器div的上下左右动态分割,并可以上下改变父div的高度,而且宽和高都是按百分比计算。
动态分割页面布局,支持拖拉分割线,功能类似于vs2010中的拖拉区域条
页面的移动条 splitter-1.5.1 jquery页面的移动条 splitter-1.5.1 jquery页面的移动条 splitter-1.5.1 jquery
现在电脑的屏幕越来越大,为了利用好宽屏,我们在设计系统UI时喜欢在左侧放个菜单或选项面板,在右边显示与菜单或选项对应的内容,两者之间用分隔条splitter来间隔,并可以通过拖动分隔条splitter来动态调研左右两边...
jquery的拖拉布局 很好用!!!!jquery的拖拉布局 很好用!!!!jquery的拖拉布局 很好用!!!!
这个C#小项目是我凌晨两点做梦突然...splitter控件在使用过程一直不起作用和没有达到分割的效果,是有原因的。 splitter不但是实现正常的左右分割窗体,还是实现上下分割窗体。 小项目添加了双击,隐藏下面窗体的功能。
上下左右分割div,并且可以自由拖动,实现页面上下左右分栏
MP3分割 工具 MP3SPLITTER
VC代码 simple_splitter (实用代码源)VC代码 simple_splitter (实用代码源)VC代码 simple_splitter (实用代码源)VC代码 simple_splitter (实用代码源)VC代码 simple_splitter (实用代码源)VC代码 simple_splitter ...
Split.js是一款可调节大小的拆分视图面板纯JavaScript插件。该插件的特点是轻量级,无需任何外部依赖。Split.js可以轻松的制作出拆分视图(或分割面板)效果。
《SDK实现分隔条》的配套源代码,其中包含了动态的示例和静态的示例,只需要把相应的文本文件内容复制到Splitter.c中再重新编译即可。
File Splitter is a useful and free program that enables you to split a large file into small chunks which are easy to be sent and stored, while File Joiner allows you to join these split parts ...
MP3 Splitter & Joiner Pro v5.1 22 March 2012 released Products MP3 Splitter & Joiner MP3 Splitter & Joiner Pro Audio Recorder Platinum Audio Recorder Pro MIDI MP3 Converter MP3 Audio ...
FileSplitter文件分割合并 FileSplitter文件分割合并 FileSplitter文件分割合并 FileSplitter文件分割合并 FileSplitter文件分割合并
带宽控制软件Bandwidth Splitter 1.07 破解版
C# Splitter窗口分栏控件
Splitter鼠标界面分割条
Cool MP3 Splitter Joiner
一个基于C#实现的用于WPF的DockPanel Splitter Control停靠分割条控件源码及例子程序
wince serial port splitter driver