使用 jQuery UI，我如何使用类似 Splitter 的功能http://methvin.com/splitter/3csplitter.html http://methvin.com/splitter/3csplitter.html?
我问这个问题是因为我需要在我的页面上实现两件事；
Portlet（可拖动）::http://jqueryui.com/sortable/#portlets http://jqueryui.com/sortable/#portlets和垂直分离器::http://methvin.com/splitter/3csplitter.html http://methvin.com/splitter/3csplitter.html
我不确定如果我包含 2 个独立的库（即使都是基于 jQuery 的），编码实践有多好；
喜欢http://host.sonspring.com/portlets/ http://host.sonspring.com/portlets/对于 Portlet
和http://methvin.com/splitter/3csplitter.html http://methvin.com/splitter/3csplitter.html用于分路器
以下是如何使用 jQuery UI 创建拆分器的示例：
HTML:
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
Script:
$(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+"%",
});
}
});
});
这是一个流行的脚本。我对流体布局做了一些修改。
jsFiddle 示例 http://jsfiddle.net/8qzTJ/86/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
