Tôi có một trang sử dụng jQuery với một số danh sách đã được sắp xếp. Danh sách nằm bên trong một div có chiều cao cố định và bộ tràn được đặt thành tự động trong biểu định kiểu.jQuery Sortable - cuộn trong div với overflow: auto
Thuộc tính cuộn có thể sắp xếp dường như ảnh hưởng đến việc cuộn toàn bộ trang, có cách nào tôi có thể làm div vùng chứa tự động cuộn lên hoặc xuống khi con chuột ở gần cạnh không?
Cảm ơn
Graeme
tôi sẽ có một cái nhìn tại jQuery plugin này, tôi đã sử dụng và thấy khá đẹp:
http://rascarlito.free.fr/hoverscroll/
Bye, Cyril
Xem nếu bạn có thể tận dụng các plugin jQuery scrollTo. Tôi giả sử bạn đang nói về cuộn tự động tùy thuộc vào sự gần nhau của con chuột để các cạnh của div container.
Graeme, Tôi cố gắng quan điểm scripterlative.com của bạn, nhưng một vài ngày sau khi kịch bản của anh chàng này đã hết hạn và hiển thị thông điệp thông tin thử nghiệm trên màn hình :)
Sau đó, tôi đã phát triển một plugin jquery nhỏ để dễ dàng giải quyết vấn đề này.
Khi bạn sử dụng plugin này, nó sẽ tự động phát hiện các phần tử chọn tự động, Mặt khác, bạn cũng có thể đặt sắp xếp của jquery vào bên trong các div này.
Đừng quên plugin này phụ thuộc vào plugin Jquery.Scrollto.
Nó giải quyết được vấn đề của tôi, tôi hy vọng nó sẽ giúp ích cho bạn.
Nguồn trình cắm là;
/*
* jQuery Html element edges auto scrollable plugin.
*
* Copyright (c) 2009 Fatih YASAR
*/
(function($) {
$.fn.setEdgesAutoScrollable = function(options) {
var defaults = {
scrollspeed: 200,
incrementSeed: 20
};
var options = $.extend(defaults, options)
var top = $(this).offset().top;
var left = $(this).offset().left;
var height = $(this).height();
var width = $(this).width();
var selectedItemSelector = this.selector;
var xmin = left;
var xmax = (width + left) + 20;
var ymin = (height + top) + 10;
var ymax = (height + top) + 30;
$().mousemove(function(e) {
if (e.pageX > xmin && e.pageX < xmax) {
if (e.pageY > (top - 10) && e.pageY < (top + 10)) {
//top edges
$(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else if (e.pageY > ymin && e.pageY < ymax) {
//bottom edges
$(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else {
$(selectedItemSelector).stop();
}
}
return true;
});
}
})(jQuery);
Ví dụ về trang html để minh họa cách sử dụng. Nguồn trang Html là;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="js/[plugin src]" type="text/javascript"></script>
<style>
body
{
font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
font-size:13px;
}
.scrollable-wrapper
{
width:650px;
height:350px;
}
.scrollable-area
{
float:left;
width:220px;
height:350px;
border:solid 2px #ccc;
margin-left:20px;
overflow:auto;
}
</style>
<script>
$(function() {
$("#scrollable-area1").setEdgesAutoScrollable();
$("#scrollable-area2").setEdgesAutoScrollable();
});
</script>
</head>
<body>
<div class="scrollable-wrapper">
<div id="scrollable-area1" class="scrollable-area">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
</div>
<div id="scrollable-area2" class="scrollable-area">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
</div>
</div>
</body>
</html>
Hey fyasar, Cảm ơn, điều này có vẻ như nó thực sự hữu ích! Tôi đã không có thời gian để thử nó ra nhưng tôi mong muốn cho nó một shot sớm! Làm tốt lắm! – Graeme
Tôi đã có thể thực hiện giải pháp của fyasar và nó hoạt động tốt cho tôi. Tôi mở rộng plugin của mình một chút và muốn đăng nó ở đây cho bất cứ ai khác tình cờ gặp chút ít mã nguồn của anh ấy.
Vấn đề tôi gặp phải với giải pháp của ông là nó không cung cấp sự linh hoạt để kiểm soát nơi "lề" ở đầu và cuối hộp sẽ khởi động cuộn sẽ nằm. Đó là bit đã được hardcoded trong giải pháp của mình.
Tôi đã mở rộng logic một chút và thay đổi plugin để chấp nhận các bù đắp trên cùng và dưới cùng để kiểm soát kích thước của lề đó ở đầu và cuối hộp.
Các tùy chọn này hiện được đặt mặc định thành những gì tôi thấy là điểm hợp lý nhất để cuộn. Nhưng mỗi cách sử dụng của điều khiển có thể vượt qua trong phạm vi mong muốn như các tham số.
(function($) {
$.fn.setEdgesAutoScrollable = function(options) {
var defaults = {
scrollspeed: 200,
incrementSeed: 20,
topOffsetTop: -10,
topOffsetBottom: 30,
bottomOffsetTop: -20,
bottomOffsetBottom: 20
};
var options = $.extend(defaults, options)
var top = $(this).offset().top;
var left = $(this).offset().left;
var height = $(this).height();
var width = $(this).width();
var selectedItemSelector = this.selector;
var bottom = (top + height);
var right = (left + width);
var xmin = left;
var xmax = right + 20; // take scrollbar into account
var topScrollTop = top + defaults.topOffsetTop;
var topScrollBottom = top + defaults.topOffsetBottom;
var bottomScrollTop = bottom + defaults.bottomOffsetTop;
var bottomScrollBottom = bottom + defaults.bottomOffsetBottom;
$().mousemove(function(e) {
var myPageX = e.pageX;
var myPageY = e.pageY;
if (myPageX > xmin && myPageX < xmax) {
if (myPageY > topScrollTop && myPageY < topScrollBottom) {
//top edges
$(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else if (myPageY > bottomScrollTop && myPageY < bottomScrollBottom) {
//bottom edges
$(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
} else {
$(selectedItemSelector).stop();
}
}
return true;
});
}
})(jQuery);
Tôi hy vọng điều này sẽ giúp bất kỳ ai khác gặp sự cố này với điều khiển tuyệt vời có thể sắp xếp jquery.ui.
Nhờ cả Max và Fyasar. Tôi đã làm việc với Jquery 1.4.2. Điều duy nhất tôi cần phải thay đổi là
$().mousemove(function(e) {...});
//change it to
this.mousemove(function(e) {...});
Bây giờ sắp xếp trong một div cố định với chiều cao cố định và overflow: auto đang làm việc độc đáo bây giờ. Cảm ơn!
Cảm ơn tuyệt vời !!, tôi sẽ chụp ảnh - vâng, tôi đang nói về cuộn tự động khi tôi đang kéo ui.draggable về div. Khi tôi nhận được gần cạnh, tôi muốn nó di chuyển xuống/lên div – Graeme
Chúc may mắn - cho tôi biết làm thế nào nó đi, hoặc thậm chí gửi giải pháp của bạn nếu bạn nhận được nó làm việc :) – karim79
Vâng, hãy xem scrollTo plugin mà trông thật sự tuyệt vời nhưng không chắc chắn làm thế nào để móc nó lên đến con chuột. Tìm thấy trang web này: http://scripterlative.com/files/cursordivscroll.htm Anh ấy yêu cầu đóng góp để sử dụng nó đủ công bằng và vì vậy tôi đã quản lý để có được div cuộn khi chuột được trong phạm vi 50 pixel của một trong hai cạnh. Điều này là bất kể tôi có kéo chuột xuống không phải là vấn đề quá lớn. Chỉ có vấn đề bây giờ là Sortable thực sự không hiểu nó ở đâu khi tôi chạm đáy và trình giữ chỗ không được hiển thị trong khoảng 10 giây. – Graeme