我有div元素,包含图像.我想使用jQuery-UI使div可调整大小,调整div和子图像元素的大小.
我已尝试使用alsoResize,如下所示,但它似乎调整了第一个div图像而不是相应的子图像.
$('div').resizable({
alsoResize: $(this).find('img'),
aspectRatio: true,
maxHeight: 140
});
我创建了一个小提琴来演示这个http://jsfiddle.net/letsgojuno/EhyGy/
看起来这个上下文总是第一个div,而不是当前正在调整大小的div.
我正在使用Jquery UI可调整大小的插件来调整各种div的大小.考虑以下HTML页面(嵌入了JS):
<html>
<head></head>
<body>
<div id="site">
<div>This element is resizable</div>
<br />
<div style="width: 200px;">This is another resizable element</div>
</div>
<!-- javascript includes -->
<script>
$(function() {
$("#site div").click(function() {
console.log("Clicked");
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
}
else { // Currently not selected, so let's select it
$(this).addClass("selected").resizable({
start: function(event, ui) {
console.log("Start");
},
resize: function(event, ui) {
console.log("Resize");
},
stop: function(event, ui) {
console.log("Stop");
}
});
}
});
});
</script>
</body>
</html>
所以,我在这个示例代码中想要完成的事情非常简单.当用户点击嵌套在"#site"中的div时,我希望div变为"已选中".因此,在此示例中,当触发div的click事件时,名为"selected"的CSS类将添加到单击的div中.除了单击div之外,用户还可以调整div的大小.当用户调整所选div的大小时会出现问题.显然,当用户首次选择div时会触发click事件,但当用户单击并拖动div的边缘以调整其大小时,也会触发click事件.click事件将调用click例程并取消选择div.这不是我想要发生的事情.只有在所有可调整大小的事件都被触发后才会触发click事件.
有了这个,我的问题是,我怎么能处理这个场景以允许用户单击并选择div,还允许div调整大小,但在拖动和调整div的大小时不取消选择？非常感谢您的帮助.提前致谢.
我在一个父div中有3个div,当你想第一次重新调整元素大小时,其他元素的位置会改变, JSFIDDLE
这是我的代码:
HTML
<div class="parent">
<div class="element" >BOX1</div>
<div class="element" >BOX2</div>
<div class="element" >BOX3</div>
</div>
CSS
.parent {
width:300px;
height:300px;
background:#e0e0e0
}
.element {
width:100px;
height:20px;
background:red;
}
JS
$(document).ready(function() {
var x = 0;
$('.element').each(function() {
x++;
$(this).draggable({
containment: $('.parent')
});
$(this).resizable({
containment: $('.parent')
});
$(this).css('left', x * 50);
$(this).css('top', x * 50);
});
});
我正在尝试使用jQuery UI的resizable()方法和flexbox(也许这就是问题？但我说不太可能).
我有3列,我希望左右列可调整大小,并使中心列占用任何剩余空间.我的CSS看起来像这样:
.container {
display: flex;
}
.col-left,
.col-right {
width: 200px;
}
.col-center {
flex: 1;
}
左列适用于此jquery:
$('.col-left').resizable({
handles: 'e'
});
并且在调整大小时添加的唯一属性是width,但是当我将其用于右列时:
$('.col-right').resizable({
handles: 'w'
});
宽度和左侧属性被添加.左边的房产真的搞砸了布局.它将左列拉到中心柱上,同时也用宽度将其压扁,因此最终结果非常糟糕.在我的检查员中,如果我删除左侧属性,它似乎工作得很好.
我已经在这里阅读了几次文档,但是我没有看到任何地方我会如何关闭它.
这是我重新创建问题的笔:http: //codepen.io/dustindowell/pen/NPyaBL
一个解决方法是监听resize事件并只是覆盖CSS但这看起来很糟糕.
$('.col-right').resizable({
handles: 'w'
}).on('resize', function() {
$(this).css({
left: 0
});
});
更新:
经过一番挖掘后,我发现这是一个jQuery UI bug.
Bug Ticket:http: //bugs.jqueryui.com/ticket/4985#comment:1
我遇到了克隆元素的奇怪问题(使用.clone(true)),jQuery UI具有可拖动和可调整大小的功能.克隆后,克隆的元素没有这些功能,它们只是不起作用.
我一直在寻找各种解决方案,比如在克隆之后分配功能并仍然存在问题.
这是代码
jQuery(document).ready(function(){
jQuery('#res').draggable({
containment: 'body',
grid: [ 10, 10 ],
snap: true,
});
jQuery('#res').resizable({
grid : 10,
handles : 's'
});
var res_clone = jQuery('#res').clone(true);
jQuery(res_clone).attr('id', 'res_clone');
jQuery('#res').parent().append(res_clone);
});
我有以下代码
$(document).ready(function() {
$('#content_reservation-fullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: <?php echo($event_list); ?>
});
$("#content_reservation-fullCalendar").resizable({
handles: 'e',
create:
function(event, ui){
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize intialized");
},
resize:
function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize callback triggered");
}
});
/*
$("#content_reservation-fullCalendar").bind("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
*/
});
作为一个drupal主题模板,当我在初始化程序中设置事件回调时,它们不会被触发,但是当我resize通过绑定绑定事件时它起作用,但不适用于resizecreate.我想知道为什么这些事件没有作为初始化程序的一部分进行注册,是否有一些我缺少的东西或者它可能是一些配置问题.我没有收到任何php/javascript错误.
javascript jquery jquery-ui jquery-ui-resizable fullcalendar
我会在可调整大小的 div 上指定不同的最大约束。例如，我希望北方向最大调整大小为 20 像素，南方向最大调整大小为 200 像素。
我可以使用 maxHeight 轻松完成一个方向，并将手柄限制在一个方向，但我无法同时管理这两个方向。
绝对不可能吗？
我有一个带有嵌入式youtube视频的页面，并且正在尝试实现自定义叠加层，您可以在其中使用可调整大小和可拖动的区域<div>（使用JQuery UI）定义区域。
在<div>屏幕上的其他区域拖动鼠标时，它的响应速度非常快，但是在视频上播放（如果使用IFrame API嵌入，则很重要），如果将鼠标移到抓取位置以外的任何位置，它将定期“失去抓地力”在调整大小手柄或移动手柄上。IE和Chrome都是这种情况。
JSFiddle此处：http：//jsfiddle.net/MfZes/1/（可拖动框位于youtube框架下方）
有谁知道这是为什么，或者是否可以避免？
提前致谢。
我有两个可调整大小的元素,我需要它们调整大小同步维护网格.似乎这两个选项不能一起工作.有任何想法吗？
演示:http://jsfiddle.net/CbYtT/2/ (尝试水平调整大小)
$(function() {
$( "#this" ).resizable({
alsoResize: "#that",
grid: 100
});
$( "#that" ).resizable({
alsoResize: "#this",
grid: 100
});
});
我有一个视图,不是窗口的大小,也不是窗口本身,当它调整大小时,我想比较调整大小的开始和结束值.然而,JQ-UI的resize ui对象仅包含前一个状态,而不是原始状态,因此它只是按像素抓取更改(虽然我认为这是因为我将代码放在resize函数中,而不是end函数,但是这不是真正的问题,因为一旦我知道如何将var恢复到Backbone View本身就可以解决它.如何从调整大小中获取信息回到主干视图？ self是全局window对象,this是来自选择器的JQuery结果this.el.
define([ ... ], function( ... ){
return Backbone.View.extend({
// I also tried to use the event handlers from backbone
events : {
'resize' : 'info'
},
initialize: function(options){
if (options) { ... }
this.el = '#measure-rep-c55';
}
//Dispatch listeners
...
//Binding
this.model.bind('change', _.bind(this.render, this));
$(this.el).on('resize', this.info); // Here I am trying to attach the listener here according the API
this.render();
},
info: function(){
console.log('in info')
},
render: function(){
... …jquery-ui ×9
jquery ×7
javascript ×5
backbone.js ×1
fullcalendar ×1
resizable ×1
youtube-api ×1