我有以下代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main-content {
width:300px;
height:500px;
background:#00F;
overflow:auto;
}
#top-name , #top-ip {
background:#000;
color:#FFF;
width:80%;
position:relative;
left:10%;
margin-bottom:5px;
margin-top:5px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$("#top-ip").resizable({
handles: 'n, s'
});
$("#extrainfo").hide();
$("#top-name").mouseenter(function() {
$("#extrainfo").fadeIn();
});
$("#top-name").mouseleave(function() {
$("#extrainfo").fadeOut();
});
var stop = false;
$( "#accordion h2" ).click(function( event ) {
if ( stop ) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
} …我试图创建一个淘汰绑定到jquery ui可调整大小的小部件.我的自定义绑定绑定到视图模型上的2个不同的可观察对象,即"left"和"width".
<div class="layer" data-bind="resizable: {left: left, width: width}">
<div class="left ui-resizable-handle ui-resizable-w"><<<</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>
ko.bindingHandlers.resizable = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var values = valueAccessor();
$(element).resizable({
handles: null,
resize: function(event, ui) {
values.left(ui.position.left);
values.width(ui.size.width);
}
});
},
update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
var values = valueAccessor();
$(element)
.css('left', values.left() + 'px')
.css('width', values.width() + 'px')
;
}
};
var vm = {
left: ko.observable(50),
width: ko.observable(300)
};
ko.applyBindings(vm);
问题是,当我使用左句柄调整div时,2个observable会更新,从而在同一个绑定中触发2次更新.我需要它才能触发一次更新.
我对这种绑定有什么选择？创建绑定到多个observable的绑定的推荐方法是什么？
我的真实世界代码更复杂,但我认为iv将我的问题归结为这个小提琴:
我正在构建一个网站,允许用户创建一个html页面,然后可以在另一个站点上保存和共享.我希望他们能够调整大小并拖动页面元素.我可以使用jQuery做到这一点,但我不知道如何保存它,以便在其他地方查看页面时,它看起来是一样的.
我还没有决定如何存储页面信息,但我在想的是我可以将每个元素与其绝对位置及其内容一起存储在数据库中.这听起来像个好计划吗？
如果是这样,我如何获得div的位置传递给php,以便它可以保存？
谢谢.
我会尝试用文字说清楚:我想知道是否有一种方法可以使jquery-ui-resizable同时调整4面上的对象的大小,以便对象的中心保持在同样的立场.
这是沙箱http://jsfiddle.net/V79Ge/
所以,它非常像aspectRatio = true,但是当我从一侧调整对象的大小时,它会控制另外三个边
谢谢你的线索!
我使用下面的代码来拖动和调整图像大小,
<!DOCTYPE html>
<html>
<head lang="en">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
$(document).ready(function() {
$( "#img_content" ).draggable().resizable();
});
</script>
</head>
<body class='default'>
<div class="demo">
<!--<div id="img_content" class="ui-widget-content">
<p>Drag me around</p>
</div>-->
<img id="img_content" class="ui-widget-content" src="Tulips.jpg" />
</div>
</body>
</html>
可调整大小正在正常工作.但拖动图像不起作用.如果我申请div结构
<div id="img_content" class="ui-widget-content">
<p>Drag me around</p>
</div>
它的工作正常.
如何为图像标记实现拖动和调整大小？
我正在尝试实现排序并调整网格布局中的几个div的大小.
这是一个例子小提琴
但问题是,一旦我调整大小(使div更大)然后当我尝试排序时排序不正常.它不是正确对齐,而是从放置内部div的另一个div溢出.
调整大小不适合小提琴.这是我在调整大小后需要实现的正确结果(假设max-width resizable是外部div的宽度).但是在我的代码中,如果我尝试调整大小,元素是重叠的,如果我将它放在右侧,则元素溢出外部容器div.(在结果中)它没有发生,尝试将div {3}保持在div {2}的位置
我正在使用自举流体布局.所以div的大小与span类相同.这是我正在使用的代码
<div class="row-fluid" id="sortable">
<div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
<div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
<div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
<div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
<div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
</div>
<script>
$(document).ready(function() {
$(function() {
$( "#sortable" ).sortable();
});
$(function() {
$('.well').resizable();
});
});
</script>
问题:
Jquery-ui-resizable似乎不适用于旋转对象.在旋转元素之后,手柄执行与未旋转元素相同的操作.
想法:
轴可以根据旋转矩阵旋转(http://en.wikipedia.org/wiki/Rotation_matrix).所以我想我们可以获得更新的鼠标坐标x' = x*cos(a) -y*sin(a); y' = x*sin(a) + y*cos(a).
有没有人见过类似的解决方案(补丁,或用于调整大小的独立jquery插件)？谁能给一个建议给我,如果我会重写_mouseStart和_mouseDrag一个jquery.ui.resizable的方法呢？
我的代码如下 div 可以使用 JQuery 拖动和调整大小。我希望内部文本根据调整大小的 div 自动调整大小。下面的代码适用于宽度，但它不会获取 div 的全高。
<div class="dragDiv" id="dragDiv"> <textarea style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
<br/><input type="submit" value="Mark" onclick="MarkImage()" />
</div>
看起来简单的事情就是不打球. 如何检查元素是否可调整大小？
香港专业教育学院尝试了一些没有太多运气的jsfiddle测试.我已经尝试在这里查看官方说明页面:http://jqueryui.com/demos/resizable/#method-option和一些谷歌搜索并检查stackoverflow上的答案,但仍然无法让它给我正确的答案.以下代码无论如何都会被"禁用".
继承人:http://jsfiddle.net/dbKtP/11/
$("#a").resizable();
if ($("#a").resizable("option","enable") == true){
alert("enabled");
} else {
alert("disabled");
}
任何人都可以解决这个简单但令人困惑的问题吗？
我有一个div需要高度可调整大小.在顶部添加可调整大小的栏不是问题,但是我还需要在灰色栏的左侧添加一个图标,这样对于用户来说,他们可以拖动它更明显.
不幸的是,我似乎无法让它工作.设置ui-resizable-n类的背景将不起作用并向<img/>生成的句柄添加标记,虽然我可以使其看起来正确,我无法抓取图标并拖动它.
有什么想法吗 ？
http://plnkr.co/edit/tAQbS6LYMebLGsCXPJwL?p=preview
布局:https://dl.dropboxusercontent.com/u/2227188/handle%20on%20the%20left.png(灰色栏位于2个div之间,它正在调整它们的大小..这部分已完成 - 注意图标上的bray bar的左边).
