Приветствую Вас Прохожий | RSS Пятница, 09.12.2016, 20:18
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 14
Гостей: 14
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты Разное

Простои и новый переключатель страниц для сайтов uCoz

Простои и новый переключатель страниц для сайтов uCoz Простои, новый, переключатель, страниц, сайтов, uCoz
Простои и новый переключатель адаптированный по все возможные браузеры страниц для сайтов uCoz с минимум графики и не нужных элементов для работы отображения и функционирования новинки на вашем ресурсе.
Скачиваем архив и заливаем 3 файла в корень вашего сайта согласно процессу установки в нужную папку, что бы ссылки в скрипте были работоспособны по отношению к вашему хосту.
Интересный подход к решению дизайнерского вопроса сведен к минимуму единственное большой вес стиля для всех браузеров которые мы в большей части не используем но на всякий случай они вложены для работы и загрузки.
В работу этого почти девайса подключена библиотека миниатюрного слайдера помогающего создать эффект не похожий на стандартный от uCoz, и попытка оторваться от общей массы с таким новшеством будет очень успешно, мы снова изменяем свой ресурс до не узнаваемости в меру предела нагрузки на страницы с переключателем страниц.
Перечень браузеров и категорий обновленных версий работающие без проблем с данной новинкой: FF3.5+, Opera 9+, Saf1+, Chrome , Chrome 10+, Saf5.1+ , Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ , Saf3-4, iOS 1-3.2, Android <1.6
Прошу заметить что для мобильной версии этот вариант работает на Android до версии 1.6 и более. В современном мире интернета мобильный интернет жестко захватывает территорию под свои технологии, потому что современный человек в большей части использует интернет в телефонах и планшетах, во всех маленьких аппаратах дающих возможность просматривать страницы вашего сайта.
По работоспособности данное решение не имеет себе равных в плане такой работы, можно конечно же изменить цветовую гамму но тут уже профессиональная работа с фотошоп, необходимо изменить зеленый цвет в любой нужный для себя, главное обесцветить картинку с кнопками и придать ей насыщенность другой палитры цветов. Можно сделать просто цвет который подойдет ко всем ресурсам это светло серый или черный с серым оттенком.
Можно произвести эксперимент и заменить круглые кнопки на квадратики с овальными квадратиками, для этого так же используем умение работы в фотошопе, и изменить в стилях стоит после размеры если вышли за рамки существующих.

УСТАНОВКА:
Примечание: Скрипты из прикреплённого архива залейте в папку js, картинку в папку images После тега </ 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>
Адаптация произведена неугомонным Apocalypse
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь. Размер: 17.4Kb
Просмотров: 3401 | Комментарии: 4 | Рейтинг: 4.2/5 | |Категория: Скрипты Разное | Добавил: мир | Дата: 05.10.2013 | Скачали: 17 | Теги: страниц, переключатель, сайтов, ucoz, новый, простои
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 4
4 frolov1028   Дата: 11.10.2013  Время: 12:46   [№ 15006]
В названии ошибка "простой" Только увидел.гы

2 frolov1028   Дата: 05.10.2013  Время: 12:20   [№ 14993]
Благодарю за отличное решение индивидуальности.

1 мир   Дата: 05.10.2013  Время: 11:55   [№ 14992]
Прошу принять во внимание статью
Всего символов: 2164

3 mdbaner   Дата: 05.10.2013  Время: 16:35   1 [№ 14994]
Принято 40 WMR


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru