jQuery UI和Splitter [英] jQuery UI and Splitter
问题描述
使用jQuery UI,我如何使用Splitter类似于
的功能 http ://methvin.com/splitter/3csplitter.html ?
Using jQuery UI, how can I use a Splitter kind of feature like the one at http://methvin.com/splitter/3csplitter.html?
我问这个,因为我需要在我的页面上实现两件事;
Portlet(可拖动):: http://jqueryui.com/sortable/#portlets
和Vertical Splitter :: http://methvin.com/splitter/3csplitter.html
I am asking this as I need 2 things to be implemented on my page; Portlet (Draggable) :: http://jqueryui.com/sortable/#portlets and Vertical Splitter :: http://methvin.com/splitter/3csplitter.html
如果我包含2个独立的库(即使两者都是基于jQuery的),我不确定它的编码实践有多好;
喜欢 http://host.sonspring.com/portlets/ for Portlets
和Splitter的 http://methvin.com/splitter/3csplitter.html
I am not sure how good coding practice it is if I am including 2 separate libraries (even though both are jQuery based); like http://host.sonspring.com/portlets/ for Portlets and http://methvin.com/splitter/3csplitter.html for Splitter
推荐答案
以下是如何使用jQuery UI创建拆分器的示例:
Here is an example on how to create the splitter using jQuery UI:
HTML:
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
脚本:
$(function ()
{
$(".resizable1").resizable(
{
autoHide: true,
handles: 'e',
resize: function(e, ui)
{
var parent = ui.element.parent();
var remainingSpace = parent.width() - ui.element.outerWidth(),
divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui)
{
var parent = ui.element.parent();
ui.element.css(
{
width: ui.element.width()/parent.width()*100+"%",
});
}
});
});
这是一个流行的脚本。我对流体布局添加了一些修改。
This is a popular script. I've added little modifications for the fluid layout.
这篇关于jQuery UI和Splitter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!