Главная » Файлы » Прочие скрипты » jQuery |
Отпадный переключатель страниц через плагин jPaginator на jQuery для uCoz
24.06.14, 16:39:36 | |
Сегодня набрёл на классный плагин, который позволяет создать очень даже неплохой переключатель старниц. При желании его можно адаптировать под любую CMS Для начала посмотрите ДЕМО Вот моё тестирование в фидле: КЛИК Установка: После /head на нужных страницах вставляйте: Код <script src="/js/jquery-ui-1.8.13.slider.min.js"></script> <script src="/js/jPaginator-min.js"></script> <script type="text/javascript"> // Initial call $(document).ready(function(){ $("#pagination").jPaginator({ nbPages:64, marginPx:5, length:8, overBtnLeft:'#over_backward', overBtnRight:'#over_forward', maxBtnLeft:'#max_backward', maxBtnRight:'#max_forward', onPageClicked: function(a,num) { $("#page").html("Page "+num); } }); }); </script> Следующий код в самый низ вашего css: Код .paginator_p { text-align:center; float:left; height:20px; cursor:pointer; color:white; background-color:#B7B7B7; list-style-type:none; } .paginator_p.over { background-color:#8B8B8B; } .paginator_p.selected { background-color:#CAFF3A; color:white; background-color:black; } .paginator_p_wrap { position:relative; overflow:hidden; float:left; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } .paginator_p_bloc { position:relative; width:3000px; } .paginator_slider { float:left; clear: left; height: 4px; top: 4px; background: white; border: solid 1px black; position:relative; } .paginator_slider .ui-slider-handle { width: 8px; height: 12px; position: absolute; top: -4px; background-color:black; } .jPaginatorOver { background-color: #BCF2D5; float: left; height: 20px; margin: 0 2px; text-align: center; width: 30px; } .jPaginatorMax { background-color: #5FAABC; cursor: pointer; float: left; height: 20px; text-align: center; width: 30px; } .paginator_p { height: 30px; width: 30px; line-height: 30px; text-align: center; font-size: 13px; font-weight: bold; color: #26430c; /*1px right and down offset, no blur and offwhite*/ text-shadow: 1px 1px 0px #5a8332; /* FF3.5+, Opera 9+, Saf1+, Chrome */ background-color: #4A821B; background-image: url('/images/sprite.png') no-repeat 0 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */ background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */ background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */ background-image: linear-gradient(top, #4a821b, #243f0d); /*border radius half the width and height of our links to create a circle*/ -moz-border-radius: 15px; /* FF1-3.6 */ -webkit-border-radius: 15px; /* Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 15px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ } /*state for selected, plus hover whilst selected. This can come before or after the general hover state due to outranking specificity*/ .paginator_p.selected, .paginator_p.selected:hover { color: #0d1804; /*1px right and down offset, no blur and pale green*/ text-shadow: 1px 1px 0px #8dc953; /* FF3.5+, Opera 9+, Saf1+, Chrome */ background-color: #589225; background-image: url('/images/sprite.png') no-repeat -80px 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#589225), to(#87D445)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #589225, #87D445); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #589225, #87D445); /* FF3.6 */ background-image: -ms-linear-gradient(top, #589225, #87D445); /* IE10 */ background-image: -o-linear-gradient(top, #589225, #87D445); /* Opera 11.10+ */ background-image: linear-gradient(top, #589225, #87D445); /*box shadow - no offset, but a blur of 2px and spread of 1px*/ /*plus an additional box-shadow to create the glow - slightly brighter than normal state*/ -moz-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* FF3.5+ */ -webkit-box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* Saf3.0+, Chrome */ box-shadow: 0 0 2px 1px #191919, inset 0 1px 0 #cff3a2; /* Opera 10.5, IE9, Chrome 10+ */ } .paginator_p:hover { color: #0d1804; /*1px right and down offset, no blur and pale green*/ text-shadow: 1px 1px 0px #8dc953; background-color: #87D445; background-image: url('/images/sprite.png') no-repeat -120px 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#87d445), to(#589225)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #87d445, #589225); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #87d445, #589225); /* FF3.6 */ background-image: -ms-linear-gradient(top, #87d445, #589225); /* IE10 */ background-image: -o-linear-gradient(top, #87d445, #589225); /* Opera 11.10+ */ background-image: linear-gradient(top, #87d445, #589225); /*box shadow - no offset, but a blur of 2px and spread of 1px*/ /*plus an additional box-shadow to create the glow - slightly brighter than normal state*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #cff3a2; /* Opera 10.5, IE9, Chrome 10+ */ } /*the slider rail*/ .paginator_slider { /*margin on the left pushes it past the nav buttons, so make the distance the total width, including margins of the nav buttons*/ margin: 20px 0 20px 80px; /*with height of 8px, plus border of 1px all round our hight totals 10px*/ height: 8px; background: #181818; border: 1px solid #393939; border-top-color: #0f0f0f; border-left-color: #0f0f0f; /*border radius for ff, safari + chrome, css3*/ /*half the total height of our element to create rounded ends*/ -moz-border-radius: 5px; /* FF1-3.6 */ -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ } /*the slider, er, knob?*/ .paginator_slider .ui-slider-handle { height: 20px; width: 20px; margin-left: -10px; /*nudges the knob left, half its width*/ /*remove outline in ff*/ outline: none; /*border radius for ff, safari + chrome, css3*/ /*half the width and height of knob to create a circle*/ -moz-border-radius: 10px; /* FF1-3.6 */ -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android <1.6 */ border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */ /*alter the positioning to bring it centred to rail*/ top: -7px; /*same styling as links*/ background-color: #4A821B; background-image: url('/images/sprite.png') no-repeat 0 0; /*image fallback for none supporting browsers*/ background-image: -webkit-gradient(linear, left top, left bottom, from(#4a821b), to(#243f0d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #4a821b, #243f0d); /* Chrome 10+, Saf5.1+ */ background-image: -moz-linear-gradient(top, #4a821b, #243f0d); /* FF3.6 */ background-image: -ms-linear-gradient(top, #4a821b, #243f0d); /* IE10 */ background-image: -o-linear-gradient(top, #4a821b, #243f0d); /* Opera 11.10+ */ background-image: linear-gradient(top, #4a821b, #243f0d); /*box shadow - no offset, but a blur of 4px and spread of 1px*/ /*plus an additional box-shadow to create the glow*/ -moz-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* FF3.5+ */ -webkit-box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Saf3.0+, Chrome */ box-shadow: 0 0 4px 1px #191919, inset 0 1px 0 #7ead42; /* Opera 10.5, IE9, Chrome 10+ */ } /*container for buttons - add some padding so we can see the drop shadow*/ .paginator_p_bloc { padding: 5px 0; } .paginator_p_wrap { margin: 0; padding: 35px 0; /*multiple background images, one for the left, one for the right*/ background: url('/images/sprite.png') left -250px no-repeat, url('/images/sprite.png') right -250px no-repeat } /*let's deal with the control buttons*/ /*general styles for controls*/ .control { float: left; width: 40px; height: 40px; margin: 35px 0 0 0; position: relative; cursor: pointer; } #max_backward { background: url('/images/sprite.png') no-repeat 0 -60px; } #over_backward { background: url('/images/sprite.png') no-repeat -40px -60px; } #over_forward { background: url('/images/sprite.png') no-repeat -80px -60px; } #max_forward { background: url('/images/sprite.png') no-repeat -120px -60px; } /*hovers*/ #max_backward:hover { background: url('/images/sprite.png') no-repeat 0 -100px; } #over_backward:hover { background: url('/images/sprite.png') no-repeat -40px -100px; } #over_forward:hover { background: url('/images/sprite.png') no-repeat -80px -100px; } #max_forward:hover { background: url('/images/sprite.png') no-repeat -120px -100px; } /*highlights*/ #over_backward:after { content:''; background: url('/images/sprite.png') -40px -140px no-repeat; display: block; height: 110px; width: 30px; /*position the highlight owing to awkward inherited floats and margins from .control*/ position: absolute; right: 0px; top: -35px; } #over_forward:after { content:''; background: url('/images/sprite.png') -80px -140px no-repeat; display: block; height: 110px; width: 30px; /*position the highlight owing to awkward inherited floats and margins from .control*/ position: absolute; left: 0px; top: -35px; } Далее в то место, где должен быть переключатель: Код <div id="pagination"> <a class="control" id="max_backward"></a> <a class="control" id="over_backward"></a> <div class='paginator_p_wrap'> <div class='paginator_p_bloc'></div> </div> <a class="control" id="over_forward"></a> <a class="control" id="max_forward"></a> <div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'> <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a> </div> </div> Скрипты из прикреплённого архива залейте в папку js, картинку в папку images Материал подготовлен Apocalypse | |
Просмотров: 682 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |