Поддающийся сортировке jQuery - прокрутка в отделении с overflow:auto
Это просто, насколько это возможно, используя этот метод утилит
/*
* param@ imageView is your image you want to bordered it
*/
public static Bitmap generateBorders(ImageView imageView){
Bitmap mbitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
Bitmap imageRounded = Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), mbitmap.getConfig());
Canvas canvas = new Canvas(imageRounded);
Paint mpaint = new Paint();
mpaint.setAntiAlias(true);
mpaint.setShader(new BitmapShader(mbitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
canvas.drawRoundRect((new RectF(0, 0, mbitmap.getWidth(), mbitmap.getHeight())), 100, 100, mpaint);// Round Image Corner 100 100 100 100
return imageRounded;
}
, а затем установите растровое изображение вашего изображения с возвращаемым значением, получайте удовольствие
5 ответов
Я хотел бы взглянуть на этот плагин jQuery, который я использовал, и нашел довольно приятным:
http://rascarlito.free.fr/hoverscroll/
Пока, Кирилл
Посмотрите, сможете ли вы использовать плагин jQuery scrollTo . Я предполагаю, что вы говорите об автоматической прокрутке в зависимости от близости мыши к краям контейнера div.
Грэм, Я попробовал ваше мнение на scripterlative.com, но через несколько дней после того, как срок действия скрипта этого парня истек, и на экране появилось сообщение с информацией о пробной версии:)
После этого я разработал небольшой плагин jquery для легкого решения этой проблемы.
Когда вы используете этот плагин, он автоматически обнаруживает края элементов селектора, С другой стороны, вы также можете поместить jquery sortable внутрь этого 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, и оно отлично работает для меня. Я немного расширил его плагин и хотел опубликовать его здесь для всех, кто наткнется на его замечательный небольшой фрагмент кода.
Проблема, с которой я столкнулся с его решением, заключалась в том, что оно не давало гибкости для контроля, где "маржа" "вверху и внизу окна, которое будет запускать прокрутку, будет располагаться. Этот бит был жестко запрограммирован в его решении.
Я немного расширил логику и изменил плагин, чтобы он принимал верхнее и нижнее смещения, чтобы контролировать размер этого поля сверху и снизу поля.
Эти параметры теперь установлены по умолчанию на то, что я обнаружил. наиболее разумные точки для прокрутки. Но каждое использование элемента управления может передаваться в желаемом диапазоне в качестве параметров.
(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.
- Макс
Спасибо Максу и Фьясару. У меня получилось работать с JQuery 1.4.2. Единственное, что мне нужно изменить, это
$().mousemove(function(e) {...});
//change it to
this.mousemove(function(e) {...});
Теперь можно сортировать в фиксированном div с фиксированной высотой и переполнением: теперь auto работает нормально. Благодарить!