Wiki source code of Pagination
Version 17.12 by Ecaterina Moraru (Valica) on 2009/04/10
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | 1 Pagination |
| 2 | |||
 |
15.1 | 3 | * [Upper Navigation > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#upperNav] |
| 4 | * [Bottom Navigation > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#bottomNav] | ||
| 5 | * [Dependencies > http://platform.xwiki.org/xwiki/bin/view/DevGuide/Pagination#dependencies] | ||
| |
1.1 | 6 | |
| |
2.1 | 7 | 1.1 Live example |
| 8 | |||
| |
10.1 | 9 | See [http://incubator.myxwiki.org/xwiki/bin/view/Main/ListWebSearch] |
| |
2.1 | 10 | |
| |
15.1 | 11 | 1.1 <span id="upperNav">Upper navigation</span> |
| |
1.1 | 12 | |
| |
17.9 | 13 | {image:Example-UpperNavigation.png|width=950} |
| |
17.2 | 14 | |
| |
3.1 | 15 | 1.1.1 CSS |
| 16 | |||
| |
7.1 | 17 | Filters CSS: |
| |
1.1 | 18 | {code} |
| |
4.1 | 19 | .searchFilters{ |
| 20 | clear: both; | ||
| 21 | font-size: 90%; | ||
| 22 | } | ||
| 23 | #sortFilter{ | ||
| |
17.10 | 24 | color: #888; |
| |
4.1 | 25 | padding: 5px; |
| 26 | line-height: 16px; | ||
| 27 | } | ||
| 28 | #sortFilter a.sortType{ | ||
| |
17.10 | 29 | color: #888; |
| |
4.1 | 30 | } |
| 31 | #sortFilter a.sortType:hover{ | ||
| 32 | color: #4D4D4D; | ||
| 33 | } | ||
| 34 | #sortFilter a#currentSort{ | ||
| 35 | color: #4D4D4D; | ||
| 36 | font-weight: bold; | ||
| 37 | } | ||
| |
5.1 | 38 | #sortFilter a.sortType:focus, |
| 39 | #sortFilter a#currentSort:focus { | ||
| |
4.1 | 40 | outline: dotted 1px #000; |
| 41 | } | ||
| |
1.1 | 42 | {code} |
| 43 | |||
| |
7.1 | 44 | Pagination with number of result pages displayed: |
| |
4.1 | 45 | {code} |
| 46 | .paginationFilter { | ||
| |
17.10 | 47 | color: #888; |
| |
4.1 | 48 | height: 100%; |
| 49 | border-top: 1px solid #CCCCCC; | ||
| 50 | padding: 2px 0px 5px 5px; | ||
| 51 | display: block; | ||
| 52 | line-height: 22px; | ||
| 53 | } | ||
| 54 | .resultsNo{ | ||
| 55 | float: left; | ||
| 56 | } | ||
| 57 | .resultsNo .currentResultsNo, .resultsNo .totalResultsNo{ | ||
| |
17.10 | 58 | color: #888; |
| |
4.1 | 59 | } |
| 60 | .pagination{ | ||
| 61 | float: right; | ||
| 62 | margin-right: 10px; | ||
| 63 | } | ||
| 64 | .pagination a{ | ||
| |
17.10 | 65 | color: #888; |
| |
4.1 | 66 | } |
| 67 | .pagination a:hover{ | ||
| 68 | color: #4D4D4D; | ||
| 69 | } | ||
| 70 | .pagination a.currentPagination{ | ||
| 71 | color: #4D4D4D; | ||
| 72 | font-weight: bold; | ||
| 73 | } | ||
| 74 | .pagination a:focus { | ||
| 75 | outline: dotted 1px #000; | ||
| 76 | } | ||
| 77 | .controlPagination{ | ||
| 78 | position:relative; | ||
| 79 | width:42px; | ||
| 80 | height:22px; | ||
| 81 | overflow:hidden; | ||
| 82 | margin:0!important; | ||
| 83 | padding:0!important; | ||
| 84 | float: right; | ||
| 85 | } | ||
| 86 | .controlPagination a{ | ||
| 87 | position:absolute; | ||
| 88 | top:0; | ||
| 89 | left:0; | ||
| 90 | line-height:25px; | ||
| 91 | outline:none; | ||
| 92 | overflow:hidden; | ||
| 93 | border:none; | ||
| 94 | } | ||
| |
17.12 | 95 | .controlPagination a.prevPagination , |
| 96 | .controlPagination a.noPrevPagination, | ||
| 97 | .controlPagination a.nextPagination, | ||
| 98 | .controlPagination a.noNextPagination { | ||
| |
4.1 | 99 | background-image:url($xwiki.getSkinFile("navigation.png")); |
| 100 | width: 21px; | ||
| 101 | height: 22px; | ||
| 102 | } | ||
| |
17.12 | 103 | .controlPagination a.prevPagination { |
| 104 | background-position:left top; | ||
| 105 | } | ||
| |
4.1 | 106 | .controlPagination a.noPrevPagination{ |
| 107 | background-position:left bottom; | ||
| 108 | } | ||
| 109 | .controlPagination a.nextPagination { | ||
| 110 | background-position:right top; | ||
| 111 | left: 21px; | ||
| 112 | } | ||
| 113 | .controlPagination a.noNextPagination { | ||
| 114 | background-position:right bottom; | ||
| 115 | left: 21px; | ||
| |
17.12 | 116 | } |
| |
4.1 | 117 | {code} |
| 118 | |||
| |
3.1 | 119 | 1.1.1 HTML Code |
| |
1.1 | 120 | |
| 121 | {code} | ||
| |
3.1 | 122 | <div class="searchFilters"> |
| |
4.1 | 123 | |
| |
3.1 | 124 | <div id="sortFilter"> |
| 125 | $msg.get("xe.search.filters.sort") | ||
| 126 | <a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a> | ||
| 127 | <a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a> | ||
| 128 | <a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a> | ||
| 129 | <a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a> | ||
| 130 | </div> | ||
| 131 | |||
| 132 | <div class="paginationFilter"> | ||
| |
4.1 | 133 | |
| 134 | <span class="resultsNo">$msg.get("xe.search.filters.results") <span class="currentResultsNo">6-30</span> $msg.get("xe.search.filters.results.of") <span class="totalResultsNo">50</span></span> | ||
| 135 | |||
| |
3.1 | 136 | <span class="controlPagination"> |
| 137 | <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="prevPagination"></a> | ||
| 138 | <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="nextPagination"></a> | ||
| 139 | </span> | ||
| 140 | <span class="pagination">$msg.get("xe.search.filters.page") | ||
| 141 | <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a> | ||
| 142 | <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a> | ||
| 143 | <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a> | ||
| 144 | <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a> | ||
| 145 | <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a> | ||
| 146 | <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a> | ||
| 147 | <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a> | ||
| 148 | <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a> | ||
| 149 | <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a> | ||
| 150 | </span> | ||
| 151 | </div> | ||
| 152 | </div> | ||
| 153 | {code} | ||
| 154 | |||
| |
15.1 | 155 | 1.1 <span id="bottomNav"> Bottom Navigation</span> |
| |
3.1 | 156 | |
| |
17.9 | 157 | {image:Example-BottomNavigation.png|width=950} |
| |
17.3 | 158 | |
| |
7.1 | 159 | This is a lighter version of the Upper Navigation, keeping only the pagination controls. |
| 160 | |||
| |
3.1 | 161 | 1.1.1 CSS |
| 162 | |||
| |
7.1 | 163 | Container: |
| |
3.1 | 164 | {code} |
| |
4.1 | 165 | .paginationFooter{ |
| 166 | display: block; | ||
| 167 | clear: both; | ||
| 168 | text-align: right; | ||
| 169 | font-size: 90%; | ||
| 170 | } | ||
| |
3.1 | 171 | {code} |
| 172 | |||
| |
17.12 | 173 | Same as in Upper navigation (don't apply if both navigations are present): |
| |
4.1 | 174 | {code} |
| 175 | .paginationFilter { | ||
| |
17.10 | 176 | color: #888; |
| |
4.1 | 177 | height: 100%; |
| 178 | border-top: 1px solid #CCCCCC; | ||
| 179 | padding: 2px 0px 5px 5px; | ||
| 180 | display: block; | ||
| 181 | line-height: 22px; | ||
| 182 | } | ||
| 183 | .pagination{ | ||
| 184 | float: right; | ||
| 185 | margin-right: 10px; | ||
| 186 | } | ||
| 187 | .pagination a{ | ||
| |
17.10 | 188 | color: #888; |
| |
4.1 | 189 | } |
| 190 | .pagination a:hover{ | ||
| 191 | color: #4D4D4D; | ||
| 192 | } | ||
| 193 | .pagination a.currentPagination{ | ||
| 194 | color: #4D4D4D; | ||
| 195 | font-weight: bold; | ||
| 196 | } | ||
| 197 | .pagination a:focus { | ||
| 198 | outline: dotted 1px #000; | ||
| 199 | } | ||
| 200 | .controlPagination{ | ||
| 201 | position:relative; | ||
| 202 | width:42px; | ||
| 203 | height:22px; | ||
| 204 | overflow:hidden; | ||
| 205 | margin:0!important; | ||
| 206 | padding:0!important; | ||
| 207 | float: right; | ||
| 208 | } | ||
| 209 | .controlPagination a{ | ||
| 210 | position:absolute; | ||
| 211 | top:0; | ||
| 212 | left:0; | ||
| 213 | line-height:25px; | ||
| 214 | outline:none; | ||
| 215 | overflow:hidden; | ||
| 216 | border:none; | ||
| 217 | } | ||
| |
17.12 | 218 | .controlPagination a.prevPagination , |
| 219 | .controlPagination a.noPrevPagination, | ||
| 220 | .controlPagination a.nextPagination, | ||
| 221 | .controlPagination a.noNextPagination { | ||
| |
4.1 | 222 | background-image:url($xwiki.getSkinFile("navigation.png")); |
| 223 | width: 21px; | ||
| 224 | height: 22px; | ||
| 225 | } | ||
| |
17.12 | 226 | .controlPagination a.prevPagination { |
| 227 | background-position:left top; | ||
| 228 | } | ||
| |
4.1 | 229 | .controlPagination a.noPrevPagination{ |
| 230 | background-position:left bottom; | ||
| 231 | } | ||
| 232 | .controlPagination a.nextPagination { | ||
| 233 | background-position:right top; | ||
| 234 | left: 21px; | ||
| 235 | } | ||
| 236 | .controlPagination a.noNextPagination { | ||
| 237 | background-position:right bottom; | ||
| 238 | left: 21px; | ||
| |
17.12 | 239 | } |
| |
4.1 | 240 | {code} |
| 241 | |||
| |
3.1 | 242 | 1.1.1 HTML Code |
| 243 | |||
| 244 | {code} | ||
| |
4.1 | 245 | <div class="paginationFooter"> |
| 246 | <div class="paginationFilter"> | ||
| 247 | <span class="controlPagination"> | ||
| 248 | <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="noPrevPagination"></a> | ||
| 249 | <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="noNextPagination"></a> | ||
| 250 | </span> | ||
| 251 | <span class="pagination"> | ||
| 252 | $msg.get("xe.search.filters.page") | ||
| 253 | <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a> | ||
| 254 | <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a> | ||
| 255 | <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a> | ||
| 256 | <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a> | ||
| 257 | <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a> | ||
| 258 | <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a> | ||
| 259 | <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a> | ||
| 260 | <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a> | ||
| 261 | <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a> | ||
| 262 | </span> | ||
| 263 | </div> | ||
| 264 | </div> | ||
| |
1.1 | 265 | {code} |
| 266 | |||
| |
15.1 | 267 | 1.1 <span id="dependencies"> Dependencies</span> |
| |
8.1 | 268 | |
| 269 | 1.1.1 Icons | ||
| 270 | |||
| |
17.4 | 271 | navigation.png |
| |
8.1 | 272 | |
| |
17.10 | 273 | {image:navigation.png} |
| |
17.4 | 274 | |
| |
8.1 | 275 | 1.1.1 Translations |
| 276 | |||
| 277 | 1.1.1.1 Sort Translations | ||
| 278 | |||
| 279 | xe.search.filters.sort=Sort: | ||
| 280 | |||
| 281 | xe.search.filters.relevance=Relevance | ||
| 282 | |||
| 283 | xe.search.filters.relevance.title=Sort by Relevance | ||
| 284 | |||
| 285 | xe.search.filters.date=Date | ||
| 286 | |||
| 287 | xe.search.filters.date.title=Sort by Date | ||
| 288 | |||
| 289 | xe.search.filters.rating=Rating | ||
| 290 | |||
| 291 | xe.search.filters.rating.title=Sort by Rating | ||
| 292 | |||
| 293 | xe.search.filters.popularity=Popularity | ||
| 294 | |||
| 295 | xe.search.filters.popularity.title=Sort by Popularity | ||
| 296 | |||
| 297 | 1.1.1.1 Navigation Translations | ||
| 298 | |||
| 299 | xe.search.filters.results=Results | ||
| 300 | |||
| 301 | xe.search.filters.results.of=out of | ||
| 302 | |||
| 303 | xe.search.filters.page=Page | ||
| 304 | |||
| 305 | xe.search.filters.page.title=Page {0} | ||
| 306 | |||
| 307 | xe.search.filters.page.prev.title=Previous Page | ||
| 308 | |||
| 309 | xe.search.filters.page.next.title=Next Page | ||
| 310 |
