jquery-ui/grid-spf/products-scrolling.html at grid · WebsiteDeveloper/jquery-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Grid: Sorting, Paging, Filtering</title>
	<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
	<link rel="stylesheet" href="../demos/demos.css">
	<script src="../jquery-1.7.2.js"></script>
	<script src="../external/jquery.tmpl.js"></script>
	<script src="../ui/jquery.ui.core.js"></script>
	<script src="../ui/jquery.ui.widget.js"></script>
	<script src="../ui/jquery.ui.observable.js"></script>
	<script src="../ui/jquery.ui.dataview.js"></script>
	<script>
	$.widget( "products.infinite", $.ui.dataview, {
		widgetEventPrefix: "dataview",
		options: {
			paging: {
				limit: 10
			},
			source: function(request, response) {
				var products = ["Miller's Lite", "Coka Cola", "Snickers"],
					categories = ["Beer", "Softdrink", "Snacks"],
					result = [];
				for (var i = 0; i < request.paging.limit; i++) {
					result.push({
						ProductName: products[i % products.length],
						CategoryName: products[i % categories.length],
						QuantityPerUnit: 6 * request.paging.offset + i,
						UnitsInStock: 120 * request.paging.offset * i
					});
				}
				response(result);
			}
		}
	});
	$.widget( "products.listing", {
		options: {
			preloadAt: 500,
			source: null,
			template: null
		},

		_create: function() {
			this.element.addClass( "products-listing" );
			this._bind( this.options.source, {
				dataviewresponse: "refresh"
			});
			this.scrollParent = this._scrollParent();
			this._bind( this.scrollParent, {
				scroll: this._debounce( this._scroll )
			});
			this.options.source.refresh();
		},

		_scrollParent: function() {
			var element = this.element;
			while ( element[ 0 ] !== document && element.css( "overflow" ) !== "scroll" && element.css( "overflow" ) !== "auto" ) {
				element = element.parent();
			}
			return element;
		},

		_debounce: function( method ) {
			var timeout;
			return function() {
				var obj = this,
					args = arguments;
				clearTimeout( timeout );
				timeout = setTimeout( function() {
					method.apply( obj, args );
				}, 100 );
			};
		},

		_scroll: function(event) {
			var scrolled = this.scrollParent.scrollTop() + $(this.scrollParent[0] === document ? window : this.scrollParent).height();
			// TODO this doesn't work properly for anything besides document, causes too many pages to load after the second
			var endOfList = this.element.find('li:last').position().top;
			if (scrolled + this.options.preloadAt > endOfList) {
				this.options.source.page( this.options.source.page() + 1 ).refresh();
			}
		},

		refresh : function() {
			this.element.append( $.tmpl( this.options.template, this.options.source.result ) );
		}
	});
	$(function() {
		$( "#listing1" ).listing({
			source : $.products.infinite(),
			template: $( "#product-tmpl" ).template()
		});
		$( "#listing2" ).listing({
			source : $.products.infinite(),
			template: $( "#product-tmpl" ).template()
		});
	});
	</script>
	<style>
		.products-listing { list-style: none; padding-left: 0; }
		.products-listing li { margin: 0; padding: 7px; }
		.products-listing li:not(:last-child) { border-bottom: none; }
		.products-listing h3 { margin: 0; padding: 14px; }
	</style>
</head>
<body>

<script type="text/x-jquery-tmpl" id="product-tmpl">
	<li class="ui-widget-content">
		<h3 class="ui-widget-header">${ProductName}</h3>
		<h4>Category: ${CategoryName}</h3>
		<p>Quantity Per Unit: ${QuantityPerUnit}</p>
		<p>Units In Stock: ${UnitsInStock}</p>
	</li>
</script>

<h2>Products listing with scroll-based paging. Scroll down to load more items.</h2>
<div style="overflow:auto; height: 300px; width: 90%;">
	<ul id="listing1"></ul>
</div>
<ul id="listing2"></ul>


</body>
</html>