在没有使用jQuery UI的情况下使用jQuery来模拟使用div的框架调整行为？ [英] Emulating frame-resize behavior with divs using jQuery without using jQuery UI?

问题描述

我将客户端的网站从框架集转换为div。客户端拥有的一个功能是可以调整大小的侧栏，具体取决于用户需要多少空间。使用框架调整这个边栏的大小是内置的。然而，我在jQuery中模仿这个功能有些困难。

我不希望使用jQuery UI来做到这一点，我不需要UI套件提供的所有额外功能，而只需编写几行代码来处理这一问题。

我只需要在水平面上调整大小，垂直维度是固定的。

目前我有一个解决方案（有点）。侧边栏div可以调整大小，但只有当用户点击可调整大小的div时，拖动鼠标，然后再次点击div（移除mousemove事件）。

我想要的体验是这样的：用户将鼠标悬停在可调整大小的div上，按下鼠标按钮，然后拖动div变得更大/更小，然后释放按钮。

我遇到的问题是这样的：如果用户点击我的可调整大小的div，然后尝试拖动它使其更小/更大，鼠标变成no图标，并且存在透明版本的div这是药物周围的鼠标。

也许这是更好地解释我的代码：

<$ p $（$＃$）$（$＃$）$（$＃$）$（$＃$） b $（'＃mousestatus'）。html（mousedown+ i ++）;
$（document）.mousemove（function（e）{
$（'＃position'）。html（e。 pageX +'，'+ e.pageY）;
$（'＃sideba 。R）的CSS（ 宽度，e.pageX + 2）;
}）
console.log（leaving mouseDown）;
}）;
$（document）.mouseup（function（）{
$（'＃clickevent'）。html（'in another mouseUp event'+ i ++）;
$（document）.unbind 'mousemove'）;
}）;
}）;

和HTML：

 < div id =header> 
 header 
< span id =mousestatus>< / span> 
< span id =clickevent>< / span> 
< / div> 
< div id =sidebar> 
< span id =position>< / span> 
< div id =dragbar> 
< / div> 
侧边栏
< / div> 
< div id =main> 
 main 
< / div> 
< div id =footer> 
 footer 
< / div> 
  

这是一个基本布局工作的临时网页：

http://pastehtml.com/view/1crj2lj.html

如果您尝试使用棕色栏来调整标有侧栏的内容，可以看到问题。 noreferrer> http://www.jsfiddle.net/gaby/Bek9L/

我改变了 #main area为 left：200px （和no width ）。

添加 e.preventDefault（）在mousedown上，以避免文本的选择发生。

在代码中，我改变了 left #main 的属性，所以双方都会移动。

---

不确定你真正的问题是什么，但是看到的是 #sidebar 被调整了大小，但是在 #main ，所以 #dragbar 消失了。

I'm converting a site for a client from a frameset to divs. One feature that the client has is a sidebar that can be resized depending on how much space the user needs. Using frames the resizing of this sidebar was built in. However, I'm having some difficulty emulating this capability in jQuery.

I don't wish to use jQuery UI to do this, I have no need for all the extra functionality that the UI suite provides, and would rather just write a few lines of code to take care of this.

I only need to resize in the horizontal plane, vertical dimensions are fixed.

Currently I have a solution that (sort of) works. The sidebar div can be resized, but only if a user clicks on the resizable div, drags the mouse, then clicks on the div again (to remove the mousemove event).

The experience I want is this: A user hovers over the resizable div, presses the mouse button down, then drags the div to be larger/smaller, and releases the button.

The problem I'm having is this: If a user clicks on my resizable div, then tries to drag it to make it smaller/larger, the mouse becomes the "no" icon, and there is a transparent version of my div that is drug around with the mouse.

Perhaps this is better explained by checking out my code:.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

and HTML:

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

Here is a temp webpage with the basic layout working:

http://pastehtml.com/view/1crj2lj.html

The problem can be seen if you try to resize the thing labeled "sidebar" using the brown bar.

解决方案

Look at http://www.jsfiddle.net/gaby/Bek9L/

I changed the #main area to be left:200px (and no width).
Added e.preventDefault() on the mousedown to avoid the selection of text to occur.
In the code i alter the left property of the #main as well so both sides move..

---

Not sure what you problem really is, but what is see is that the #sidebar was resized but was going underneath the #main and so the #dragbar disappeared..

这篇关于在没有使用jQuery UI的情况下使用jQuery来模拟使用div的框架调整行为？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！