私はソート可能行われている一部のリストではjQueryを使用してページを持っています。リストは、スタイルシートのautoと設定された固定高さとオーバーフローを持つdiv内にあります。jQueryのソート可能 - オーバーフローとdiv要素のスクロール：オート
ソート可能なのスクロール属性はページ全体のスクロールに影響を及ぼしているようだ、私はマウスがエッジ付近にあるとき、コンテナが自動的に上下にスクロールまたはDIV作ることができる方法はありますか？あなたはjQueryのプラグインscrollToを利用することができた場合
おかげ
グレアム
を参照してください。私はあなたがコンテナdivの端にマウスの近接度に応じて自動スクロールについて話していると仮定しています。
グレアム、 私はあなたのscripterlative.comの意見を試みたが、この男のスクリプトの有効期限が切れて数日後、画面にトライアル情報メッセージを表示する:)
私は簡単に解決するための小さなjqueryのプラグインを開発し、後この問題。
このプラグインを使用すると、セレクタ要素のエッジが自動的に検出されます 一方、jqueryのソート可能な部分をこのdivの内側に配置することもできます。
は、このプラグインは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);
使用方法を示すHTMLページの例。 Htmlページのソースはです。
<!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>
ちょっとfyasar、 ありがとう、これは本当に便利なようですね！私はまだそれを試してみる時間がありませんが、私はすぐにそれを与えることを楽しみにしています！ 素敵な仕事！ – Graeme
私はfyasarのソリューションを実装することができました。それは私にとって非常に効果的です。私は彼のプラグインをわずかに拡張し、彼の偉大な少しのコードを跨いで他の誰かのためにここに投稿したかったのです。
私が彼のソリューションで問題になったのは、スクロールを開始するボックスの上部と下部の「余白」がどこに位置するかを柔軟に制御できないことでした。そのビットは彼の解決策でハードコードされていました。
ロジックを少し拡張し、上部と下部のオフセットを受け入れるようにプラグインを変更し、ボックスの上部と下部の余白のサイズを制御しました。
これらのオプションは、今私がスクロールするのが最も合理的なポイントであることが判明何にデフォルト設定されています。しかし、コントロールの各使用法は、パラメータとして望ましい範囲を渡すことができます。
(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ソート可能な素晴らしいコントロールを使用してこの問題に取り組んでいる人に役立つことを願っています。
感謝MaxとFyasarの両方Jquery 1.4.2で動作するようになった。自動車は今うまく働いている：私は変更する必要が 唯一のことは、一定の高さとオーバーフローと固定のdivで今すぐソート可能な
$().mousemove(function(e) {...});
//change it to
this.mousemove(function(e) {...});
です。 ありがとう！
おかげさまで、私はそれを撃つつもりです - ええ、私はdivについてui.draggableをドラッグしているので、私は自動スクロールについて話しています。私が端に近づくにつれて、私はそれがdiv/divの下に移動することを望みます – Graeme
幸運 - 私はそれがどのように行くか、あなたがそれを働かせたらあなたの解決策を投稿することを知らせてください:) – karim79
よく、scrollToプラグインを見ました本当にクールに見えますが、それをマウスにどのようにフックするかはわかりませんでした。 http://scripterlative.com/files/cursordivscroll.htm 男は、マウスを取得するときに、私はdiv要素をスクロールするために得ることができた十分なので、公正である、それを使用するための寄付を要求します。このサイトが見つかりました いずれかのエッジの50ピクセル以内にする。これは私がマウスドラッグをしているかどうかに関係なく、あまりにも大きな問題ではありません。ここで問題となるのは、ソート可能な部分が実際にどこに到達したのか分からず、プレースホルダが約10秒間表示されないということだけです。 – Graeme