В дефолтовых шаблонах Blogger для постраницной навигации используются ссылки "далее", "предыдущее", "главная страница" и другие. Более продвинутые юзеры блогспота ставят разные паджинаторы (наверное, все помнят виджеты Абдурахмана или как там его?).На технологии jQuery есть несколько интересных разработок, об одной из чуть ниже пойдёт разговор, а о других читайте в следующих выпусках.
Предупреждаю, что это не замена автоматической навигации, здесь ссылки расставляются вручную, и для чего эти плагины смогут пригодиться, думайте сами. Это смесь облака тегов, категорий, слайдера и перелинковщиков.
jQuery плагин - это Easy Paginate.
Подключается он с помощью скрипта, который скачиваем отсюда (или мою русифицированную версию). Кладём на свой хостинг. Подробности по установке скриптов в блоггер здесь.
Скрипт настройки для этого демо выглядит так:
<script type="text/javascript">
jQuery(function($){
$('ul#items').easyPaginate({
step:3
});
});
</script>Обратите внимание на настройки этого скрипта ↓
step
Default value: 3
Отображает кол-во страниц (которые на демо в квадратах) на экране.
delay
Default value: 100
Задержка эффекта fade для каждого элемента. В миллисекундах.
numeric
Default value: true
Показывать или нет номера навигации. Если не нужно, ставим false.
nextprev
Default value: true
Показывать элементы навигации: "предыдущие" (previous), "следующие" (next). Если не нужно, ставим false.
auto
Default value: false
Если поставить true, плагин будет автоматически пролистывать элементы.
pause
Default value: 4000
Настройка для auto: пауза между перелистыванием элементов, в миллисекундах.
clickstop
Default value: true
Настройка для auto: этот параметр позволяет остановить перелистывание щелчком мыши. Если не нужно, ставим false.
controls
Default value: 'pagination'
Как уже упоминалось, плагин генерирует упорядоченный список для навигации по "страницам". Этот параметр определяет ID (идентификатор) списка.
current
Default value: 'current'
Этот параметр определяет имя класса текущей "страницы" в цифровой навигации. Он используется для назначения класса.
Таблица стилей для этого демо:
<style>
/* content */
ul#items{
margin:0;
height:120px;
width:auto;
overflow:hidden;
}
ul#items li{
list-style:none;
float:left;
width:200px;
height:120px;
overflow:hidden;
margin:0 0 0 1px;
background:#f3f3f3;
color:#fff;
text-align:center;
}
ol#pagination{overflow:hidden;}
ol#pagination li{
float:left;
list-style:none;
cursor:pointer;
margin:0 0 0 .5em;
}
ol#pagination li.current{color:#f00;font-weight:bold;}
/* // content */
</style>В ней вы можете подстроить внешний вид "квадратов" (или убрать их совсем) и маленького навигатора (под ними).Htm код для установки в блог очень простой, имеет вид:
<ul id="items"> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> <li>Page 4</li> <li>Page 5</li> <li>Page 6</li> <li>Page 7</li> <li>Page 8</li> <li>Page 9</li> <li>Page 10</li> <li>Page 11</li> <li>Page 12</li> <li>Page 13</li> <li>Page 14</li> </ul>
Если установить изображения с ссылкой, как у меня: вставьте в редакторе сообщений (в Blogger) картинки (одного размера), привяжите к ним ссылку на нужные страницы, перейдите в html режим и уберите все теги <div></div>.
Вот образец с моими ссылками из демо:
Демонстрацию более продвинутого использования этого плагина можно посмотреть на моём тестовом блоге.
Я специально не стал здесь делать второе демо, чтобы не перегружать страницу.
Прилагаю коды для вставки (к верхнему демо они не относятся!)
Настройка плагина:
<script type="text/javascript">
jQuery(function($){
$('ul#items').easyPaginate({
step:3
});
});
</script>Css:
<style>
/* HTML elements */
p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
ul, ol, dl{padding:0;}
ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;}
blockquote, dd{padding:0 0 0 2em;}
pre, code, samp, kbd, var{font:100% mono-space,monospace;}
pre{overflow:auto;}
abbr, acronym{
text-transform:uppercase;
border-bottom:1px dotted #000;
letter-spacing:1px;
}
abbr[title], acronym[title]{cursor:help;}
small{font-size:.9em;}
sup, sub{font-size:.8em;}
em, cite, q{font-style:italic;}
img{border:none;}
hr{display:none;}
table{width:100%;border-collapse:collapse;}
th,caption{text-align:left;}
form div{margin:.5em 0;clear:both;}
label{display:block;}
fieldset{margin:0;padding:0;border:none;}
legend{font-weight:bold;}
input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
/* // HTML elements */
/* base */
body, table, input, textarea, select, li, button{
font:1em Helvetica, Arial, Sans-Serif;
line-height:1.5em;
color:#333;
}
body{
font-size:12px;
background:#fff;
margin:0;
padding:20px;
}
a, a:visited{
text-decoration:none;
color:#06C;
}
a:hover{color:#999;}
/* base */
/* content */
#container{
margin:0 auto;
width:818px;
text-align:left;
position:relative;
padding:2em 0;
}
ul#items{
margin:1em 0;
width:auto;
height:245px;
overflow:hidden;
}
ul#items li{
list-style:none;
float:left;
height:240px;
overflow:hidden;
margin:0 4px;
background:#DBDAE0;
color:#fff;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 1px #777;
-webkit-box-shadow:0 1px 1px #777;
box-shadow:0 1px 1px #777;
color:#555;
}
ul#items li:hover{color:#333;}
ul#items li .image{
margin:20px 20px 10px 20px;
width:220px;
height:150px;
overflow:hidden;
border:2px solid #fff;
-moz-box-shadow:0 1px 1px #bbb;
-webkit-box-shadow:0 1px 1px #bbb;
box-shadow:0 1px 1px #bbb;
}
ul#items h3{text-transform:uppercase;font-size:14px;font-weight:bold;margin:.25em 0;text-shadow:#f1f1f1 0 1px 0;}
ul#items .info{color:#999;text-shadow:#f1f1f1 0 1px 0;}
ol#pagination{position:relative;text-align:center;}
ol#pagination li{
display:inline-block;
width:16px;
height:16px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxKPXKEoP6X9SYjpVa0nO9PwN7k8XPawGJK04GgqnB86N6d0NVtixlamhXmgq5b8FGT4vgMEcDLrYzWhnjq9t4qbXFrUphbfTfhnRw-YTRY3w0zc1N7Dv3r6rp1SlO-IUYrN42ZtziqQ/s1600/bg_buttons.png) no-repeat 0 0;
text-align:left;
text-indent:-8000px;
list-style:none;
cursor:pointer;
margin:0 2px;
}
ol#pagination li:hover{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxKPXKEoP6X9SYjpVa0nO9PwN7k8XPawGJK04GgqnB86N6d0NVtixlamhXmgq5b8FGT4vgMEcDLrYzWhnjq9t4qbXFrUphbfTfhnRw-YTRY3w0zc1N7Dv3r6rp1SlO-IUYrN42ZtziqQ/s1600/bg_buttons.png) no-repeat 0 -16px;}
ol#pagination li.current{color:#f00;font-weight:bold;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxKPXKEoP6X9SYjpVa0nO9PwN7k8XPawGJK04GgqnB86N6d0NVtixlamhXmgq5b8FGT4vgMEcDLrYzWhnjq9t4qbXFrUphbfTfhnRw-YTRY3w0zc1N7Dv3r6rp1SlO-IUYrN42ZtziqQ/s1600/bg_buttons.png) no-repeat 0 -32px;}
ol#pagination li.prev, ol#pagination li.next{
position:absolute;
top:-150px;
}
ol#pagination li.prev{left:-30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxKPXKEoP6X9SYjpVa0nO9PwN7k8XPawGJK04GgqnB86N6d0NVtixlamhXmgq5b8FGT4vgMEcDLrYzWhnjq9t4qbXFrUphbfTfhnRw-YTRY3w0zc1N7Dv3r6rp1SlO-IUYrN42ZtziqQ/s1600/bg_buttons.png) no-repeat 0 -64px;}
ol#pagination li.next{right:-30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmxKPXKEoP6X9SYjpVa0nO9PwN7k8XPawGJK04GgqnB86N6d0NVtixlamhXmgq5b8FGT4vgMEcDLrYzWhnjq9t4qbXFrUphbfTfhnRw-YTRY3w0zc1N7Dv3r6rp1SlO-IUYrN42ZtziqQ/s1600/bg_buttons.png) no-repeat 0 -48px;}
/* // content */
</style>Картинки должны быть размером 220x115 , а не как у меня :). Небольшая доработка стилей не только приветствуется, но и обязательна.Html:
Ссылки на картинки заменены на #
Да, разработчик и его страница тут.
Комментариев нет:
Отправить комментарий