代码:

<div id="widget1">
  <div class="part blue">this is the part</div>
  <div class="part white">of the genial</div>
  <div class="part red">and good widget</div>
</div>

假设div#widget1的宽度为99px, div.part默认为33px。

如何通过增加div.blue的宽度和deacreasing宽度来轻松调整div.blue的大小?

http://jqueryui.com/demos/resizable/#synchronous-resize :给出一个显示元素同时增加的示例。

#1楼 票数:4 已采纳

调整div面板的可能重复

在这里测试我的解决方案: http//jsfiddle.net/lnplnp/MxKLH/

但这完全符合我的要求:

JAVASCRIPT:

$(document).ready(function() {

  // init
  var containerWidth = $("#container").width();
  var nbpanels = $(".panel").size();
  var padding = 2.5;

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({
    handles: 'e',
    maxWidth: 450,
    minWidth: 120,
    resize: function(event, ui){
      var currentWidth = ui.size.width;
      // set the content panel width
      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );
      $(this).width(currentWidth);
    }
  });

});

HTML:

<div id="container">
  <div id="panel1" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel2" class="panel" >
    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel3" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div id="panel4" class="panel" >
    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
  </div>
  <div class="clear"></div>
</div>

CSS:

.clear{
  clear:both;
}

#container{
  border: 1px red solid;
  margin: 0 auto;
  width: 900px;
}

.panel{
  background-color: #9999FF;
  float: left;
  height: 200px;
  padding: 2.5px;
}

#panel1{
  background-color: #FF0000;
}

我认为JS可以改进......但它正在发挥作用!

#2楼 票数:0

$('.part').attr('width',10);
$('.blue').attr('width',50);

使用此命名部分的所有div的宽度将减小,并且仅蓝色的宽度增加。

  ask by Manu translate from so

未解决问题?本站智能推荐:

1回复

有效地在JavaScript小部件中加载多个项目

我正在开发一个JavaScript小部件(使用jQuery),其他人可以将其嵌入到自己的网页中,例如: 我的窗口小部件需要加载几个项目: jQuery的 jQueryUI widget.css 来自我的服务器的数据(使用jQuery.getJSON)
2回复

jQuery UI对话框错误:b(“ ”).addClass(“ ui-widget-overlay”)未定义

我的对话框包含以下代码,其中包含一个下拉字段 有一个锚标记来填充对话框 我的问题是,当我第一次单击链接时,对话框将正确填充。 然后,我使用“取消”按钮关闭了对话框,然后再次单击链接以打开对话框并将其关闭。 对于链接的第三次单击,我得到以下Javascript错误,并且未打开对
2回复

单个页面上有多个Javascript小部件

您好所有Javascript和Widget专家。 在最近的两天里,我一直在努力工作,试图弄清楚如何启用我的窗口小部件,以便可以将其两次包含在同一页面上。 这是我所做的 1.driver.js(加载所有必需的)加载jquery,jquery-ui,wdcreate.js,并通过d
1回复

输入文本和按钮字段在Firefox中不起作用

我正在使用JQUERY小部件的某些应用程序上工作。 在该小部件中,有一些输入字段,例如文本,文本区域和按钮。 我只能通过TAB访问这些字段,但是直接用鼠标单击无法完成。 这个应用程式可以在Chrome上正常运作。 具有这些字段的简单html可以工作,但是当我在js文件中添加这些字段,然后
1回复

如何在jquery-ui小部件中存储内部属性?

我从头开始编写一个新的jquery-ui小部件。 我找到了官方的'小部件工厂如何工作'文件。 ( http://jqueryui.com/demos/widget/ ) 小部件本身工作正常。 现在我想在内部存储一些值 - 有一种首选方法吗? 我认为在选项中声明的所有属性都是公共的
1回复

用不同的形状填充div,没有间隙

我正在尝试制作一个小部件,它将用较小的div(代表较小的内容,如图像,文本,链接等)填充div。 想法是所有div都具有预先决定的大小,为了更容易理解,我将使用简单的单位。 例如,上图的形状为: A = 2x1 B = 1x2 C = 1x1 小部件尺寸= 2x10
4回复

我在这个jQuery链接中做错了什么?

在jQuery方面,我是一个完全新手,但我正在尝试在我的HTML页面上运行一个简单的accordion()代码。 这是我用过的链接,我包含了压缩生产jQuery 2.1.0 我正在尝试使用accordion()的代码片段是一系列带有标签的标签,其中包含段落,如下所示: sc
3回复

(jQuery 插件)在多项选择测验中拖放答案

我正在制作一个网页,用户必须在测验中将两个列表中的元素连接起来。 例如,假设有一个测验问题,您有两个列表,一个是国家/地区,一个是大写字母,用户必须将大写字母连接到正确的国家/地区。 优选地,应该有一种方法让用户可以将元素从第二个列表拖动到第一个列表元素旁边的区域。 像这样: 在这里,您可以将
2回复

通过小部件将 ISO-Date 替换为 HTML 文档中的正常日期

我的问题如下。 我使用 Duda 小部件生成器来构建我自己的小部件。 在一个应用程序中有一个 Date ,默认情况下它被描述为 ISO 。 现在转换并不太难,我尝试了以下操作: if (document.getElementById("date") !== null) { let d
2回复

带有边框的Div在Dragend上调整大小

我有一个带有几个可拖动和可调整大小的块的容器。 因为我希望能够向用户显示哪个块处于“活动” active ,所以我向其添加了active类并添加了边框。 现在的问题是,当我将块拖放到容器中几次时,div越来越大。 当然哪一个是不实际的。 当我从active类中删除样式时,不会发生