Wiki source code of Pagination
Version 5.1 by Ecaterina Moraru (Valica) on 2009/03/25
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | 1 Pagination | ||
| 2 | |||
| 3 | Insert description here. | ||
| 4 | |||
| 5 | 1.1 Live example | ||
| 6 | |||
| 7 | Put the HTML needed to display a pagination here and the CSS in an SSX object attached to this page. | ||
| 8 | |||
| 9 | 1.1 Upper navigation | ||
| 10 | |||
| 11 | 1.1.1 CSS | ||
| 12 | |||
| 13 | {code} | ||
| 14 | .searchFilters{ | ||
| 15 | clear: both; | ||
| 16 | font-size: 90%; | ||
| 17 | } | ||
| 18 | #sortFilter{ | ||
| 19 | color: #aaa; | ||
| 20 | padding: 5px; | ||
| 21 | line-height: 16px; | ||
| 22 | } | ||
| 23 | #sortFilter a.sortType{ | ||
| 24 | color: #aaa; | ||
| 25 | } | ||
| 26 | #sortFilter a.sortType:hover{ | ||
| 27 | color: #4D4D4D; | ||
| 28 | } | ||
| 29 | #sortFilter a#currentSort{ | ||
| 30 | color: #4D4D4D; | ||
| 31 | font-weight: bold; | ||
| 32 | } | ||
| 33 | #sortFilter a.sortType:focus, | ||
| 34 | #sortFilter a#currentSort:focus { | ||
| 35 | outline: dotted 1px #000; | ||
| 36 | } | ||
| 37 | {code} | ||
| 38 | |||
| 39 | {code} | ||
| 40 | .paginationFilter { | ||
| 41 | color: #aaa; | ||
| 42 | height: 100%; | ||
| 43 | border-top: 1px solid #CCCCCC; | ||
| 44 | padding: 2px 0px 5px 5px; | ||
| 45 | display: block; | ||
| 46 | line-height: 22px; | ||
| 47 | } | ||
| 48 | .resultsNo{ | ||
| 49 | float: left; | ||
| 50 | } | ||
| 51 | .resultsNo .currentResultsNo, .resultsNo .totalResultsNo{ | ||
| 52 | color: #aaa; | ||
| 53 | } | ||
| 54 | .pagination{ | ||
| 55 | float: right; | ||
| 56 | margin-right: 10px; | ||
| 57 | } | ||
| 58 | .pagination a{ | ||
| 59 | color: #aaa; | ||
| 60 | } | ||
| 61 | .pagination a:hover{ | ||
| 62 | color: #4D4D4D; | ||
| 63 | } | ||
| 64 | .pagination a.currentPagination{ | ||
| 65 | color: #4D4D4D; | ||
| 66 | font-weight: bold; | ||
| 67 | } | ||
| 68 | .pagination a:focus { | ||
| 69 | outline: dotted 1px #000; | ||
| 70 | } | ||
| 71 | .controlPagination{ | ||
| 72 | position:relative; | ||
| 73 | width:42px; | ||
| 74 | height:22px; | ||
| 75 | overflow:hidden; | ||
| 76 | margin:0!important; | ||
| 77 | padding:0!important; | ||
| 78 | float: right; | ||
| 79 | } | ||
| 80 | .controlPagination a{ | ||
| 81 | position:absolute; | ||
| 82 | top:0; | ||
| 83 | left:0; | ||
| 84 | text-indent:-1000em; | ||
| 85 | line-height:25px; | ||
| 86 | outline:none; | ||
| 87 | overflow:hidden; | ||
| 88 | border:none; | ||
| 89 | } | ||
| 90 | .controlPagination a.prevPagination { | ||
| 91 | background-position:left top; | ||
| 92 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 93 | width: 21px; | ||
| 94 | height: 22px; | ||
| 95 | } | ||
| 96 | .controlPagination a.noPrevPagination{ | ||
| 97 | background-position:left bottom; | ||
| 98 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 99 | width: 21px; | ||
| 100 | height: 22px; | ||
| 101 | } | ||
| 102 | .controlPagination a.nextPagination { | ||
| 103 | background-position:right top; | ||
| 104 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 105 | width: 21px; | ||
| 106 | height: 22px; | ||
| 107 | left: 21px; | ||
| 108 | } | ||
| 109 | .controlPagination a.noNextPagination { | ||
| 110 | background-position:right bottom; | ||
| 111 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 112 | width: 21px; | ||
| 113 | height: 22px; | ||
| 114 | left: 21px; | ||
| 115 | {code} | ||
| 116 | |||
| 117 | 1.1.1 HTML Code | ||
| 118 | |||
| 119 | {code} | ||
| 120 | <div class="searchFilters"> | ||
| 121 | |||
| 122 | <div id="sortFilter"> | ||
| 123 | $msg.get("xe.search.filters.sort") | ||
| 124 | <a href="" id="currentSort" title="$msg.get('xe.search.filters.relevance.title')">$msg.get("xe.search.filters.relevance")</a> | ||
| 125 | <a href="" class="sortType" title="$msg.get('xe.search.filters.date.title')">$msg.get("xe.search.filters.date")</a> | ||
| 126 | <a href="" class="sortType" title="$msg.get('xe.search.filters.rating.title')">$msg.get("xe.search.filters.rating")</a> | ||
| 127 | <a href="" class="sortType" title="$msg.get('xe.search.filters.popularity.title')">$msg.get("xe.search.filters.popularity")</a> | ||
| 128 | </div> | ||
| 129 | |||
| 130 | <div class="paginationFilter"> | ||
| 131 | |||
| 132 | <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> | ||
| 133 | |||
| 134 | <span class="controlPagination"> | ||
| 135 | <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="prevPagination"></a> | ||
| 136 | <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="nextPagination"></a> | ||
| 137 | </span> | ||
| 138 | <span class="pagination">$msg.get("xe.search.filters.page") | ||
| 139 | <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a> | ||
| 140 | <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a> | ||
| 141 | <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a> | ||
| 142 | <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a> | ||
| 143 | <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a> | ||
| 144 | <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a> | ||
| 145 | <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a> | ||
| 146 | <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a> | ||
| 147 | <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a> | ||
| 148 | </span> | ||
| 149 | </div> | ||
| 150 | </div> | ||
| 151 | {code} | ||
| 152 | |||
| 153 | 1.1 Bottom Navigation | ||
| 154 | |||
| 155 | 1.1.1 CSS | ||
| 156 | |||
| 157 | {code} | ||
| 158 | .paginationFooter{ | ||
| 159 | display: block; | ||
| 160 | clear: both; | ||
| 161 | text-align: right; | ||
| 162 | font-size: 90%; | ||
| 163 | } | ||
| 164 | {code} | ||
| 165 | |||
| 166 | {code} | ||
| 167 | .paginationFilter { | ||
| 168 | color: #aaa; | ||
| 169 | height: 100%; | ||
| 170 | border-top: 1px solid #CCCCCC; | ||
| 171 | padding: 2px 0px 5px 5px; | ||
| 172 | display: block; | ||
| 173 | line-height: 22px; | ||
| 174 | } | ||
| 175 | .pagination{ | ||
| 176 | float: right; | ||
| 177 | margin-right: 10px; | ||
| 178 | } | ||
| 179 | .pagination a{ | ||
| 180 | color: #aaa; | ||
| 181 | } | ||
| 182 | .pagination a:hover{ | ||
| 183 | color: #4D4D4D; | ||
| 184 | } | ||
| 185 | .pagination a.currentPagination{ | ||
| 186 | color: #4D4D4D; | ||
| 187 | font-weight: bold; | ||
| 188 | } | ||
| 189 | .pagination a:focus { | ||
| 190 | outline: dotted 1px #000; | ||
| 191 | } | ||
| 192 | .controlPagination{ | ||
| 193 | position:relative; | ||
| 194 | width:42px; | ||
| 195 | height:22px; | ||
| 196 | overflow:hidden; | ||
| 197 | margin:0!important; | ||
| 198 | padding:0!important; | ||
| 199 | float: right; | ||
| 200 | } | ||
| 201 | .controlPagination a{ | ||
| 202 | position:absolute; | ||
| 203 | top:0; | ||
| 204 | left:0; | ||
| 205 | text-indent:-1000em; | ||
| 206 | line-height:25px; | ||
| 207 | outline:none; | ||
| 208 | overflow:hidden; | ||
| 209 | border:none; | ||
| 210 | } | ||
| 211 | .controlPagination a.prevPagination { | ||
| 212 | background-position:left top; | ||
| 213 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 214 | width: 21px; | ||
| 215 | height: 22px; | ||
| 216 | } | ||
| 217 | .controlPagination a.noPrevPagination{ | ||
| 218 | background-position:left bottom; | ||
| 219 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 220 | width: 21px; | ||
| 221 | height: 22px; | ||
| 222 | } | ||
| 223 | .controlPagination a.nextPagination { | ||
| 224 | background-position:right top; | ||
| 225 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 226 | width: 21px; | ||
| 227 | height: 22px; | ||
| 228 | left: 21px; | ||
| 229 | } | ||
| 230 | .controlPagination a.noNextPagination { | ||
| 231 | background-position:right bottom; | ||
| 232 | background-image:url($xwiki.getSkinFile("navigation.png")); | ||
| 233 | width: 21px; | ||
| 234 | height: 22px; | ||
| 235 | left: 21px; | ||
| 236 | {code} | ||
| 237 | |||
| 238 | 1.1.1 HTML Code | ||
| 239 | |||
| 240 | {code} | ||
| 241 | <div class="paginationFooter"> | ||
| 242 | <div class="paginationFilter"> | ||
| 243 | <span class="controlPagination"> | ||
| 244 | <a href="#" title="$msg.get('xe.search.filters.page.prev.title')" class="noPrevPagination"></a> | ||
| 245 | <a href="#" title="$msg.get('xe.search.filters.page.next.title')" class="noNextPagination"></a> | ||
| 246 | </span> | ||
| 247 | <span class="pagination"> | ||
| 248 | $msg.get("xe.search.filters.page") | ||
| 249 | <a href="" title="$msg.get('xe.search.filters.page.title',['1'])">1</a> | ||
| 250 | <a href="" class="currentPagination" title="$msg.get('xe.search.filters.page.title',['2'])">2</a> | ||
| 251 | <a href="" title="$msg.get('xe.search.filters.page.title',['3'])">3</a> | ||
| 252 | <a href="" title="$msg.get('xe.search.filters.page.title',['4'])">4</a> | ||
| 253 | <a href="" title="$msg.get('xe.search.filters.page.title',['5'])">5</a> | ||
| 254 | <a href="" title="$msg.get('xe.search.filters.page.title',['6'])">6</a> | ||
| 255 | <a href="" title="$msg.get('xe.search.filters.page.title',['7'])">7</a> | ||
| 256 | <a href="" title="$msg.get('xe.search.filters.page.title',['8'])">8</a> | ||
| 257 | <a href="" title="$msg.get('xe.search.filters.page.title',['9'])">9</a> | ||
| 258 | </span> | ||
| 259 | </div> | ||
| 260 | </div> | ||
| 261 | {code} | ||
| 262 | |||
| 263 | 1.1 Details | ||
| 264 | |||
| 265 | Add additional details here. |
