Jak pozwolić na zmianę rozmiaru DIVa w pionie tylko z jQuery - bez wtyczek?
Edytować: Umieszczam ten fragment kodu w jsbin:http://jsbin.com/eneru
Próbuję pozwolić użytkownikowi zmienić rozmiar (tylko pionowo) elementu DIV za pomocą jQuery. Czytałem o jQuery UI, wypróbowałem go, a po kilku minutach zadziałało. Ale biblioteka dodaje około 25 KB narzutu, którego chciałbym uniknąć, ponieważ chcę tylko prostej zmiany rozmiaru w pionie.
Próbowałem to zrobić sam. Oto HTML, używam stylizacji w wierszu dla jasności:
<div id="frame" style="border: 1px solid green; height: 350px">
<div style="height: 100%">Lorem ipsum blah blah</div>
<span id="frame-grip" style="display: block; width: 100%; height: 16px; background: gray"></span>
</div>
Jak widać, pod elementem DIV znajduje się mały pasek, więc użytkownik może przeciągnąć go w górę lub w dół, aby zmienić rozmiar DIV. Oto kod JavaScript (za pomocą jQuery):
$(document).ready(function(){
var resizing = false;
var frame = $("#frame");
var origHeightFrame = frame.height();
var origPosYGrip = $("#frame-grip").offset().top;
var gripHeight = $("#frame-grip").height();
$("#frame-grip").mouseup(function(e) {
resizing = false;
});
$("#frame-grip").mousedown(function(e) {
resizing = true;
});
$("#frame-grip").mousemove(function(e) {
if(resizing) {
frame.height(e.pageY - origPosYGrip + origHeightFrame - gripHeight/2);
}
});
});
Działa mniej więcej, ale jeśli przeciągniesz pasek zbyt szybko, przestaje on podążać za ruchem myszy i wszystko się psuje.
Po raz pierwszy próbuję coś zrobićpoważny (ahem) z JS i jQuery, więc mogę robić coś głupiego. Jeśli tak, proszę mi powiedzieć :)