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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Rendering controls into multiple containers</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/paginator/assets/skins/sam/paginator.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/paginator/paginator-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* override some skin styles */
.yui-skin-sam span.yui-pg-container {
display: inline;
}
.yui-skin-sam .yui-pg-current {
margin: 0;
}
.yui-skin-sam #demo .yui-pg-container a:link,
.yui-skin-sam #demo .yui-pg-container a:active,
.yui-skin-sam #demo .yui-pg-container a:visited,
.yui-skin-sam #demo .yui-pg-container a:hover,
.yui-skin-sam #demo .yui-pg-container span.yui-pg-previous,
.yui-skin-sam #demo .yui-pg-container span.yui-pg-next {
background: #fde;
color: #f3c;
text-decoration: none;
border: 3px solid #f9c;
padding: 0 3px;
font-size: 130%;
font-weight: bold;
}
.yui-skin-sam #demo .yui-pg-container span.yui-pg-previous,
.yui-skin-sam #demo .yui-pg-container span.yui-pg-next {
background: #eee;
color: #a6a6a6;
border: 3px double #ccc;
}
.yui-skin-sam #demo .yui-pg-container a:hover {
background: #f9c;
color: #fff;
}
/* demo specific styles */
#demo h2 {
border: none;
border-bottom: 1ex solid #aaa;
color: #333;
font-size: 1.5em;
line-height: 65%;
margin-top: 0;
}
#content {
margin: 0 0 0 4em;
padding-top: 1em;
}
#content li {
color: #f6c;
font: bold italic 200%/.5 Arial, sans-serif;
padding: 1px 0;
margin: 0;
}
#content li p {
color: #555;
font: normal 50% Arial, sans-serif;
margin: 0;
line-height: 2;
}
#p_container {
text-align: center;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Rendering controls into multiple containers</h1>
<div class="exampleIntro">
<p>In this example, we will add pagination to an ordered list. Some things to note:</p>
<ul>
<li>Pagination controls are added in a <code><span></code> as well as in a <code><p></code>.</li>
<li>All included pagination controls use inline elements, so the containers needn't be block elements.</li>
<li>A custom skin treatment has been applied.</li>
<li>State changes made to the Paginator propagate to all controls in all containers.</li>
</ul>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="demo">
<h2>1987 US Billboard Top 40!</h2>
<p>
Random content with pagination controls embedded inline.
Suspendisse vestibulum dignissim quam. Integer vel augue.
Phasellus nulla purus, interdum ac, and here they are.
<span id="span_container"></span>
and now back to random content habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.
</p>
<ol id="content" start="1">
<!-- the paginated content will go here -->
</ol>
<p id="p_container"></p>
</div>
<script type="text/javascript" src="assets/top40.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
// Place code in the YAHOO.example namespace
var Ex = YAHOO.namespace('example');
Ex.content = YAHOO.util.Dom.get('content');
Ex.handlePagination = function (state) {
// Gather the content for the requested page
var startIndex = state.recordOffset,
recs = Ex.data.top40.slice(startIndex, startIndex + state.rowsPerPage);
// Update the content UI
Ex.content.start = startIndex + 1;
Ex.content.innerHTML = '<li><p>'+recs.join('</p></li><li><p>')+'</p></li>';
// Confirm state change with the Paginator
Ex.paginator.setState(state);
};
Ex.paginator = new YAHOO.widget.Paginator({
rowsPerPage : 10,
totalRecords : Ex.data.top40.length,
containers : ['span_container','p_container'],
template : "{PreviousPageLink} {CurrentPageReport} {NextPageLink}",
previousPageLinkLabel : "<",
nextPageLinkLabel : ">",
pageReportTemplate : "{startRecord} - {endRecord} of the Top {totalRecords}"
});
Ex.paginator.subscribe('changeRequest', Ex.handlePagination);
Ex.paginator.render();
Ex.handlePagination(Ex.paginator.getState());
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
|
