Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit f9e25ef

Browse files
author
scottjehl
committed
Merge branch 'master' of github.com:jquery/jquery-mobile
2 parents e70c7d4 + b0896e2 commit f9e25ef

File tree

6 files changed

+57
-26
lines changed

6 files changed

+57
-26
lines changed

‎docs/pages/multipage-template.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>Page Title</title>
6-
<link rel="stylesheet" href="../../themes/default" />
7-
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
8-
<script type="text/javascript" src="../../js/"></script>
9-
<script type="text/javascript" src="../docs/docs.js"></script></head>
6+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
7+
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
8+
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
109
<body>
1110

1211
<!-- Start of first page -->

‎docs/pages/page-template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<title>Page Title</title>
66
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
7-
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
7+
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
88
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
99
</head>
1010
<body>

‎experiments/scrollview/jquery.mobile.scrollview.js

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,9 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
2626

2727
eventType: $.support.touch ? "touch" : "mouse",
2828

29-
showScrollBars: true
29+
showScrollBars: true,
30+
31+
pagingEnabled: false
3032
},
3133

3234
_makePositioned: function($ele)
@@ -300,6 +302,18 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
300302
this._$vScrollBar.find(".ui-scrollbar-thumb").css("height", (ch >= vh ? "100%" : Math.floor(ch/vh*100)+ "%"));
301303
}
302304

305+
var svdir = this.options.direction;
306+
307+
this._pageDelta = 0;
308+
this._pageSize = 0;
309+
this._pagePos = 0;
310+
311+
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y"))
312+
{
313+
this._pageSize = svdir == "x" ? cw : ch;
314+
this._pagePos = svdir == "x" ? this._sx : this._sy;
315+
this._pagePos -= this._pagePos % this._pageSize;
316+
}
303317
this._lastMove = 0;
304318
this._enableTracking();
305319

@@ -332,6 +346,7 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
332346

333347
var dx = ex - this._lastX;
334348
var dy = ey - this._lastY;
349+
var svdir = this.options.direction;
335350

336351
if (!this._directionLock)
337352
{
@@ -352,7 +367,6 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
352367
dir = "x";
353368
}
354369

355-
var svdir = this.options.direction;
356370
if (svdir && dir && svdir != dir)
357371
{
358372
// This scrollview can't handle the direction the user
@@ -427,6 +441,20 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
427441

428442
}
429443

444+
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y"))
445+
{
446+
if (this._doSnapBackX || this._doSnapBackY)
447+
this._pageDelta = 0;
448+
else
449+
{
450+
var opos = this._pagePos;
451+
var cpos = svdir == "x" ? newX : newY;
452+
var delta = svdir == "x" ? dx : dy;
453+
454+
this._pageDelta = (opos > cpos && delta < 0) ? this._pageSize : ((opos < cpos && delta > 0) ? -this._pageSize : 0);
455+
}
456+
}
457+
430458
this._didDrag = true;
431459
this._lastX = ex;
432460
this._lastY = ey;
@@ -451,8 +479,20 @@ jQuery.widget( "mobile.scrollview", jQuery.mobile.widget, {
451479

452480
var sx = (this._hTracker && this._speedX && doScroll) ? this._speedX : (this._doSnapBackX ? 1 : 0);
453481
var sy = (this._vTracker && this._speedY && doScroll) ? this._speedY : (this._doSnapBackY ? 1 : 0);
454-
455-
if (sx || sy)
482+
483+
var svdir = this.options.direction;
484+
if (this.options.pagingEnabled && (svdir == "x" || svdir == "y") && !this._doSnapBackX && !this._doSnapBackY)
485+
{
486+
var x = this._sx;
487+
var y = this._sy;
488+
if (svdir == "x")
489+
x = -this._pagePos + this._pageDelta;
490+
else
491+
y = -this._pagePos + this._pageDelta;
492+
493+
this.scrollTo(x, y, this.options.snapbackDuration);
494+
}
495+
else if (sx || sy)
456496
this._startMScroll(sx, sy);
457497
else
458498
this._hideScrollBars();

‎experiments/scrollview/scrollview-direction.html

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -593,8 +593,8 @@ <h4>Vertical Scrollview</h4>
593593
<div class="square">y</div>
594594
</div>
595595
<h4>Scrollview Paging</h4>
596-
<p>A scrollview can be set up so that it scrolls by pages. This feature is only enabled for horizontal or vertical scrollviews.</p>
597-
<div id="ex4" data-scroll="true" class="threeByThree">
596+
<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>
597+
<div id="ex4" data-scroll="xp" class="threeByThree">
598598
<div class="square">a</div>
599599
<div class="square">b</div>
600600
<div class="square">c</div>
@@ -765,15 +765,6 @@ <h4>Scrollview Paging</h4>
765765
<div class="square">x</div>
766766
<div class="square">y</div>
767767
</div>
768-
<button type="button" onclick="doit();">Foo</button>
769-
<script type="text/javascript">
770-
771-
function doit()
772-
{
773-
$("#ex4").scrollview("scrollTo", 300, 300, 500);
774-
}
775-
776-
</script>
777768
<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>
778769
<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>
779770
<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>

‎experiments/scrollview/scrollview-nested.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
<div data-role="page">
9393

9494
<div data-role="header">
95-
<h1>Nested Lists</h1>
95+
<h1>Nested Scrollviews</h1>
9696
</div><!-- /header -->
9797

9898
<div data-role="content">
@@ -129,7 +129,7 @@ <h4>Example 1</h4>
129129
<div class="square">7</div>
130130
</div>
131131
</div>
132-
<h4>Example 1</h4>
132+
<h4>Example 2</h4>
133133
<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>
134134
<div data-scroll="x" class="double-block-view-h">
135135
<div class="view">

‎experiments/scrollview/scrollview.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ function ResizePageContentHeight(page)
1212

1313
$("[data-role=page]").live("pageshow", function(event) {
1414
var $page = $(this);
15-
$page.find(".ui-content, [data-scroll]").not(".ui-scrollview-clip").each(function(){
15+
$page.find(".ui-content").attr("data-scroll", "y");
16+
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function(){
1617
var $this = $(this);
1718
// XXX: Remove this check for ui-scrolllistview once we've
1819
// integrated list divider support into the main scrollview class.
@@ -21,14 +22,14 @@ $("[data-role=page]").live("pageshow", function(event) {
2122
else
2223
{
2324
var st = $this.data("scroll") + "";
24-
var snap = st && st.search(/^[xy]s$/ != -1);
25+
var paging = st && st.search(/^[xy]p$/) != -1;
2526
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
2627

2728
var opts = {};
2829
if (dir)
2930
opts.direction = dir;
30-
if (snap)
31-
opts.snap = "viewport";
31+
if (paging)
32+
opts.pagingEnabled = true;
3233

3334
$this.scrollview(opts);
3435
}

0 commit comments

Comments
 (0)