Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-03 06:10:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make sure newX and newY are initialized to the current scroll offsets. This fixes a scroll propagation bug that was resetting the non-scrolled dimension to zero.

Browse source 
Replaced all occurences of "horizontal" and "vertical" with "x" and "y".

Modified samples to use data-scroll="x|y|true".

Implemented public scrollTo(0 function that gives an optional duration parameter for animated scrolling.
This commit is contained in:
Kin Blas 2010-11-30 15:20:10 -08:00
parent 81f67e1aaf
commit fbaa3c1288
5 changed files with 286 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
experiments/scrollview/jquery.mobile.scrollview.css
View file

@ -24,14 +24,14 @@
opacity: 1;
}
.ui-scrollbar-vertical {
.ui-scrollbar-y {
top: 2px;
right: 2px;
bottom: 8px;
width: 5px;
}
.ui-scrollbar-horizontal {
.ui-scrollbar-x {
right: 8px;
bottom: 2px;
left: 2px;
@ -54,12 +54,12 @@
border-radius: 2px;
}
.ui-scrollbar-vertical .ui-scrollbar-thumb {
.ui-scrollbar-y .ui-scrollbar-thumb {
width: 5px;
height: 100%;
}
.ui-scrollbar-horizontal .ui-scrollbar-thumb {
.ui-scrollbar-x .ui-scrollbar-thumb {
width: 100%;
height: 5px;
}

76
experiments/scrollview/jquery.mobile.scrollview.js
View file

@ -9,7 +9,7 @@
jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
options: {
fps: 60, // Frames per second in msecs.
direction: null, // "vertical", "horizontal", or null for both.
direction: null, // "x", "y", or null for both.
scrollDuration: 2000, // Duration of the scrolling animation in msecs.
overshootDuration: 250, // Duration of the overshoot animation in msecs.
@ -59,8 +59,8 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._sy = 0;
var direction = this.options.direction;
this._hTracker = (direction != "vertical") ? new MomentumTracker(this.options) : null;
this._vTracker = (direction != "horizontal") ? new MomentumTracker(this.options) : null;
this._hTracker = (direction != "y") ? new MomentumTracker(this.options) : null;
this._vTracker = (direction != "x") ? new MomentumTracker(this.options) : null;
this._timerInterval = 1000/this.options.fps;
this._timerID = 0;
@ -160,6 +160,10 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._sx = x;
this._sy = y;
var kdebug = 0;
if (y == 0)
++kdebug;
var $v = this._$view;
var uct = this.options.useCSSTransform;
@ -194,6 +198,40 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
}
},
scrollTo: function(x, y, duration)
{
this._stopMScroll();
if (!duration)
return this._setScrollPosition(x, y);
x = -x;
y = -y;
var self = this;
var start = getCurrentTime();
var efunc = $.easing["easeOutQuad"];
var sx = this._sx;
var sy = this._sy;
var dx = x - sx;
var dy = y - sy;
var tfunc = function(){
var elapsed = getCurrentTime() - start;
if (elapsed >= duration)
{
self._timerID = 0;
self._setScrollPosition(x, y);
}
else
{
var ec = efunc(elapsed/duration, elapsed, 0, 1, duration);
self._setScrollPosition(sx + (dx * ec), sy + (dy * ec));
self._timerID = setTimeout(tfunc, self._timerInterval);
}
};
this._timerID = setTimeout(tfunc, this._timerInterval);
},
_getScrollPosition: function(x, y)
{
return { x: this._sx, y: this._sy };
@ -283,7 +321,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._disableTracking();
sv._handleDragStart(e,ex,ey);
sv._directionLock = dir;
sv._didDrag = this.didDrag;
sv._didDrag = this._didDrag;
},
_handleDragMove: function(e, ex, ey)
@ -308,10 +346,10 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
var dir = null;
var r = 0;
if (x < y && (x/y) < 0.5) {
dir = "vertical";
dir = "y";
}
else if (x > y && (y/x) < 0.5) {
dir = "horizontal";
dir = "x";
}
var svdir = this.options.direction;
@ -332,10 +370,10 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._directionLock = svdir ? svdir : (dir ? dir : "none");
}
var newX = 0;
var newY = 0;
var newX = this._sx;
var newY = this._sy;
if (this._directionLock != "vertical" && this._hTracker)
if (this._directionLock != "y" && this._hTracker)
{
var x = this._sx;
this._speedX = dx;
@ -346,9 +384,9 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._doSnapBackX = false;
if (newX > 0 || newX < this._maxX)
{
if (this._directionLock == "horizontal")
if (this._directionLock == "x")
{
var sv = this._getAncestorByDirection("horizontal");
var sv = this._getAncestorByDirection("x");
if (sv)
{
this._setScrollPosition(newX > 0 ? 0 : this._maxX, newY);
@ -361,7 +399,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
}
}
if (this._directionLock != "horizontal" && this._vTracker)
if (this._directionLock != "x" && this._vTracker)
{
var y = this._sy;
this._speedY = dy;
@ -372,9 +410,9 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._doSnapBackY = false;
if (newY > 0 || newY < this._maxY)
{
if (this._directionLock == "vertical")
if (this._directionLock == "y")
{
var sv = this._getAncestorByDirection("vertical");
var sv = this._getAncestorByDirection("y");
if (sv)
{
this._setScrollPosition(newX, newY > 0 ? 0 : this._maxY);
@ -497,13 +535,13 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
var suffix = "\"><div class=\"ui-scrollbar-track\"><div class=\"ui-scrollbar-thumb\"></div></div></div>";
if (this._vTracker)
{
$c.append(prefix + "vertical" + suffix);
this._$vScrollBar = $c.children(".ui-scrollbar-vertical");
$c.append(prefix + "y" + suffix);
this._$vScrollBar = $c.children(".ui-scrollbar-y");
}
if (this._hTracker)
{
$c.append(prefix + "horizontal" + suffix);
this._$hScrollBar = $c.children(".ui-scrollbar-horizontal");
$c.append(prefix + "x" + suffix);
this._$hScrollBar = $c.children(".ui-scrollbar-x");
}
}
}
@ -629,7 +667,7 @@ $.extend(MomentumTracker.prototype, {
jQuery.widget( "mobile.scrolllistview", jQuery.mobile.scrollview, {
options: {
direction: "vertical"
direction: "y"
},
_create: function() {

202
experiments/scrollview/scrollview-direction.html
View file

@ -62,16 +62,6 @@
<script src="jquery.mobile.scrollview.js"></script>
<script src="scrollview.js"></script>
<script type="text/javascript" src="../../docs/lists/docs/docs.js"></script>
<script type="text/javascript">
$("[data-role=page]").live("pageshow", function(event) {
var $page = $(event.target);
$page.find(".ui-scrollview:not(.ui-scrollview-clip)").scrollview();
$page.find(".ui-scrollview-horizontal:not(.ui-scrollview-clip)").scrollview({ direction: "horizontal" });
$page.find(".ui-scrollview-vertical:not(.ui-scrollview-clip)").scrollview({ direction: "vertical" });
});
</script>
</head>
<body>
@ -84,7 +74,7 @@ $("[data-role=page]").live("pageshow", function(event) {
<div data-role="content">
<h4>Scrollview</h4>
<p>To turn an element into a scrollview, simply add a data-scroll="true" to the element. By default, a scrollview can scroll in both the horizontal and vertical directions. If the user drags the view horizontally (left or right), or vertically (up or down), scrolling will be locked so that it only scrolls in that one dimension. If the user drags the view diagonally, he will be able to scroll in both directions at the same time.</p>
<div class="ui-scrollview threeByThree">
<div data-scroll="true" class="threeByThree">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
@ -257,8 +247,8 @@ $("[data-role=page]").live("pageshow", function(event) {
</div>
<p>When there are nested scrollviews, if the user drags in a single dimension and hits either end of the view, the drag will be propagated up to the next outer scrollview that can handle a drag in that dimension. So for example, if you drag the scrollview above so that it reaches the top of its view, the entire page will start to scroll upward if you continue dragging. This is because the drag was propagated from the scrollview with the letters in it, out to the scrollview containing the entire content for the page.</p>
<h4>Horizontal Scrollview</h4>
<p>A scrollview can be set up so that it only scrolls in the horizontal direction. Simply place a data-scroll=&quot;horizontal&quot; on the element you want to scroll:</p>
<div class="ui-scrollview-horizontal threeByThree">
<p>A scrollview can be set up so that it only scrolls in the horizontal direction. Simply place a data-scroll=&quot;x&quot; on the element you want to scroll:</p>
<div data-scroll="x" class="threeByThree">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
@ -430,8 +420,8 @@ $("[data-role=page]").live("pageshow", function(event) {
<div class="square">y</div>
</div>
<h4>Vertical Scrollview</h4>
<p>A scrollview can be set up so that it only scrolls in the vertical direction. Simply place a data-scroll=&quot;vertical&quot; on the element you want to scroll:</p>
<div class="ui-scrollview-vertical threeByThree">
<p>A scrollview can be set up so that it only scrolls in the vertical direction. Simply place a data-scroll=&quot;y&quot; on the element you want to scroll:</p>
<div data-scroll="y" class="threeByThree">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
@ -602,6 +592,188 @@ $("[data-role=page]").live("pageshow", function(event) {
<div class="square">x</div>
<div class="square">y</div>
</div>
<h4>Scrollview Paging</h4>
<p>A scrollview can be set up so that it scrolls by pages. This feature is only enabled for horizontal or vertical scrollviews.</p>
<div id="ex4" data-scroll="true" class="threeByThree">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
<div class="square">f</div>
<div class="square">g</div>
<div class="square">h</div>
<div class="square">i</div>
<div class="square">j</div>
<div class="square">k</div>
<div class="square">l</div>
<div class="square">m</div>
<div class="square">n</div>
<div class="square">o</div>
<div class="square">p</div>
<div class="square">q</div>
<div class="square">r</div>
<div class="square">s</div>
<div class="square">t</div>
<div class="square">u</div>
<div class="square">v</div>
<div class="square">w</div>
<div class="square">x</div>
<div class="square">y</div>
<div class="square">z</div>
<div class="square">0</div>
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
<div class="square">f</div>
<div class="square">g</div>
<div class="square">h</div>
<div class="square">i</div>
<div class="square">j</div>
<div class="square">k</div>
<div class="square">l</div>
<div class="square">m</div>
<div class="square">n</div>
<div class="square">o</div>
<div class="square">p</div>
<div class="square">q</div>
<div class="square">r</div>
<div class="square">s</div>
<div class="square">t</div>
<div class="square">u</div>
<div class="square">v</div>
<div class="square">w</div>
<div class="square">x</div>
<div class="square">y</div>
<div class="square">z</div>
<div class="square">0</div>
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
<div class="square">f</div>
<div class="square">g</div>
<div class="square">h</div>
<div class="square">i</div>
<div class="square">j</div>
<div class="square">k</div>
<div class="square">l</div>
<div class="square">m</div>
<div class="square">n</div>
<div class="square">o</div>
<div class="square">p</div>
<div class="square">q</div>
<div class="square">r</div>
<div class="square">s</div>
<div class="square">t</div>
<div class="square">u</div>
<div class="square">v</div>
<div class="square">w</div>
<div class="square">x</div>
<div class="square">y</div>
<div class="square">z</div>
<div class="square">0</div>
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
<div class="square">f</div>
<div class="square">g</div>
<div class="square">h</div>
<div class="square">i</div>
<div class="square">j</div>
<div class="square">k</div>
<div class="square">l</div>
<div class="square">m</div>
<div class="square">n</div>
<div class="square">o</div>
<div class="square">p</div>
<div class="square">q</div>
<div class="square">r</div>
<div class="square">s</div>
<div class="square">t</div>
<div class="square">u</div>
<div class="square">v</div>
<div class="square">w</div>
<div class="square">x</div>
<div class="square">y</div>
<div class="square">z</div>
<div class="square">0</div>
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>
<div class="square">d</div>
<div class="square">e</div>
<div class="square">f</div>
<div class="square">g</div>
<div class="square">h</div>
<div class="square">i</div>
<div class="square">j</div>
<div class="square">k</div>
<div class="square">l</div>
<div class="square">m</div>
<div class="square">n</div>
<div class="square">o</div>
<div class="square">p</div>
<div class="square">q</div>
<div class="square">r</div>
<div class="square">s</div>
<div class="square">t</div>
<div class="square">u</div>
<div class="square">v</div>
<div class="square">w</div>
<div class="square">x</div>
<div class="square">y</div>
</div>
<button type="button" onclick="doit();">Foo</button>
<script type="text/javascript">
function doit()
{
$("#ex4").scrollview("scrollTo", 300, 300, 500);
}
</script>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>

29
experiments/scrollview/scrollview-nested.html
View file

@ -86,15 +86,6 @@
<script src="jquery.mobile.scrollview.js"></script>
<script src="scrollview.js"></script>
<script type="text/javascript" src="../../docs/lists/docs/docs.js"></script>
<script type="text/javascript">
$("[data-role=page]").live("pageshow", function(event) {
var $page = $(event.target);
$page.find(".ui-scrollview-horizontal:not(.ui-scrollview-clip)").scrollview({ direction: "horizontal" });
$page.find(".ui-scrollview-vertical:not(.ui-scrollview-clip)").scrollview({ direction: "vertical" });
});
</script>
</head>
<body>
@ -107,17 +98,27 @@ $("[data-role=page]").live("pageshow", function(event) {
<div data-role="content">
<h4>Example 1</h4>
<p>In the following example the #4 is actually a vertical scrollview embedded within a horizontal scrollview.</p>
<div class="ui-scrollview-horizontal double-block-view-h">
<div data-scroll="x" class="double-block-view-h">
<div class="view">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square ui-scrollview-vertical single-block-view-v">
<div data-scroll="y" class="square single-block-view-v">
<div class="view">
<div class="square">4</div>
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
<div data-scroll="x" class="single-block-view-h">
<div class="view">
<div class="square">C</div>
<div class="square">@</div>
<div class="square">#</div>
<div class="square">$</div>
<div class="square">%</div>
<div class="square">&amp;</div>
<div class="square">*</div>
</div>
</div>
<div class="square">D</div>
<div class="square">E</div>
<div class="square">F</div>
@ -130,12 +131,12 @@ $("[data-role=page]").live("pageshow", function(event) {
</div>
<h4>Example 1</h4>
<p>In the following example the #4 is actually a nested horizontal scrollview embedded within a horizontal scrollview. The idea here is that if you drag-scroll the nested scrollview, once it reaches either end of its view, it should start scrolling the outer view.</p>
<div class="ui-scrollview-horizontal double-block-view-h">
<div data-scroll="x" class="double-block-view-h">
<div class="view">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square ui-scrollview-horizontal single-block-view-h">
<div data-scroll="x" class="square single-block-view-h">
<div class="view">
<div class="square">4</div>
<div class="square">A</div>

26
experiments/scrollview/scrollview.js
View file

@ -8,12 +8,32 @@ function ResizePageContentHeight(page)
var pb = parseFloat($content.css("padding-bottom"));
var wh = window.innerHeight;
$content.height(wh - (hh + fh) - (pt + pb));
$page.children(".ui-content:not(.ui-scrollview-clip):not(.ui-scrolllistview)").scrollview({ direction: "vertical" });
$page.children(".ui-content.ui-scrolllistview:not(.ui-scrollview-clip)").scrolllistview();
}
$("[data-role=page]").live("pageshow", function(event) {
var $page = $(this);
$page.find(".ui-content, [data-scroll]").not(".ui-scrollview-clip").each(function(){
var $this = $(this);
// XXX: Remove this check for ui-scrolllistview once we've
// integrated list divider support into the main scrollview class.
if ($this.hasClass("ui-scrolllistview"))
$this.scrolllistview();
else
{
var st = $this.data("scroll") + "";
var snap = st && st.search(/^[xy]s$/ != -1);
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
var opts = {};
if (dir)
opts.direction = dir;
if (snap)
opts.snap = "viewport";
$this.scrollview(opts);
}
});
ResizePageContentHeight(event.target);
});