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

Implemented view paging for the scrollview. This feature is only enabled for horizontal and vertical scrollviews. To use, pass "xp" or "yp" for the @data-scroll attribute.

Browse source 
Fixed a typo/bug in scrollview.js that was causing the paging bool to be set improperly.

Turned on scrollview paging in scrollview-direction.html.

Items still left to do:

- Code refactoring/cleanup.
- Modify the code so that scroll offsets are stored as positive values. This will make it easier for folks to understand.
This commit is contained in:
Kin Blas 2010-12-02 09:47:46 -08:00
parent 63627e529f
commit 33602a4dfd
3 changed files with 51 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,9 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
eventType: $.support.touch ? "touch" : "mouse",
showScrollBars: true
showScrollBars: true,
pagingEnabled: false
},
_makePositioned: function($ele)
@ -300,6 +302,18 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
this._$vScrollBar.find(".ui-scrollbar-thumb").css("height", (ch >= vh ? "100%" : Math.floor(ch/vh*100)+ "%"));
}
var svdir = this.options.direction;
this._pageDelta = 0;
this._pageSize = 0;
this._pagePos = 0;
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y"))
{
this._pageSize = svdir == "x" ? cw : ch;
this._pagePos = svdir == "x" ? this._sx : this._sy;
this._pagePos -= this._pagePos % this._pageSize;
}
this._lastMove = 0;
this._enableTracking();
@ -332,6 +346,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
var dx = ex - this._lastX;
var dy = ey - this._lastY;
var svdir = this.options.direction;
if (!this._directionLock)
{
@ -352,7 +367,6 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
dir = "x";
}
var svdir = this.options.direction;
if (svdir && dir && svdir != dir)
{
// This scrollview can't handle the direction the user
@ -427,6 +441,20 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
}
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y"))
{
if (this._doSnapBackX || this._doSnapBackY)
this._pageDelta = 0;
else
{
var opos = this._pagePos;
var cpos = svdir == "x" ? newX : newY;
var delta = svdir == "x" ? dx : dy;
this._pageDelta = (opos > cpos && delta < 0) ? this._pageSize : ((opos < cpos && delta > 0) ? -this._pageSize : 0);
}
}
this._didDrag = true;
this._lastX = ex;
this._lastY = ey;
@ -451,8 +479,20 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
var sx = (this._hTracker && this._speedX && doScroll) ? this._speedX : (this._doSnapBackX ? 1 : 0);
var sy = (this._vTracker && this._speedY && doScroll) ? this._speedY : (this._doSnapBackY ? 1 : 0);
if (sx || sy)
var svdir = this.options.direction;
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y") && !this._doSnapBackX && !this._doSnapBackY)
{
var x = this._sx;
var y = this._sy;
if (svdir == "x")
x = -this._pagePos + this._pageDelta;
else
y = -this._pagePos + this._pageDelta;
this.scrollTo(x, y, this.options.snapbackDuration);
}
else if (sx || sy)
this._startMScroll(sx, sy);
else
this._hideScrollBars();

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

@ -593,8 +593,8 @@
<div class="square">y</div>
</div>
<h4>Scrollview Paging</h4>
<p>Not implemented yet.</p><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">
<p>A scrollview can be set up so that it scrolls by pages. This feature is only enabled for horizontal or vertical scrollviews. Use data-scroll=&quot;xp&quot; or data-scroll=&quot;yp&quot; to turn on paging. The following scrollview pages horizontally.</p>
<div id="ex4" data-scroll="xp" class="threeByThree">
<div class="square">a</div>
<div class="square">b</div>
<div class="square">c</div>

9
experiments/scrollview/scrollview.js
View file

@ -12,7 +12,8 @@ function ResizePageContentHeight(page)
$("[data-role=page]").live("pageshow", function(event) {
var $page = $(this);
$page.find(".ui-content, [data-scroll]").not(".ui-scrollview-clip").each(function(){
$page.find(".ui-content").attr("data-scroll", "y");
$page.find("[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.
@ -21,14 +22,14 @@ $("[data-role=page]").live("pageshow", function(event) {
else
{
var st = $this.data("scroll") + "";
var snap = st && st.search(/^[xy]s$/ != -1);
var paging = st && st.search(/^[xy]p$/) != -1;
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
var opts = {};
if (dir)
opts.direction = dir;
if (snap)
opts.snap = "viewport";
if (paging)
opts.pagingEnabled = true;
$this.scrollview(opts);
}