Ответить
эт куда такое?
Ща добавлю. Я периодически будут обновлять
лучше в шапку, легче потом то или иное искать
Добавлено2011.10.21 20-45
Кстати spoiler Не плохо было бы и на этот форум вставить)
чо чо?
Если ты про кнопку "наверх" то уже добавил
1 2
Простые вопросы и простые решения
Отправлено: 18 Окт 2011#1
Рассмотрим тут простейшие вопросы и их решения:
В: Как сделать спойлер?
О:
Используем библиотеку jQuery.
html:
JS:
Style:
=======================================================
В: Как сделать передвигаемое окно?
О:
Используем библиотеку jQuery и
html:
JS:
Теперь наш div#draggable Можно перемещать по странице.
Есть возможность ограничить область перемещения и указать handler (элемент при нажатии на который можно будет перемещать Div). Делается это так:
containment - ограничивает область перетаскивания. Возможные значения: parent (родительский элемент), document (текущий документ), window (окно), [x1, y1, x2, y2] - координаты левого верхнего и правого нижнего угла допустимой области.
axis - ограничивает перетаскивание элемента либо по горизонтали (x) либо по вертикали (y) оси координат.
handle - определяет, за какой элемент внутри данного осуществляется
перетаскивание.
revert - определяет, будет ли элемент возвращен на свое место после перетаскивания (true - да).
Пример блока, который перетягивают за 'p', он перетягивается только по области документа, и по горизонтали, а так же возвращается на место.
Полный список возможностей
=======================================================
В: Как сделать кнопку "Наверх"?
О:
Используем библиотеку jQuery
html:
CSS:
js:
Урок предоставлен (с) Shublog.ru
=======================================================
В: Как сделать чтобы при прокрутке появлялось окошко с информацией?
О:
Используем тот же принцип, что и в последнем уроке
js:
html:
=======================================================
В: Как сделать спойлер?
О:
Используем библиотеку jQuery.
html:
Code:
<input type="button" class="spofn" value="Показать">
<div class="hided"></div>
<div class="hided"></div>
Code:
$(".spofn").click(function () {
$(this).next("div.hided").toggle();
if (this.value == 'Показать')
this.value='Скрыть';
else
this.value='Показать';
});
$(this).next("div.hided").toggle();
if (this.value == 'Показать')
this.value='Скрыть';
else
this.value='Показать';
});
Code:
div.hided {display: none;}
В: Как сделать передвигаемое окно?
О:
Используем библиотеку jQuery и
html:
Code:
<div id="draggable"><p>Передвинь меня</p></div>
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
);
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;
}
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;
});
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);
});
if ($(this).scrollTop() > 100) $('#info').fadeIn();
else $('#info').fadeOut(400);
});
html:
Code:
<div id="info">Моя информация</div>
Отредактировано автором 15 Мар 2012
Отправлено: 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;}
В: Как сделать спойлер?
О:
Используем библиотеку 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;}
Отправлено: 19 Окт 2011#4
Ты бы показал еще как делать всякие всплывающие окна или сворачиваемые на javascript. Еще можно показать как сделать перетаскиваемые окна на js. Ну и в таком духе)
Я горжусь тем, что создал . И люблю нашу команду)
Отправлено: 19 Окт 2011#5
Цитата
Ты бы показал еще как делать всякие всплывающие окна или сворачиваемые на javascript. Еще можно показать как сделать перетаскиваемые окна на js. Ну и в таком духе)
Ща добавлю. Я периодически будут обновлять
Отправлено: 21 Окт 2011#6
О, ты в шапку добавляешь, а я тут жду))) Сенк за такие вот мануальчики. Новичкам очень полезно.
Я горжусь тем, что создал . И люблю нашу команду)
Отправлено: 21 Окт 2011#7
Цитата
О, ты в шапку добавляешь, а я тут жду))) Сенк за такие вот мануальчики. Новичкам очень полезно.
лучше в шапку, легче потом то или иное искать
Добавлено2011.10.21 20-45
Кстати spoiler Не плохо было бы и на этот форум вставить)
Отправлено: 21 Окт 2011#8
Хотелось бы увидеть,как сделать что то типо ajax которое при прокрутке страницы вниз появлялось в верхнем правом углу.
Отправлено: 22 Окт 2011#9
Скад, тыо чем? Спойлер и так везде работает))) [*spoiler]
Добавлено2011.10.22 04-28
понял - торможу)))
Добавлено2011.10.22 04-28
понял - торможу)))
Я горжусь тем, что создал . И люблю нашу команду)
Отправлено: 26 Окт 2011#10
Цитата
Хотелось бы увидеть,как сделать что то типо ajax которое при прокрутке страницы вниз появлялось в верхнем правом углу.
чо чо?
Если ты про кнопку "наверх" то уже добавил
Отредактировано автором 26 Окт 2011
1 2
Зарегистрируйтесь или авторизуйтесь что бы писать
Сейчас online: 3. Зарегистрированных: 0. Гостей: 3.