मेरे पास कुछ सूचियों के साथ jQuery का उपयोग करके एक पृष्ठ है जिसे क्रमबद्ध किया गया है। सूची एक div के अंदर है जिसमें स्टाइलशीट में एक निश्चित ऊंचाई और अतिप्रवाह सेट है।jQuery सॉर्ट करने योग्य - ओवरफ़्लो के साथ div में स्क्रॉलिंग: ऑटो
क्रमबद्ध स्क्रॉल विशेषता पूरे पृष्ठ की स्क्रॉलिंग को प्रभावित करती है, क्या कोई तरीका है कि जब मैं किनारे के पास होता है तो कंटेनर div स्वचालित रूप से ऊपर या नीचे स्क्रॉल कर सकता है?
धन्यवाद
ग्रीम
मैं इस jQuery प्लगइन पर एक नज़र ले जाएगा मैं का इस्तेमाल किया और काफी अच्छा पाया है:
http://rascarlito.free.fr/hoverscroll/
अलविदा, सिरिल
देखें आप jQuery scrollTo प्लगइन का उपयोग कर सकते हैं। मुझे लगता है कि आप कंटेनर div के किनारों पर माउस की निकटता के आधार पर स्वचालित स्क्रॉलिंग के बारे में बात कर रहे हैं।
ग्रीम, मैं अपने scripterlative.com राय कोशिश की, लेकिन कुछ दिनों के इस आदमी की पटकथा के बाद समाप्त हो और स्क्रीन :)
के बाद पर परीक्षण की जानकारी संदेश प्रदर्शित, मैं आसानी से हल करने के लिए एक छोटा सा jQuery प्लगइन विकसित इस मुद्दे।
जब आप इस प्लगइन का उपयोग करते हैं, तो यह चयनकर्ता तत्व स्वचालित रूप से किनारों का पता लगाएगा, दूसरी तरफ आप इस divs के अंदर jquery की क्रमबद्ध भी डाल सकते हैं।
यह प्लगइन Jquery.Scrollto प्लगइन पर निर्भर नहीं है।
यह मेरी समस्या हल करता है, मुझे आशा है कि इससे आपकी मदद मिलेगी।
प्लगइन स्रोत है;
/*
* 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);
एचटीएमएल पृष्ठ उदाहरण का उपयोग करने के तरीके के प्रदर्शन के लिए। एचटीएमएल पेज स्रोत है;
<!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>
हे फ़्यासार, धन्यवाद, ऐसा लगता है कि यह वास्तव में उपयोगी हो सकता है! मुझे अभी तक कोशिश करने का समय नहीं मिला है, लेकिन मैं जल्द ही इसे एक शॉट देने की उम्मीद कर रहा हूं! अच्छा काम! – Graeme
मैं फ़्यासार के समाधान को लागू करने में सक्षम था और यह मेरे लिए बहुत अच्छा काम करता है। मैंने अपनी प्लगइन थोड़ा बढ़ा दी और इसे किसी और के लिए यहां पोस्ट करना चाहता था जो कोड के अपने बहुत छोटे कोड में फंसे हुए थे।
जिस समस्या में मैंने अपने समाधान के साथ भाग लिया था, वह यह था कि स्क्रॉलिंग को दूर करने वाले बॉक्स के ऊपर और नीचे "मार्जिन" कहां पर लचीलापन नहीं दिया जाएगा। उस बिट को उसके समाधान में हार्डकोड किया गया था।
मैंने तर्क को थोड़ा बढ़ाया और बॉक्स के ऊपर और नीचे उस मार्जिन के आकार को नियंत्रित करने के लिए शीर्ष और निचले ऑफसेट को स्वीकार करने के लिए प्लगइन को बदल दिया।
उन विकल्पों को अब स्क्रॉल करने के लिए सबसे उचित बिंदु होने के कारण डिफ़ॉल्ट रूप से डिफॉल्ट किया गया है। लेकिन नियंत्रण के प्रत्येक उपयोग वांछित सीमा में पैरामीटर के रूप में पारित कर सकते हैं।
(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);
मुझे उम्मीद है कि यह किसी भी अन्य महान jquery.ui sortable नियंत्रण के साथ इस समस्या में भागने में मदद करता है।
के लिए धन्यवाद मैक्स और फ़्यासर दोनों। मुझे यह Jquery 1.4.2 के साथ काम करने के लिए मिला। केवल एक चीज मैं बदलना होगा
$().mousemove(function(e) {...});
//change it to
this.mousemove(function(e) {...});
अब निश्चित ऊंचाई और अतिप्रवाह के साथ एक निश्चित div में है: ऑटो अब अच्छी तरह से काम कर रहा है। धन्यवाद!
कूल धन्यवाद !!, मैं इसे एक शॉट दूंगा - हाँ, मैं स्वचालित स्क्रॉलिंग के बारे में बात कर रहा हूं क्योंकि मैं div के बारे में ui.draggable खींच रहा हूं। जैसे ही मैं किनारे के पास जाता हूं, मैं चाहता हूं कि यह div – Graeme
गुड लक - मुझे बताएं कि यह कैसे चल रहा है, या यहां तक कि अगर आप इसे काम कर रहे हैं तो भी अपना समाधान पोस्ट करें :) – karim79
ठीक है, स्क्रॉल करने के लिए प्लगइन देखें वास्तव में अच्छा लग रहा है लेकिन यह सुनिश्चित नहीं था कि माउस को कैसे लगाया जाए। इस साइट को मिला: http://scripterlative.com/files/cursordivscroll.htm लड़का इसका उपयोग करने के लिए दान का अनुरोध करता है जो पर्याप्त है और इसलिए जब मैं माउस प्राप्त करता हूं तो मैं स्क्रॉल को स्क्रॉल करने में कामयाब रहा हूं किनारे के 50 पिक्सल के भीतर। यह इस पर ध्यान दिए बिना कि मेरे पास माउस ड्रैगिंग है या नहीं, जो कि एक मुद्दा बहुत बड़ा नहीं है। केवल समस्या यह है कि सॉर्ट करने योग्य वास्तव में समझ में नहीं आता है कि जब मैं नीचे पहुंचता हूं और प्लेसहोल्डर लगभग 10 सेकंड के लिए नहीं दिखाया जाता है। – Graeme