jQuery UI和Splitter

本文介绍了jQuery UI和Splitter的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用jQuery UI，我如何使用Splitter类似于
的功能？

Using jQuery UI, how can I use a Splitter kind of feature like the one athttp://methvin.com/splitter/3csplitter.html?

我问这个，因为我需要在我的页面上实现两件事;
Portlet（可拖动）::
和Vertical Splitter :: for Portlets
和Splitter的

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 Portletsand 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.

jsFiddle示例

这篇关于jQuery UI和Splitter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..