标签: resizable

我想要一个有两列的容器.细节:

容器

• 宽度应调整为其父元素的100%(容易完成).
• 高度必须调整为包含两列(即它的高度应该完全等于两列的较大高度,因此没有溢出和滚动条永远不会显示)
• 应该具有等于左列宽度的两倍的最小尺寸.

一般的列

• 应该是可变高度,调整到其内容的高度.
• 应该是并排的,使它们的顶边成一直线.
• 如果边界,填充或边距的单个像素被应用于任何一个像素,则不应该破坏布局或彼此包裹,因为这将是非常不稳定和不幸的.

左列专门

• 必须具有固定的绝对宽度(以像素为单位).

正确的专栏

• 宽度必须填充容器中的剩余空间.换一种说法...
• 宽度必须等于容器宽度减去左列的宽度,这样如果我在此列中放置一个DIV块元素,将其宽度设置为100%,给它一个类似10px的高度,并给它一个背景颜色,我将看到一个10px高的彩色条带,从左列的右边缘到容器的右边缘(即它填充右列的宽度).

要求稳定

容器应该能够调整大小(通过调整浏览器窗口大小)到最小宽度(前面指定)或更大的宽度而不破坏布局."Breaking"将包括左列改变大小(记住它应该具有固定的像素宽度),右列包裹在左侧,滚动条出现,右列中的块元素未能占用整个列宽并且通常任何上述规范都不能保持真实.

背景

如果使用浮动元素,则右列不应该在左侧包裹,容器将无法包含两列(通过剪切列的任何部分或允许列的任何部分溢出其边界) ),或者那个滚动条会出现(所以我厌倦了建议使用溢出以外的任何东西:隐藏以触发浮动元素遏制).将边框应用于列不应该破坏布局.列的内容,尤其是右列的内容,不应破坏布局.

似乎有一个简单的基于表格的解决方案,但在任何情况下它都会失败.例如,在Safari中,如果容器太小,我的固定宽度左列将收缩,而不是保持我指定的宽度.似乎应用于TD元素的CSS宽度指的是最小宽度,这样如果在其中放置更大的东西,它将扩展.我尝试过使用table-layout:fixed; 没有帮助.我还看到了表示右列的TD元素不会扩展以填充剩余区域的情况,或者它会出现(例如第三列1px宽将被一直推到右侧),但是在右列周围放置一个边框将显示它仅与其内联内容一样宽,并且宽度设置为100%的块级元素不会填充列的宽度,而是匹配内联内容的宽度(即TD的宽度似乎完全取决于内容).

我看到的一个可能的解决方案太复杂了; 我不在乎IE6,只要它适用于IE8,Firefox 4和Safari 5.

我正在创建一个JFrame,我称之为方法setSize(500, 500).现在,期望的行为是用户不应在任何条件下调整JFrame的大小.通过最大化或拖动边框.它应该是500x500.我该怎么做？我还附上了代码,以防你可以更好地指导我.

    package com.techpapa;    
    import javax.swing.*;  
    import java.awt.*;  
    import java.awt.event.*;  

    public class MainWindow extends JFrame{


private JTextField
            write;
private JRadioButton
            rb1,
            rb2,
            rb3;
private ButtonGroup
            bg;

private ActionListener al = new ActionListener(){
    public void actionPerformed(ActionEvent e){
        write.setText("JRadioButton : " + ((JRadioButton)e.getSource()).getText());
    }

};

public MainWindow(){
    //Frame Initialization
    setSize(500, 500);
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setLayout(null);
    setTitle(".:JRadioButton:.");
    setVisible(true);

    //Components Initialization
    write = new JTextField(20);
    write.setEditable(false);
    rb1 = new JRadioButton("Male", false);
    rb1.addActionListener(al);
    rb2 = new JRadioButton("Female", false);
    rb2.addActionListener(al);
    rb3 = new JRadioButton("I …

我们有这个小组项目,我被指派做一个iframe可调整大小.自上周以来,我一直在阅读很多论坛帖子,我发现iframe自己无法调整大小.

有没有办法让我的iframe可调整大小？

我有2个事件,一个用于检测窗口调整大小,另一个用于检测div的可调整大小的停止.

但是当我调整div的大小时,在控制台中检测窗口调整大小事件.

有什么方法可以阻止这个吗？

$(document).ready(function(){
     $(window).bind('resize', function(){
        console.log("resize");    
     }); 
     $(".a").resizable();
 });

示例:http://jsfiddle.net/qwjDz/1/

根据此页面,任何DOM元素都可以调整大小:http://jqueryui.com/demos/resizable/

但是,似乎这对CANVAS元素不起作用.可能？

我最近使用JQuery Draggable和Resizable插件遇到了一些麻烦.寻找解决方案,我在许多不同的地方发现了一些非常零碎的代码,最后归结为一个干净的解决方案,这似乎对我来说几乎是完美的.

我以为我会和其他人分享我的发现,如果他们也遇到过这个问题.

我有一个包含和IFrame的div.这个div必须是可调整大小和可拖动的.足够简单 - 将jquery draggable和resizable添加到div中,如下所示:

$("#Div").draggable();
$("#Div").resizable();

一切都很好,直到您拖动包含iframe的另一个div或尝试通过移动当前的iframe来调整当前div的大小.通过iframe时,这两个函数都会停止.

解:

$("#Div").draggable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
        var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
        $(element).append(d);});
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});



$("#Div").resizable({
    start: function () {
        $(".AllContainerDivs").each(function (index, element) {
            var d = $('<div class="iframeCover" style="z-index:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>');
            $(element).append(d);
        });
    },
    stop: function () {
        $('.iframeCover').remove();
    }
});

请享用!

PS:创建窗口的一些额外代码,当被选中时,被带到其他可拖动的前面:

在可拖动的启动功能中 -

var maxZ = 1;
$(".AllContainerDivs").each(function (index, element) { …

我一直在尝试创建一个可调整大小的文本框(ASP.NET多行TextBox/ HTML textarea)并使用JQuery UI使其可调整大小,但似乎遇到了一些涉及自定义拖动句柄的问题.

关于该Resizable方法的JQuery文档(特别是关于该handles选项的文档)建议我可以设置任何句柄以使用自定义HTML元素.我已经设法使用默认的可调整大小的句柄使得可调整大小的文本框工作得很好,但是尝试设置自定义文本框(即我在标记中定义的HTML元素)会产生以下问题:可调整大小的容器会留下正确的空间量div底部的手柄(用于南手柄),但空间留空,并显示可调整大小的容器下方(外部)的元素(使用Firebug验证).

这是我的标记(ASP.NET/XHTML)和JavaScript代码:

<asp:TextBox runat="server" ID="codeTextBox" TextMode="MultiLine" Wrap="false" Rows="15">
</asp:TextBox>
<div class="resizable-s" style="width: 100%; height: 22px; background: red;">
</div>

<script type="text/javascript">

    $(function() {
        var codeTextBox = $("#<%= codeTextBox.ClientID %>");

        codeTextBox.resizable({
            handles: { s : $(".resizable-s") },
            minHeight: 80,
            maxHeight: 400
        });
    });

</script>

当然,我不能使可调整大小的句柄div(class resizable-s)成为TextBox/ 的子项textarea,但根据JQuery文档,这应该不是问题.

从我所做的搜索来看,我不是唯一一个遇到这个问题的人.(不幸的是,JQuery文档未能提供使用自定义可调整大小句柄的示例,因此我们都不确定正确的代码.)如果有人可以建议修复此问题,或确实确认它是JQuery错误,非常感谢.

我有一个div嵌套在另一个div中,用于显示设置控制台.嵌套div有一个固定位于父级内部,如下所示:

我想为子div的左边框添加一个可拖动的句柄,以便可以在宽度上调整子div的大小.我是否需要添加另一个非常窄的div,左边框位于此处,以便可以拖动它并重新计算位置以动态调整子divs width属性的大小？

如果可能的话,我宁愿坚持使用vanilla JQuery,而不是依赖于JQuery UI.

好的,这是问题所在.jQuery Resizable在这个页面上不起作用:点击这里

在左上角的灰色框中试一试.

我想要做的是使大小合适的shoutbox可调整大小.但它没有用,所以我试图将jQuery UI示例页面中的所有内容复制到我的版本中并尝试一下.所以我使用相同的方式添加了灰色框,甚至使用相同的CSS,但它不起作用.

这是库的调用方式:

 <script src="http://www.google.com/jsapi"></script>
 <script type="text/javascript">

 google.load("jquery", "1.4.1");
 google.load("jqueryui", "1.7.2");

google.setOnLoadCallback(function() {

});

</script>

<script type="text/javascript" src="js/thickbox.js"></script>
<script type='text/javascript' src='js/jqueryEasingMin.js'></script>
<script type='text/javascript' src='js/jquery.imghover-1.1rc.js'></script>
<script type="text/javascript" src="js/shoutbox.js" ></script>
<script type="text/javascript" src="js/bbcode.js" ></script>
<script type='text/javascript' src='js/jqueryLoader2.js'></script>

文档就绪函数内的脚本(如示例所示):

 $('#resizable').resizable();

灰盒子的CSS:

<style type="text/css">
#resizable { width: 100px; height: 100px; background: silver; position:relative; z-index:15;}
</style>

由于我的网站设计,我不得不添加位置和z-index参数,但这似乎不会影响任何东西.

并实施:

  <div id="resizable"></div>

我想我错过了一些非常明显的东西,但我看不到它.我甚至尝试将jquery UI库链接到本地​​目录,而不是使用google的.

我真的很感激在正确的方向点头.谢谢

我需要像这张图片一样制作可调整大小的句柄.

更具体地说,我需要在我周围设置那些蓝点<div>以允许从不同侧面调整大小.

目前我正在使用以下代码:

<html>
    <head>
        <link rel="stylesheet" href="jquery-ui-1.10.2/themes/base/jquery-ui.css" />
        <script src="jquery-1.9.1.min.js"></script>
        <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
        <title>border</title>
        <script type="text/javascript">
            $(function() {
            $('#elementResizable').resizable({ 
                handles: {
                    'ne': '#negrip',
                    'se': '#segrip',
                    'sw': '#swgrip',
                    'nw': '#nwgrip'
                }
            });
        });
        </script>
        <style>
            #elementResizable {
                border: 1px solid #000000;
                width: 300px;
                height: 40px;
                overflow: hidden;
            }
            #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
                width: 10px;
                height: 10px;
                background-color: #ffffff;
                border: 1px solid #000000;
            }
            #segrip {
                right: -5px;
                bottom: -5px;
            }
        </style>
    </head>
    <body>
        <div …