Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Голосование

    Какую CMS Вы предпочитаете

    AtomX
    Fapos CMS
    Drunya CMS
Последние комментарии
Автор: чайник, в новости:

Что такое API и для чего они нужны

Автор: HIshnik, в новости:

Классы в PHP для чайников

Автор: Аноним, в новости:

Написание простого вируса в блокноте

Автор: stream, в новости:

Создаем BB коды на PHP

Топ пользователей
Drunya
Репутация: 108
Сообщений: 3527
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1858
BAH0
Репутация: 26
Сообщений: 544
Материалов в категории:6
1
Думаю, все согласятся, что когда на сайте присутствует анимация, выглядит это сосем иначе, чем резкая смена чего либо. На пример, плавно появляющийся блок или плавное изменение размера контейнера. Анимация создает привлекательные эффекты. По этому, я решил написать немного об этом. Конечно же, анимацию можно делать, используя только стандартные средства JavaScript. Но горазда приятнее и проще делать это, используя фреймворк JQuery. Так что в своих примерах я буду использовать эту библиотеку(или фреймворк, кому как удобнее).

Пример самой простой анимации можно выразить так:
1
$('#test').slideDown();

Этот пример демонстрирует плавное "расширение" блока с ID = test. Так же в функции slideDown() можно использовать параметр "скорость"(slow, normal, fast).
1
$('#test').slideDown('fast');

Ну, а чтобы вернуть элемент в первоначальное положение, мы используем функцию slideUp() - противоположность slideDown().
1
$('#test').slideUp('fast');


Кроме
Автор: Drunya Раздел: JavaScript Добавлено: 31 Янв 2012
Sortable - это плагин к JQuery позволяющий сортировать элементы в режиме реального времени, просто перетягивая их мышкой. Данный плагин имеет богатый функционал и я решил сделать подробный ман по его настройке и использованию, так как сам недавно столкнулся с ним и осознал всю его полезность.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Sortable и видим, что вместе с ним отметились чекбоксы UI Core и Draggable. Работа плагина Sortable зависит от них, поэтому они необходимы.
Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив.

Сначала в разделе HEAD подключаем несколько файлов, которые есть в архиве:
[js]
<link type="text/css" href="css/sunny/jq
Автор: Drunya Раздел: JavaScript Добавлено: 20 Июл 2011
Выбор элементов по Id либо ClassName аналогично используемому в CSS
1
2
3
4
$('#sidebar');    // выбор элемента с id = sidebar
    $('.post');       // выбор элементов с class = post
    $('div#sidebar'); // выбор элемента div с id = sidebar
    $('div.post');    // выбор элементов div с class = post
Примечание: используйте валидные имена классов и id




Бродим по иерархии объектов в DOM'е


Простой выбор потомков:
1
$('div span');            // выбор всех span элементов в элементах div

Аналогичный результат так же можно получить используя следующую конструкцию:
1
$('div').find('span');    // выбор всех span элементов в элементах div

Выбор только непосредственных потомков
1
$('div > span');          // выбор всех span элементов в элементах div, где span является прямым потомком div'a

Как же лучше поступить, что ра
Автор: Drunya Раздел: JavaScript Добавлено: 20 Июл 2011
И так, по просьбам некоторых пользователей, я наконец, дошел до написания этого мануала по AJAX. Мануалом это назвать вряд ли можно будет, но за то вы поймете как совершать асинхронные запросы при помощи технологии AJAX и как оживить свои странички и добавить им интерактивности. И самое приятное в этом то, что это почти ничего не стоит. Всего пара строк кода)



Для начала, разберемся что такое AJAX?


AJAX - это технология, позволяющая совершать асинхронные запросы к базе данных, например MySQL. То есть вы можете получить данные без перезагрузки страницы. А так же отобразить загрузки статусбаром(вращающейся картинкой или чем то подобным).




Как воспользоваться прелестями AJAX если я ничего об этом не знаю?


Очень просто. По сути все что нам для этого надо, это основной скрипт - наша страничка, которую мы будем показывать пользователю, и небольшой вспомогательный скрипт, который будет отдавать нам нужн
Автор: Drunya Раздел: JavaScript Добавлено: 13 Июл 2011
Думаю я буду прав, если скажу, что AJAX - это камень преткновения многих программистов. Например, у меня с ним знакомство пошло как то туго и у многих моих коллег тоже. Но это по тому что я редко им занимался, да и желанием вникнуть в него на 100% никогда не горел. А на самом деле в AJAX и асинхронных запросах к базе данных нет ничего сложного. Особенно если использовать библиотеки вроде JQuery или Prototype. В своих примерах я буду использовать JQuery. Так, что советую сразу скачать эту библиотеку или как ее еще называют - фреймворк.

В этой статье я расскажу как сделать асинхронный запрос к базе. Это позволяет получать или обрабатывать информацию без перезагрузки всей страницы. Мы можем обновить содержимое так как нам это надо. Например, только содержимое одного divа. Поехали..
Создаем два файла. Один это наша страница, а ко второму мы будем обращаться через методы JQuery.

файл index.html - страница
1
2
3
<html>
<head>
<title>Тестовая страница - учимся использовать AJAX</
Автор: Drunya Раздел: JavaScript Добавлено: 23 Мая 2011
Немного раскажу о том как отжеч плавно появляющиеся объекты на JavaScript. В жабаскрипте есть пара функций для поочередного вызова других функций через какой-то промежутовремени. Как бы в цикле. Эти функции setTimeLimit() и setTimeоut().

вот пример функции. Сейчас я объясню что сдесь к чему. И как она анимирует элементы.

[js]
//стартовые значения задержки между периодами и количеством периодов
var wRight = 0;
var wLeft = 0;
var wStep = 10;
var winTimeout = 50;
//var wObj = document.getElementById('test');
//тут перебираем нужный элемент и меняем ему постепено значение прозрачности
function wiOpen(pref) {
prefix = pref;
var wObj = document.getElementById(pref + '_dWin');
wObj.style.display = 'block';
if (wStep > 9) {
if (pref == 'sec') document.getElementById('cat_dWin').style.display = 'none';
else document.getElementById('sec_dWin').style.display = 'none';
}
if (wStep > 0) {
wStep--;
wLeft += 0.1;

wObj.style.opacity = wLeft;
Автор: Obmer Раздел: JavaScript Добавлено: 29 Сен 2010
1
Сейчас online: 34. Зарегистрированных: 2. Гостей: 32.
-->