Простые вопросы и простые решения

skad0

Атом-мозг
Юзер
841
Репутация:10
Предупреждения: 0
Регистрация:
2 Окт 2010

Отправлено: 18 Окт 2011#1

Рассмотрим тут простейшие вопросы и их решения:
В: Как сделать спойлер?
О:
Используем библиотеку jQuery.

html:

Code:

JS:

Code:

$(".spofn").click(function () {
    $(this).next("div.hided").toggle();
        if (this.value == 'Показать')
            this.value='Скрыть';
        else
            this.value='Показать';
    });

Style:

Code:

div.hided {display: none;}

=======================================================
В: Как сделать передвигаемое окно?
О:

Используем библиотеку jQuery и jqueryUI

html:

Code:

<div id="draggable"><p>Передвинь меня</p></div>

JS:

Code:

$("#draggable").draggable();

Теперь наш div#draggable Можно перемещать по странице.
Есть возможность ограничить область перемещения и указать handler (элемент при нажатии на который можно будет перемещать Div). Делается это так:

containment - ограничивает область перетаскивания. Возможные значения: parent (родительский элемент), document (текущий документ), window (окно), [x1, y1, x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области.

axis - ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат.

handle - определяет, за какой элемент внутри данного осуществляется
перетаскивание.

revert - определяет, будет ли элемент возвращен на свое место после перетаскивания (true - да).
Пример блока, который перетягивают за 'p', он перетягивается только по области документа, и по горизонтали, а так же возвращается на место.

Code:

$("#draggable").draggable(
   handle: 'p',
   containment: 'document',
   axis: 'x',
   revert: true
);

Полный список возможностей тут

=======================================================
В: Как сделать кнопку "Наверх"?
О:

Используем библиотеку jQuery

html:

Code:

<a id="move_up" href="#">Наверх</a>

CSS:

Code:

a#move_up {
   position: fixed;
   top: 10px;
   display: none;
   width: 90px;
   height: 21px;
   text-align: center;
   font: 12px Verdana;
   text-decoration: none;
   color: #2b587a;
   background: #e1e7ed;
   padding-top:5px;
   opacity:0.9;
   filter: alpha(opacity=90);
}
a#move_up:hover {
   color: #fff;
   background: #597da3;
}

js:

Code:

$(window).scroll(function () {
        if ($(this).scrollTop() > 100) $('a#move_up').fadeIn();
        else                           $('a#move_up').fadeOut(400);
    });
    $('a#move_up').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

Урок предоставлен (с) Shublog.ru

=======================================================
В: Как сделать чтобы при прокрутке появлялось окошко с информацией?
О:
Используем тот же принцип, что и в последнем уроке

js:

Code:

$(window).scroll(function () {
        if ($(this).scrollTop() > 100) $('#info').fadeIn();
        else                           $('#info').fadeOut(400);
    });

html:

Code:

<div id="info">Моя информация</div>

=======================================================

Отредактировано автором 15 Мар 2012

Вернуться к началу Профиль site Цитировать

BAH0

Атом-фан
Пользователь
544
Репутация:26
Предупреждения: 0
Регистрация:
7 Июн 2011

Отправлено: 19 Окт 2011#2

skad0 пишет:

Рассмотрим тут простейшие вопросы и их решения:
В: Как сделать спойлер?
О:
Используем библиотеку jQuery.
html:
Code:
<input type="button" class="spofn" value="Показать">
<div class="hided"></div>
JS:
Code:
    $(".spofn").click(function () {
    $(this).next("div.hided").toggle();
        if (this.value == 'Показать')
            this.value='Скрыть';
        else
            this.value='Показать';
    });
Style:
Code:
div.hided {display: none;}

эт куда такое?

Вернуться к началу Профиль site Цитировать

Сашка_из_Шебекино

Заклинатель Атома
Пользователь
1803
Репутация:87
Предупреждения: 0
Регистрация:
27 Мар 2011

Отправлено: 19 Окт 2011#3

BAH0, для разработчиков

Atom-M CMS - открытый форк AtomX

Вернуться к началу Профиль site Цитировать

Drunya

Man of God
Админ
3527
Репутация:110
Предупреждения: 0
Регистрация:
30 Ноя -0001

Отправлено: 19 Окт 2011#4

Ты бы показал еще как делать всякие всплывающие окна или сворачиваемые на javascript. Еще можно показать как сделать перетаскиваемые окна на js. Ну и в таком духе)

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Вернуться к началу Профиль site Цитировать

skad0

Атом-мозг
Юзер
841
Репутация:10
Предупреждения: 0
Регистрация:
2 Окт 2010

Отправлено: 19 Окт 2011#5

Цитата

Ты бы показал еще как делать всякие всплывающие окна или сворачиваемые на javascript. Еще можно показать как сделать перетаскиваемые окна на js. Ну и в таком духе)

Ща добавлю. Я периодически будут обновлять

Вернуться к началу Профиль site Цитировать

Drunya

Man of God
Админ
3527
Репутация:110
Предупреждения: 0
Регистрация:
30 Ноя -0001

Отправлено: 21 Окт 2011#6

О, ты в шапку добавляешь, а я тут жду))) Сенк за такие вот мануальчики. Новичкам очень полезно.

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Вернуться к началу Профиль site Цитировать

skad0

Атом-мозг
Юзер
841
Репутация:10
Предупреждения: 0
Регистрация:
2 Окт 2010

Отправлено: 21 Окт 2011#7

Цитата

О, ты в шапку добавляешь, а я тут жду))) Сенк за такие вот мануальчики. Новичкам очень полезно.

лучше в шапку, легче потом то или иное искать

Добавлено2011.10.21 20-45

Кстати spoiler Не плохо было бы и на этот форум вставить)

Вернуться к началу Профиль site Цитировать

LIFE-STALKER

Истенный Атомовод
Юзер
363
Репутация:6
Предупреждения: 0
Регистрация:
25 Июн 2011

Отправлено: 21 Окт 2011#8

Хотелось бы увидеть,как сделать что то типо ajax которое при прокрутке страницы вниз появлялось в верхнем правом углу.

CMS Fapos

Вернуться к началу Профиль site Цитировать

Drunya

Man of God
Админ
3527
Репутация:110
Предупреждения: 0
Регистрация:
30 Ноя -0001

Отправлено: 22 Окт 2011#9

Скад, тыо чем? Спойлер и так везде работает))) [*spoiler]

Добавлено2011.10.22 04-28

понял - торможу)))

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

Вернуться к началу Профиль site Цитировать

skad0

Атом-мозг
Юзер
841
Репутация:10
Предупреждения: 0
Регистрация:
2 Окт 2010

Отправлено: 26 Окт 2011#10

Цитата

Хотелось бы увидеть,как сделать что то типо ajax которое при прокрутке страницы вниз появлялось в верхнем правом углу.

чо чо?
Если ты про кнопку "наверх" то уже добавил

Отредактировано автором 26 Окт 2011

Вернуться к началу Профиль site Цитировать