Связанные списки на jQuery

http://www.appelsiini.net/projects/chained

See standalone demo page for quick working example.

Class Based Usage
Child selects are chained to parent select. Child select options must have class names which match option values of parent select. When user selects something in parent select the options in child select are updated. Options which have matching classname with parents currently selected option will stay visible. Others are hidden.

NOTE! Class names are case sensitive. This means Audi and audi will not match.
First you must include jQuery and Chained in your code:



Then lets assume you have the following HTML code:



You can now chain the #series to #mark. There are two different ways to do it. Choose yourself if you prefer more english like or shorter version. I prefer the shorter version.

$(«#series»).chained(«#mark»); /* or $(«#series»).chainedTo(«#mark»); */

Эффект перемещения в корзину

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#basket{position:absolute;top:20px;right:30px;border:1px #000 solid;width:200px;height:200px}
#goods{position:absolute;top:600px;left:300px}
#goods div, #basket div{border:1px #000 solid;width:50px;height:50px;display:inline-block;cursor:pointer}
#goods div.el1, #basket div.el1{background:#f00}
#goods div.el2, #basket div.el2{background:#0f0}
#goods div.el3, #basket div.el3{background:#00f}
</style>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
</head>
<body>

<div id="basket">basket<br /></div>
<div id="goods">
    <div class="el1">tovar1</div>
    <div class="el2">tovar2</div>
    <div class="el3">tovar3</div>
</div>

<script type="text/javascript">
$(function(){
    $('#goods div').live('click', function(){
        var t = $(this), e = t.clone(), b = $('#basket'), o = t.position(), po = t.parent().offset(), bo = b.offset();
        e.css({top: o.top+'px', left: o.left+'px', position: 'absolute'});
        t.parent().append(e);
        e.animate({top: -po.top+bo.top+(b.height()-t.height())/2, left: -po.left+bo.left+(b.width()-t.width())/2}, 500, function(){
            $(this).css({left: 0, top: 0, position: 'static'}).appendTo(b);
        });
    });
});
</script>

</body>
</html>

Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса

Кнопка вверх для сайта Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх. Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу 🙂

Как-то изначально так сложилось, что при ведении блога я решил отказаться от постраничной разбивки комментариев к постам. Не знаю почему, может не хотел плодить лишних страниц, а может и не верил, что у меня может быть более 50 комментариев к одному посту, так или иначе, свое мнение я не изменил до сих пор – все комментарии к постам выводятся одной страницей. Однако, вот незадача, некоторые посты на моем блоге набрали уже более 500 комментариев, и это не смотря на то, что я раз в месяц их подчищаю. Короче, это была предыстория – а результат такой, что пришлось добавить на блог кнопку вверх. В результате навигация по длинным постам с комментариями значительно упростилась.

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально 🙂 Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

Установка кнопки «вверх» на любой сайт

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Умные и знающие люди (Паша ПафНутиЙ и Дима Dimox) советуют избавиться от этого шага, так как это не jQuery, а чтобы все было «по понятиям» надо поступить так, как описано в комментарии #comment-13676.

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту).

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов.

Что тут можно настроить и изменить под себя:

  • bottom:90px; – смещение блока с кнопкой относительно низа страницы;
  • width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
  • padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
  • color:white; — цвет надписи «вверх»;
  • border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

Все готово, надеюсь, ничего не забыл. Безумно просто и настолько же полезно для сайтов с очень длинными страницами.

Спасибо за внимание, друзья. Пользуйтесь скриптом, задавайте вопросы в комментариях, и пишите свои предложения и пожелания.

С уважением, Александр Алаев
Опубликовано 22 января 2013