{{indexmenu_n>0140}}
====== Пагинация ======

Вид блока может меняться взависимости от дизайна, но основные блоки должены сохраняться \\
Вот несколько видов: \\

{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_0.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_1.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_2.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_3.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_4.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_5.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_6.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_7.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_8.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_9.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_10.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_11.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_12.png?direct&200|}}
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_13.png?direct&200|}}

Вид блока в примере верстки \\
{{:dev:tpl:pravila_verstki_besplatnyh_shablonov:pagination_0.png?direct&200|}} \\

\\

<button type="primary" collapse="paginationHtml">Посмотреть код html</button>
<collapse id="paginationHtml" collapsed="true">
<code html>
<div class="el_pagination_xxxxxx">
	<div class="wrapperInner">
		<ul>
			<li><span class="active"><i class="fa fa-angle-left"></i></span></li>
			<li><span class="active">1</span></li>
			<li><a href="/catalogs/?pageNumber=2&orderType=1&b=&p=">2</a></li>
			<li><a href="/catalogs/?pageNumber=3&orderType=1&b=&p=">3</a></li>
			<li><a href="/catalogs/?pageNumber=4&orderType=1&b=&p=">4</a></li>
			<li><a href="/catalogs/?pageNumber=5&orderType=1&b=&p=">5</a></li>
			...
			<li><a href="/catalogs/?pageNumber=n&orderType=1&b=&p=">n</a></li>
			<li><a href="/catalogs/?pageNumber=2&orderType=1&b=&p=" class="next"><i class="fa fa-angle-right"></i></a></li>
		</ul>
	</div>
</div>
</code>
</collapse>

<button type="info" collapse="paginationCSS">Посмотреть код css</button>
<collapse id="paginationCSS" collapsed="true">
<code css>
.el_pagination_xxxxxx
{
}
.el_pagination_xxxxxx .wrapperInner
{
}
.el_pagination_xxxxxx .wrapperInner ul
{
	display: block;
	width: 100%;
	text-align: center;
}
.el_pagination_xxxxxx .wrapperInner ul li
{
	display: inline-block;
	margin: 5px;
}
.el_pagination_xxxxxx .wrapperInner ul li a,
.el_pagination_xxxxxx .wrapperInner ul li span
{
	display: inline-block;
	border: 1px solid #2091C9;
	background-color: #FFFFFF;
	border-radius: 3px;
	padding: 0px 5px;
	min-width: 30px;
	line-height: 28px;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	color: #2091C9;
}
.el_pagination_xxxxxx .wrapperInner ul li a:hover,
.el_pagination_xxxxxx .wrapperInner ul li span.active
{
	background-color: #2091C9;
	color: #FFFFFF;
}
</code>
</collapse>