Fast Site Engine
Высокопроизводительный движок для сайтов
Заказать сайт на основе движка
О движкеПроизводительностьБезопасностьТехнические требованияSEO 
Лицензионное соглашение
Демо
Установка
Панель управления
Модули
Документация
Шаблоны
Тесты производительности php
Планы на будущее
Список изменений
Отзывы и пожелания
Переходим на Линукс
Всякое разное
Документация  »  JavaScript

Библиотека JavaScript

Собрал наиболее часто используемые анимационные эффекты в библиотеку, она представляет из себя нечто вроде аналога / замены jQuery и пр. без перекрытия методов и лишних заморочек (не должно конфликтовать в случае подключения сторонних API). Постарался сделать её максимально простой для понимания и охватить все нужные функции, чтоб была возможность быстро и сжато создавать любую дополнительную функциональность. Естественно всё кроссбраузеорно и работает без лагов и глюков, но древние браузеры типа IE8- в пролёте. (Статистика склоняется к 0,1% таких пользователей, полагаю это просто чьи-то древние боты так представляются..)

При всём обилии анимации, библиотека весит всего 35 Кб, для сравнения jquery-3.3.1.min = ~85 Кб и зачастую, чтоб подцепить какую-нить анимацию, потребует дополнительного сценария..

Функции:

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

anim - анимация

var to=100;
anim({
  t:100, //длительности анимации мс. По умолчанию ff.at = 300 мс (1000 мс = 1 сек).
  f:ff.aback, //функция времени, получает возрастающее число от 0 до 1.
  s: function(p) { //шаг анимации *
    o.style.left = to * p + 'px';
  },
  e: function() { //что-то сделать в конце?

  }
});
По окончании сбрасывает флаг ff.ap = 0; (animation play)

ссылка-якорь на функцию anim

дополнительные функции для анимации

По умолчанию swing

ff.aback - стрельба из лука

ff.abounce - отскок

ff.acirc - дуга

ff.aelastic - упругая анимация

ff.alinear - линейная

ff.aquad - в степени n (квадратичная)

ff.asquare - квадратный корень

ссылка-якорь на функции

touchr - перехват touch устройств (планшетов итп)

Заменяет вызовы, благодаря чему onclick и пр. начинает работать как touch события. Биндится/устанавливается на автомате..

ссылка-якорь на функцию touchr

var ff - переменные

ff.ap:0, //animation play, переключатель заполняемый вручную, если необходимо отследить
  проигрыш анимации и не допустить запуск следующей.
ff.at:300, //длительности анимации по умолчанию
ff.lang:'', //текущий язык страницы берётся из <html lang="ru">
ff.now:0, //performance.now() засекает время для организации задержки(timeout) при
  скролле страницы.
ff.fixi:0, //переключатель, зафиксирован ли элемент.
ff.fixt:0, //timeout при скролле страницы, разгружает браузер..
ff.path:'/', //пусть от корня для вызова скриптов, если сайт в подкаталоге.. Заполняется
  на автомате.
ff.fse:'', //ключ шифрования
ff.walke:'a,button,label,textarea,input', //элементы по которым разрешено гулять
  при перемещении стрелками в формах см. ff.walk ff.walkto
ff.host:, //fsen.ru

Динамически занимаемые переменные:
ff.body, ff.scrtl, ff.oa, ff.ob, ff.ot, ff.oo, ff.oi, ff.i, ff.ield, ff.goup, ff.slides, ff.tapes

ссылка-якорь на переменные

ff.ac(e) - обрабатывает эффект аккордеона [accordion]

Служебная.
Метод активации и прочее смотрите в onload

ссылка-якорь на функцию ff.ac

ff.ae(n,f,d) - addEventListener

n - навание события,
а - функция,
d - биндить на document?

Вешает слушателей на события
ff.ae('resize',function(){});//на window
ff.ae('touchmove',touchr,1);//на document

ссылка-якорь на функцию ff.ae

ff.alert(t,x,e,c,u,w) - всплывающая/выезжающая подсказка

t* - 'текст подсказки',
x - анимация,
e - элемент к которому прилететь,
c - css класс элемента = 'alert',
u - длительности анимации мс. = 400, (1000 мс = 1 сек)
w - описывает кнопку закрытия уходящую на генератор создания элемента в ff.ce

x - анимация:
0 или отсутствие параметра = случайный прилёт/улёт подсказки с разных сторон..
-1 - плавно изменяет прозрачность (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - подсказка прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.

e - элемент к которому прилететь, при этом появится галочка(пирамидка) под/над центром
  элемента (в зависимости от положения на странице).

Так же происходит установка клавиш управления ff.bindef

Примеры использования:
<button onclick="ff.alert('Подсказка')">Подсказка</button>
<button onclick="ff.alert('Подсказка',4.8)">Подсказка</button>
<button onclick="ff.alert('Подсказка',4.8,this)">Подсказка</button>
<button onclick="ff.alert('Подсказка',0,0,0,1000,0)">Подсказка</button>

 

Разместите css см. Всплывающая/выезжающая подсказка [ff.alert()]

ссылка-якорь на функцию ff.alert

ff.atr(e,n,v) - получить/установить атрибут

e - элемент или строка с id элемента
n - название свойства
v - значение, если указано атрибут устанавливается..
По умолчанию возвращает пустую строку, если не найден атрибут = ''
Если задать пустое значение - атрибут будет удалён.

var id, e=ff.byt(0,'div',0);

Получить:
id=ff.atr(e,'id');

Установить:
ff.atr(e,'id','fseid');

Удалить:
ff.atr(e,'id','');

ссылка-якорь на функцию ff.atr

ff.b - установить элементам style.display='block'

Параметрами передаётся элемент или строка с id элемента

ff.b('id');
ff.b('id1','id2');
ff.b(obj1,obj2);

ссылка-якорь на функцию ff.b

ff.bind(f) - устанавливает window.onkeydown

Функция запоминает предыдущее состояние и возвращает к нему повторным вызовом
  без параметров

ff.bind(function(e){});
ff.bind(); //вернуть unbind

ссылка-якорь на функцию ff.bind

ff.bindef(e,f) - действия для клавиш по умолчанию

Устанавливает действия на клавиши по умолчанию для всплывающих "окон":
  ff.alert, ff.mes, ff.over.

e - event
f - функция закрытия на клавишу Esc

Функция гуляет только по разрешённым элементам из
ff.walke = 'a,button,label,textarea,input'

Пп умолчанию:
esc - переданная функция f();
space (пробел) - нажать если не текстовое поле (input 'text,password,hidden', 'textarea');
[ctrl + ` или up(стрелка ввверх)] - перейти к предыдущему элементу или к последнему..
[tab или down(стрелка вниз)] - к следующему элементу или к первому..

Функция служебная и работает в паре:
ff.bind(function(k){ff.bindef(k,f)});

ссылка-якорь на функцию ff.bindef

ff.by(i,e,t,n) - берёт элементы по названию тега или класса

Служебная функция для ff.byc и ff.byt

i - переключатель 1 - ByTagName, 0 - ByClassName
e - родительский элемент или строка с id элемента, если не указан берётся document
t - название тега или класса
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.

ссылка-якорь на функцию ff.by

ff.byc(e,t,n) - берёт элементы по названию класса

e - родительский элемент или строка с id элемента, если не указан берётся document
t - название класса
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.

ссылка-якорь на функцию ff.byc

ff.byt(e,t,n) - берёт элементы по названию тега

e - родительский элемент или строка с id элемента, если не указан берётся document
t - название тега
n - индекс элемента (0 - первый, -1 - последний),
  если не указан возвращается массив всех найденных.

ссылка-якорь на функцию ff.byt

ff.c(n,v,e) - установка cookie

n - название
v - значение
e - время жизни сек.(месяц по умолчанию)

Получить:
v=ff.c('name');

Установить:
ff.c('name','value');//на месяц
ff.c('name','value',3600);//на час

Удалить:
ff.c('name','');

ссылка-якорь на функцию ff.c

ff.ca(e,v,w) - добавить (удалить, перевернуть) класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут добавлены все к каждому элементу.
w - что делать функции:
1 - добавить (по умолчанию)
2 - перевернуть (toggle);
любое другое - удалить

Добавить:
ff.ca(e,v);
ff.ca('id1,id2','myclass');

Перевернуть:
ff.ca(e,v,2);

Удалить:
ff.ca(e,v,3);

ссылка-якорь на функцию ff.ca

ff.cc(e,v) - задан ли класс у элемента

e - элемент или строка с id
v - значение

if(ff.cc(e,'on')){}
if(ff.cc('id','on')){}

ссылка-якорь на функцию ff.cc

ff.ce - создать элемент

Функция принимает объект свойств:
Все параметры необязательные.

n - название создаваемого тега, по умолчанию div
Если передан style, будет вставка CSS стилей, а не создание элемента.
ff.ce({n:'style',t:'.myclass{margin:0 auto}.myclass2{margin:19px 2%}'});

p - элемент в который вставить (парент)
с - класс создаваемого элемента (className)
l - всплывающая подсказка (title)
f - функция на onclick элемента
a - вставить элемент после указанного в p
i - вставить элемент на первое место внутри элемента указанного в p или в body
По умолчанию элементы добавляются в конец родительского элемента p или в body

t - текст который будет вставлен в .value или .innerHTML
Можно прервать вставку текста если указать t = '`'
Например создать и вставить кнопку, за счёт внутреннего добавочного механизма..
o = ff.ce({p:e,n:'button',c:'fbn',l:ff.l('close')+' [Esc]',f:f,t:'`'});
Вставка элемента пойдёт через appendChild итп..

е - заменть элемент или создать
ff.ob = ff.ce({e:ff.ob,c:'overb',f:f});
Таким образом можно переназначать свойства..

Добавочный механизм создания кнопки:
Вставляет кнопку до текста t (сделан для служебных нужд по созданию кнопок с отличными
от основного блока набором свойств..)
o = ff.ce({f:function(){},b:'fbn fbx`'+ff.l('close')+' [Esc]`ff.alert(\'\','+x+')'});
Подаётся строкой через разделитель `, функция создаёт кнопку button:
0 - class=
1 - title=
2 - onclick=
3 - текст кнопки
Все параметры необязательные.

Примеры:
o = ff.ce({}); //создаст div в body
o = ff.ce({c:'fbt',p:fbw}); //создаст div с классом fbt в элементе fbw
o = ff.ce({c:'fbpl',f:function(){fb.prev()},
  t:'<button class="fbn fby" title=" '+ff.l('prev')+' [Backspace, Left] "></button>'});

ссылка-якорь на функцию ff.ce

ff.cr(e,v) - удалить класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут добавлены все к каждому элементу.

Примеры:
ff.cr(e,'class1');
ff.cr('id1,id2','class1,class2,class3');

ссылка-якорь на функцию ff.cr

ff.ct(e,v) - перевернуть класс

e - элемент или строка с id через запятую
v - строка с названиями классов через запятую, будут добавлены все к каждому элементу.

Примеры:
ff.ct(e,'class1');
ff.ct('id1,id2','class1,class2,class3');

ссылка-якорь на функцию ff.ct

ff.d(e,v) - получить/установить style.display

e - элемент или строка с id через запятую
v - значение:
none, block, inline-block, inline, list-item, run-in,
table, table-row, table-cell, inline-table, table-caption
table-column-group, table-column, table-header-group, table-footer-group, table-row-group

ff.d(e,'block');
ff.d('id1,id2','block');

ссылка-якорь на функцию ff.d

ff.del(e) - удалить элемент

e - элемент или строка с id

ссылка-якорь на функцию ff.del

ff.e(s,n) - экранировка запроса POST

s - строка
n - не шифровать (если не передан - шифрует)

ссылка-якорь на функцию ff.e

ff.fade(i,e,f,to,t) - плавно изменяет прозрачность

i* - направление: 1 - увеличивает, 0 - уменьшает прозрачность
e* - элемент или строка с id через запятую
f - выполнить функцию по окончании анимации
to - конечное значение прозрачности 0.7 итп
t - длительности анимации мс. (1000 мс = 1 сек)

Примеры:
ff.op(e,0); //установить прозрачность
ff.fade(1,e);
ff.fade(1,'id1,id2');
ff.fade(1,e,0,0.7,200);
ff.fade(0,e,function(){ff.n(e)},0,240);

ссылка-якорь на функцию ff.fade

ff.fieldok(i,n,g,r) - подсвечивает поле зелёным или красным

Служебная, используется при проверке поля капчи (Введите код) в формах.
i* - результат 1 всё в порядке - зелёным, 0 - красным
n* - строка, функция возьмёт элемент по id или первый элемент по классу,
если параметр не передан, подразумевается что элемент сохранён в переменной ff.ield*
и будет взят из неё.
g - свой цвет зелёного, по умолчанию #090
r - свой цвет красного, по умолчанию #f00

ссылка-якорь на функцию ff.fieldok

ff.fix(e,i) - переворачивает position

Служебная, переворачивает position с fixed на absolute и наоборот,
оставляя элемент в том же положении на экране.
Это нужно на случай если элемент не помещается на экране.
Этим решена проблема с растягивающимися полосами прокрутки при анимации.
Из-за этого решения IE8- в пролёте.. 0,1% пользователей.

e - элемент
i - переключатель: 1 - fixed, 0 - absolute

ff.fix(e);//fixed
ff.fix(e,0);//absolute

ссылка-якорь на функцию ff.fix

ff.float(v,n) - возвращает float число или строку

v - значение, будет преобразовано в строку и проведены операции преобразования..
n - количество цифр(от 0 до 20) после десятичного знака ("запятой").
n = -1 - не преобразовать в число.
ff.float(' 123,456 руб'); //123.456
ff.float(' 123,456 руб',2);//123.45
ff.float(' 123,456 руб',-1);//'123.456'

ссылка-якорь на функцию ff.float

ff.g(e) - берёт элемент по id

Если подан элемент возвращает его.

ссылка-якорь на функцию ff.g

ff.gc(p,n) - берёт элемент по id или классу

Вернёт элемент по id или первый элемент по классу.
p - парент (родитель) внутри которого искать элемент, по умолчанию document
n - строка, название id или класса

e=ff.gc(0,'myid');
e=ff.gc(0,'myclass');

ссылка-якорь на функцию ff.gc

ff.go(v,w,s) - устанавливает URL окна

v* - адрес
w - открыть в новом окне (window.open или переход по window.location)
s - 1: добавить перед значением https://; 2: http://

ff.go('#ff.go');
ff.go('//fsen.ru/docs/js#ff.go');
ff.go('fsen.ru/docs/js#ff.go',1,1);

ссылка-якорь на функцию ff.go

ff.ia(f,a) - есть ли значение в массиве

f - значение которое следует найти
a - массив
Функция булевая - возвращает true, false

if(ff.ia(f,[9,27])){}

ссылка-якорь на функцию ff.ia

ff.init - инициирует объект ff и анимации

Здесь происходит начальная подготовка, задаются переменные ff.path, ff.lang.
Проверяется и биндится Touch устройство.
Предобрабатываются анимации, которые устанавливаются в onload

ссылка-якорь на функцию ff.init

ff.int(v) - возвращает int число

ff.is - определяет, установлена ли переменная

Булевая, может принимать несколько переменных. (аналог php isset)
Особенно полезна в случае прихода в функцию переменной = 0..

if(ff.is(fl[l],fl[l][n])){}

ссылка-якорь на функцию ff.is

ff.isf(v) - проверяет является ли число float

Булевая - возвращает true, false

if(ff.isf('1.43')){}

ссылка-якорь на функцию ff.isf

ff.ish(e) - скрыт ли элемент

Булевая - возвращает true, false
e - элемент
Проверяет visibility==hidden или вычисляет размеры объекта,
при display=none элемент не отображается и его размеры = 0

ссылка-якорь на функцию ff.ish

ff.ist(e) - текстовое ли поле

Булевая - возвращает true, false
e - элемент
текстовое поле: textarea,
input type="text,password,hidden"

ссылка-якорь на функцию ff.ist

ff.istouch - определяет touch устройство

Булевая - возвращает true, false

ссылка-якорь на функцию ff.istouch

ff.kd(e,k,f) - для проверки нажатий клавиш

e - event
k - код клавиши
f - функция которую вызвать в случае успеха

function find(){...}
ff.g('findtxt').onkeyup=function(event){ff.kd(event,13,find)}
<input type="text" onkeyup="ff.kd(event,13,find)" value="">

ссылка-якорь на функцию ff.kd

ff.key(p,e) - сгенерировать капчу

Служебная, посылает запрос на сервер, результатом является картинка(капча)
p - объект в котором искать элемент по умолчанию 0=document
e - элемент в который вывести, будет взят по id или первый по классу..

<div class="keyo"></div>
ff.key(0,'keyo');
<a href="/" onclick="return ff.key(0,'keyo')">показать другую</a>

ссылка-якорь на функцию ff.key

ff.keyis(p,n,o) - верно ли введена капча

p - элемент в котором искать поле ввода и элемент в который отдаёт результат AJAX
Оба будут взяты по id или первый по классу.
По умолчанию 0=document

n - класс или id поля ввода капчи
o - элемент для результата AJAX

<div class="keyot"></div>
<input type="text" class="key" onkeyup="ff.keyis(ff.ot,'key','keyot')" value="">

Сервер вернёт ответ в ff.fieldok

ссылка-якорь на функцию ff.keyis

ff.l(n,l) - возвращает значение из языкового пакета

n* - название (ключ в массивах fl - fl['ru'][n] итд)
l - язык (по умолчанию берётся язык страницы - ff.lang)
Если не обнаружит - вернёт переданное название n

alert(ff.l('next'));
alert(ff.l('next'),'en');

ссылка-якорь на функцию ff.l

ff.lim(e,l) - ограничить поле ввода

e - элемент
l - максимальное количество букв
Функция так же удаляет вредные символы '`<>, пробелы в начале и двойные пробелы.

<textarea onkeyup="ff.lim(this,100)" rows="1" cols="1"></textarea>

ссылка-якорь на функцию ff.lim

ff.menu(x,u,e,t) - всплывающее/выезжающее меню

x - анимация:
0 - случайный прилёт/улёт меню с разных сторон
10 - в зависимости от позиции элемента вызвавшего (кнопка правее центра)
  прилёт меню слева или справа..
-1 - плавно изменяет прозрачность (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - меню прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.

u - прилипать к краям слева-справа
e - элемент - меню или 'id', по умолчанию берётся первый <nav>
t - длительности анимации = 400 мс.  (1000 мс = 1 сек)

Если меню вмещается будет выведено под кнопкой его вызывающей,
если не вмещается по уровню кнопки и если и тут не вместилось то верха экрана.

Так же происходит установка клавиш управления ff.bindef

<nav><span>Меню</span><?php menu('top')?></nav>
<button onclick="ff.menu()">меню</button>
Разместите css см. Меню (...) [ff.menu()]

ссылка-якорь на функцию ff.menu

ff.mes(z,t,u,c,e) - всплывающая/выезжающая форма для обратной связи

z - mesid - id формы для обработки на стороне сервера,
  используйте 1525605447, в будущем будет генератор в ПУ сайта.
t - строка описывающая поля через разделитель | внутри разделитель ^
* - обязательное поле для заполнения пользователем (required)
** - обязательно одно из помеченных так полей (или или)
Синтаксис: ^тег^значение - вкладывает значение внутрь тега..

Проще на примере всех возможных свойств показать:

ff.mes(1525605447,'
  • ^h2^Написать сообщение| //преобразует в <h2>Написать сообщение</h2>
  • !| //для выхлопа AJAX (<div class="mout"></div>)
  • n^Представьтесь *^myplaceholder| //поле имени и placeholder добавляет полю class="fname" в принимающем скрипте $name (для вставки в заголовок письма например)
  • t^Телефон *| //поле телефона - приведёт к международному формату ru 0 (000) 000-00-00; ua 000 (00) 000-00-00; en 0 (000) 0000-00-00; добавляет полю class="fphone" в принимающем скрипте $phone
  • Сообщение *| //текстовое поле
  • h^Скрытое поле^myid| //для внешней вставки данных напимер.. myid - для обращения к полю по id Я даю 2 секунды на анимацию, перед тем как вставить данные в всплывшую форму.
  • *^Пароль *| //указание вывести input type="password"
  • %^E-mail или телефон *| //поле с проверкой ввода - email или телефон введён.. добавляет полю class="fmailp"
  • @^E-mail*| //поле с проверкой ввода - email добавляет полю class="fmail"
  • f^Приложить файлы^Загрузить| //input type="file" multiple (скрытый), по умолчанию кнопка Обзор... или указанное ^Загрузить выводит список выбранных файлов..
  • d^Приложить файлы^Перетащите файлы или нажмите^загрузить| Поле загрузки файла с возможностью Drag-and-drop, т.е. забросить файлы в поле из папки или нажать кнопку для стандартного диалога. По умолчанию кнопка Обзор... или указанное ^загрузить
  • #^Введите код *^^Показать другой| //капча, последнее значение ссылки..
  • b^отправить| //кнопка для отсылки формы - ff.mesend
  • ^small^Нажимая на кнопку «Отправить», даю согласие на <a href=`!privacy` target=`_blank`>обработку персональных данных</a>. //восклицательный знак перед ссылкой означает добавить текущий путь ff.path - / ` заменятся на "
','inc/form','mes','Заполните обязательное поле'); u - URL по которому отправить запрос, по умолчанию inc/form.php c - название класса, который добавить всплывшему блоку, по умолчанию mes e - текст ошибки, по умолчанию из языкового пакета берётся: f.l('fill') - Заполните обязательное поле Анимация появления будет случайной.. Передаваемые данные шифруются.. Я постарался максимально затруднить жизнь спамерам.. Так же происходит установка клавиш управления ff.bindef Разместите css см. Всплывающая/выезжающая форма...[ff.mes()] Ещё пример: ff.mes(1525605447,'^h2^Напишите нам|!|Имя *|@^E-mail|Сообщение *|b^отправить'); Если необходимо создать форму на странице и отослать через этот же механизм: <div class="mes"> <h2>Написать сообщение</h2><div class="mout"></div> <label for="fse10">Представьтесь *</label><textarea id="fse10" class="fname" rows="1" cols="1" autocomplete="off" required></textarea> <label for="fse11">E-mail *</label><textarea id="fse11" class="fmail" rows="1" cols="1" autocomplete="off" required></textarea> <label for="fse12">Телефон *</label><textarea id="fse12" class="fphone" rows="1" cols="1" autocomplete="off" required></textarea> <label for="fse13">E-mail или телефон *</label><textarea id="fse13" class="fmailp" rows="1" cols="1" autocomplete="off" required></textarea> <label for="fse14">Сообщение *</label><textarea id="fse14" rows="1" cols="1" autocomplete="off" required></textarea> <code class="skip fsehdn" tabindex="-1"><i>Скрытое поле</i><textarea rows="1" cols="1" id="myid"></textarea></code> <label class="ffile" for="fse15"><span>Приложить файлы</span><i></i> <button type="button" id="fse15" onclick="ff.byt(this.parentNode,'input',0).click()">Обзор...</button> <input type="file" onchange="ff.mesf(this)" multiple> </label> //или Drag-and-drop <label class="ffile fdrop" for="fse15"><span>Приложить файлы</span><i>Перетащите файлы или нажмите</i> <button type="button" id="fse15" onclick="ff.byt(this.parentNode,'input',0).click()">загрузить</button> <input type="file" onchange="ff.mesf(this)" multiple> </label> <label for="fse16">Введите код *</label><input id="fse16" class="key2" type="text" name="key" onkeyup="ff.keyis(this.parentNode,'key2','mout')" value="" required><br> <code class="keyo"><img src="//fsen.ru/inc/key.php" alt="" style="width:110px;height:50px"></code> <a href="/" onclick="return ff.key(this.parentNode,'keyo')">Показать другой</a> <button onclick="ff.mesend(this.parentNode,'mout')">отправить</button> <small>Нажимая на кнопку «Отправить», даю согласие на <a href="/privacy" target="_blank">обработку персональных данных</a>.</small> <code class="skip" tabindex="-1"> <input class="lang" value="ru" type="text"> <input class="mesid" value="1525605447" type="text"> <input class="email" name="email" value="" type="text"> <input class="time" value="1525967052" type="hidden"> <input class="php" value="inc/form" type="text"> <!-- <input class="err" value="Своё сообщение об ошибке заполнения" type="text"> --> </code> </div> Естественно, удалите лишие поля.. Содержимое <code class="skip" tabindex="-1"> не трогать, исключая lang и mesid.. ссылка-якорь на функцию ff.mes

ff.mesend(p,o) - отправляет форму на сервер

p - элемент или 'id' или 'класс' - в котом искать элементы
o - элемент для результата AJAX (берётся по классу или id)

Функция автоматически собирает данные упаковывает в FormData, шифрует и
пересылает по указанному пути..

ссылка-якорь на функцию ff.mesend

ff.mesf(e) - выводит список файлов input file

Служебная для ff.mes, выводит список файлов при выборе файлов в тег i рядом с e
e - элемент input type="file

ссылка-якорь на функцию ff.mesf

ff.mest(t,a,p) - выводит tooltip об ошибке заполнения поля

Служебная для ff.mesend.
t - элемент input textarea
a - строка aria-describedby
p - родительский элемент блока формы

ссылка-якорь на функцию ff.mest

ff.move(e,f,t,nt,bt,nl,bl) - переместить элемент

Функция задумана для перемещения блока с меню, выезда из под другого меню итп..

e - элемент или 'id' или первый по 'классу'..
f - функция анимации
t - длительности анимации = 400 мс.  (1000 мс = 1 сек)

Координаты в пикселях (px):
nt - сверху (y - top) при движении вперёд (первое нажатие)
bt - сверху (y - top) при движении назад (второе нажатие)
nl - слева (x- left) при движении вперёд (первое нажатие)
bl - слева (x- left) при движении назад (второе нажатие)
Могут быть отрицательными для движения назад..


Примеры:
.moveme{position:fixed;z-index:1;height:100px;top:-100px;left:0;right:0;
background-color:#ff0;box-shadow:0 3px 3px -3px rgba(0,0,0,.5)}

<div class="moveme">...</div>

Переместить вниз, вторым нажатием вверх, на 300 пикселей:
<button onclick="ff.move('moveme',0,0,300)">move1</button>

Переместить вниз, вторым нажатием вверх, с анимацией "стрельбы из лука"
с длительностью анимации 700 мс на 300 px:
<button onclick="ff.move('moveme',ff.aback,700,300)">move2 ff.back</button>

Переместить вниз на 300 px, вторым нажатием вверх на 100 px:
<button onclick="ff.move('moveme',0,0,300,-100)">move3</button>

Переместить вниз на 300 px, вторым нажатием вниз на 100 px:
<button onclick="ff.move('moveme',0,0,300,100)">move4</button>

Движение по горизонтали, аналогично..

ссылка-якорь на функцию ff.move

ff.n - установить элементам style.display='none'

Параметрами передаётся элемент или строка с id элемента

ff.n('id');
ff.n('id1','id2');
ff.n(obj1,obj2);

ссылка-якорь на функцию ff.n

ff.next(e,n) - получить следующий элемент

e - элемент
n - название тега
Вернёт false если не найден

d=ff.next(e,'div');

ссылка-якорь на функцию ff.next

ff.nf(v,x,s) - формат числа

v* - значение
x - знаков после запятой
s - разделитель по умолчанию пробел
Вернёт строку, числа разбиваются по 3 знака

ссылка-якорь на функцию ff.nf

ff.nn(e,v) - совпадает ли nodeName

Булевая - возвращает true, false
e - элемент
v - значения через запятую

if(ff.nn(e,'div')){}
if(ff.nn(e,'nav,div')){}

ссылка-якорь на функцию ff.nn

ff.onload(f) - бинд на onload окна

Задаёт функцию на окончание загрузки страницы.
Задан в конце скрипта, добавляйте туда если что-то ещё необходимо.

ff.onload(function(){});

ссылка-якорь на функцию ff.onload

ff.onscr(g,f) - обработка скроллинга страницы

Служебная. Разгружает браузер, предотвращая излишние частые вычисления..
Обрабатывает кнопу наверх g - goup и фиксацию элемента f - fix.

ссылка-якорь на функцию ff.onscr

ff.onscrf(f,x) - обслуживает ff.onscr fix

Служебная. Фиксирует элементы переданные ff.onscr

ссылка-якорь на функцию ff.onscrf

ff.op(e,o) - задаёт прозрачность элемента

e - элемент или 'id'
o - прозрачность opacity от 0 до 1 (0.7)

ссылка-якорь на функцию ff.op

ff.otl(x,b) - служебная для анимации

Вычисляет позицию "отлёта" из-за экрана по выбранным направлениям.

ссылка-якорь на функцию ff.otl

ff.otln(y,x,t,l) - служебная для анимации

Проверяет направления, выравнивая полёт по вертикальным и горизонтальным осям..

ссылка-якорь на функцию ff.otln

ff.otly(a,b,y) - служебная для анимации

Проверяет помещается ли объект в окно и отдаёт координаты в зависимости от
направления прилёта..

ссылка-якорь на функцию ff.otly

ff.ove - выполняется при закрытии всплывающих окон

Служебная. Разустанавливает ff.bind клавиш и переходит к последнему
элементу до запуска окон анимации - меню итп.

ссылка-якорь на функцию ff.ove

ff.ovy(x,h) - служебная для анимации

Проверяет поданные направления x анимации разбивая float, если он подан
в качестве направления и в зависимости от того скрыт h ли элемент отдаёт
направления движения..

ссылка-якорь на функцию ff.ovy

ff.over(t,x,u,c) - всплывающий блок с затемнением фона

Так же является служебным для ff.mes. role=dialog
t - текст / html вставляемый внутрь блока..

x - анимация:
0 или отсутствие параметра = случайный прилёт/улёт подсказки с разных сторон..
-1 - плавно изменяет прозрачность (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - подсказка прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.

u - длительности анимации = 500 мс.  (1000 мс = 1 сек)
c - название класса, который добавить всплывшему блоку

Так же происходит установка клавиш управления ff.bindef

ссылка-якорь на функцию ff.over

ff.pf(v) - в формат телефона

Приводит поданное значение к виду 1 (123) 123-12-12.
Функция умная, если номер короче - выведет 12-12-12 итп.

ссылка-якорь на функцию ff.pf

ff.pos(e) - позиция элемента

e - элемент или 'id'
Возвращает массив координат с учётом скролла страницы:
t: сверху
l: слева
r: справа
b: снизу

y=ff.pos(e).t;

ссылка-якорь на функцию ff.pos

ff.posr(e) - координаты элемента

e - элемент или 'id'
Возвращает массив координат без учёта скролла:
t: сверху
l: слева
r: справа
b: снизу

y=ff.posr(e).t;

ссылка-якорь на функцию ff.posr

ff.prev(e n) - получить предыдущий элемент

e - элемент
n - название тега
Вернёт false если не найден

d=ff.prev(e,'div');

ссылка-якорь на функцию ff.prev

ff.rand(a,b) - возвращает случайное число в заданном диапазоне

ff.req(p,f) - реализует AJAX запросы

Служебная для ff.send используйте её для запросов.
p* - объект параметров:
     u: URL запроса
     s: строка запроса (параметры)
     o: элемент (или 'id') в который возвращать результат
f - не добавлять заголовок application/x-www-form-urlencoded (нужен для FormData)

Все запросы уходят по POST, если нужен GET - просто укажите в u: ?par=need

new ff.req({u:u, s:s, o:o}, f);

Дополнительные возможности при ответе сервера:

Вложить ответ на уровень выше контейнера для ответа o:
echo '`|rise`|текст';

Перейти по адресу (window.location=):
echo '`|nav`|//fsen.ru/docs/js';

Перезагрузить страницу с гарантированным сбросом кэша:
echo '`|reboot`|';

rise, nav, reboot - обязательно в начале ответа!

Вызвать выполнение скрипта eval:
echo 'текст<input type="hidden" id="fseval" value="func()">';

Прокрутит страницу к элементу и даст фокус на него..
echo 'текст<div role="alert" style="color:red">alert</div>';

ссылка-якорь на функцию ff.req

ff.sa(e,s) - вернуть массив из строки

e - строка элементов через запятую, если подан объект/элемент - вернёт его в массиве..
s - разделитель, по умолчанию запятая ','

var i, e = ff.sa('id1,id2');
for (i = 0; i < e.length; i++) {
  if(o = ff.g(e[i])){}
}
Для организации циклов с неизвестным количеством элементов на входе..

ссылка-якорь на функцию ff.sa

ff.sc(n,v) - установить cookie и обновить страницу

ff.scr - получить позицию скролла страницы

Возвращает объект {t:сверху, l:слева}
t = ff.scr().t;

ссылка-якорь на функцию ff.scr

ff.scrto(e,t,y) - прокрутить к элементу

e - элемент или 'id'
t - отступить сверху, по умолчанию 9px
y - переключатель:
    к началу страницы - ff.scrto(0,0,1);
    к концу - ff.scrto(0,0,2);

ff.scrto(e);
ff.scrto('id',50);

ссылка-якорь на функцию ff.scrto

ff.see(e) - виден и элемент на экране

Булевая - возвращает true, false
e - элемент или 'id'

ссылка-якорь на функцию ff.see

ff.sel(o,s,e) - получить/задать позицию каретки в поле

o - элемент
s - начало
e - конец

s = ff.sel(e); //получить selectionStart
ff.sel(e, s); //установить
ff.sel(e, s, s+1); //установить выделив символ

ссылка-якорь на функцию ff.sel

ff.send(u,s,o,f) - послать AJAX запрос

Добавляет '.php' на конец u, если нет..
Всегда возвращает false (для удобства использования в ссылках)

Полное описание в ff.req

ff.send('inc/key','newkey=1','outid');

ссылка-якорь на функцию ff.send

ff.sip(s,f,o) - найти позицию строки без учёта регистра

s - строка
f - строка что найти
o - позиция, с которой начинать поиск: от 0 до (длины строки-1)

if(ff.sip(u, '.php') === !1){}
if(ff.sip(u, '.php') === false){}

ссылка-якорь на функцию ff.sip

ff.sp(s,f,o) - найти позицию строки

s - строка
f - строка что найти
o - позиция, с которой начинать поиск: от 0 до (длины строки-1)

if(ff.sp(u, '.php') === !1){}
if(ff.sp(u, '.php') === false){}

ссылка-якорь на функцию ff.sp

ff.style(e,n) - гарантировано возвращает значение CSS стиля

e - элемент или 'id'
n - название стиля
Вернёт пустую строку '', если не нашёл..

s=ff.style(e,'display');

ссылка-якорь на функцию ff.style

ff.tabs - переключает вкладки

Служебная, захват тегов включается в ff.onload tabs:1
Подробнее описано в onload

ссылка-якорь на функцию ff.tabs

ff.time - Unix Time Stamp

Возвращает текущую метку времени Unix
Cекунды, от начала эпохи Unix (1 января 1970 00:00:00 GMT) до текущего времени
Аналог php time()

ссылка-якорь на функцию ff.time

ff.v(e,v) - возвращает/задаёт значение (value / innerHTML)

e - элемент или 'id'
v - значение
Функция определяет сама где значение у элемента в value или в innerHTML..

ссылка-якорь на функцию ff.v

ff.vc(p,n) - возвращает значение элемента взятого по классу

e - родительский элемент или 'id', если не указан берётся document
n - название класса

v=ff.vc(0,'class');

ссылка-якорь на функцию ff.vc

ff.walk(i,e,n,f,q) - получить соседний элемент

i - направление движения: 1 - вперёд, 0 - назад
e - элемента, до или после которого начать поиск элементов n
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input'
f - установить фокус на элементе?
q - если не указано или 0 - подняться наверх(parentNode) к первому элементу 'nav,div'

Функция перескакивает label при обратном движении, и через элементы с tabindex==-1
и невидимые visibility==hidden и display==none

Ныряет и выныривает по элементам внутри, например если нужно найти
textarea внутри label или элемент лежит внитри div итп..

var a=d.activeElement //Двигаться назад, по окончании на последний элемент
if(!ff.walk(0,a,0,1))ff.walkto(a,0,-1);

ссылка-якорь на функцию ff.walk

ff.walkto(e,n,i,q) - получить элемент

e - элемент или 'id' внутри которого идёт поиск
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input'
i - номер элемента, который взять, по умолчанию 1-й
q - если не указано или 0 - подняться наверх(parentNode) к первому элементу 'nav,div'

Функция перескакивает label при обратном движении, и через элементы с tabindex==-1
и невидимые visibility==hidden и display==none

var a=d.activeElement
ff.walkto(a,'div'); //первый div
ff.walkto(a,0,-1); //последний элемент

ссылка-якорь на функцию ff.walkto

ff.wh(e) - получить размеры элемента

e - элемент или 'id', если не подан функция вернёт размеры окна.
Возвращает целые числа в объекте {w: ширина,h: высота}

y=ff.wh().h;

ссылка-якорь на функцию ff.wh

ff.wl - получить текущий URL

Возвращает window.location приведённый к строке

ссылка-якорь на функцию ff.wl

var fb - галеря изображений fotobox

Служебный объект, обслуживает галерею изображений fotobox

Метод активации и прочее смотрите в onload

ссылка-якорь на fb

var fc - шифрование

Объект "жопной боли" криптоаналитика при прослушивании трафика в сети.
Полная функциональность не описывается..

ссылка-якорь на fc

fc.a - аналог php base64_encode

s=fc.a('зашифруй меня');

ссылка-якорь на функцию fc.a

fc.b - аналог php base64_decode

s=fc.b('расшифруй меня');

ссылка-якорь на функцию fc.b

fc.g(z) - генератор пароля

z - длина
Функция "генерирует" только английские буквы в разном регистре и цифры..

ссылка-якорь на функцию fc.g

var fe - слайдер (карусель) [slide]

Служебный объект, обслуживает слайдер

Метод активации и прочее смотрите в onload

ссылка-якорь на fe

var fs - операции с фокусом и первое нажатие tab

Служебная.
Первое нажатие tab - перейти к основному содержанию

Метод активации и прочее смотрите в onload

ссылка-якорь на fs

var ft - слайдер лента (карусель с блоками внутри) [tape]

Служебный объект, обслуживает слайдер

Метод активации и прочее смотрите в onload

ссылка-якорь на ft

var fl - языковые пакеты

Для получения значений из массивов используйте ff.l()

ссылка-якорь на fl

onload - активация скриптов при загрузке страницы

ff.onload(function() {
  //По умолчанию включены:
  ff.init({focus:1,fotobox:1,tomain:1});
  //Возможны:
  ff.init({
    accordion:1,
    fix:{e:'header',y:95},
    focus:1,
    fotobox:1,
    goup:{t:'⇪',y:300},
    slide:{c:'slide',t:5000,d:400,f:ff.aback},
    tabs:1,
    tape:{c:'tape',t:2500,d:500,f:ff.aback},
    tomain:1
  });
});
Если значение 0 или отсутствие параметра = отключить, например fix:0

//------------------------------------------------------------------------------
Эффект аккордеона [accordion]:
accordion:'class' или 1 (class="ac")
class="ac noup" - не схлопывать другие пункты при раскрытии
Могут быть заголовки: h2, h3
После заголовка допустимы теги: div, p, ul
Аккордеон можно вкладывать во внутрь другого.

Устанавливает обработку анимации на все найденные элементы..

Пример:
<div class="ac noup">
  <h2>Заголовок</h2>
  <div>текст</div>
  <h2>Заголовок</h2>
  <div>текст</div>
</div>

//------------------------------------------------------------------------------
Фиксация элемента при скролле страницы вниз [fix]:
fix:{e:'header,nav,fixid,fixclass',c:'fixed',y:95}
  e* - объекты для захвата, функция всеядна, можно указывать элемент, id, класс, тег..
  c - класс который здать элементам, по умолчанию fixed
  y* - высота скролла сверху, при котором необходимо фиксировать элементы

Пример:
//.fixed{position:fixed !important} уже есть в обязательной "шапке" CSS
header.fixed{left:0;right:0}
fix:{e:ff.byt(0,'header',0),y:95}

//------------------------------------------------------------------------------
Сохранение истории фокуса и обслуживание tomain:
focus:1
По умолчанию задаются перехваты клавишам:
Ctrl+` фокус на предыдущий элемент;
Ctrl+1 к меню (в том числе Ctrl+NumPad 1)

Если есть флаг tomain:1
Первое нажатие Tab (и Esc - закрыть) - перейти к основному содержанию
Создаётся кнопка с классом tomain, он есть в обязательной "шапке" CSS..
При нажатии на кнопку будет добавлен якорь maincontent на тег main или article и
будет выполнен переход..

//------------------------------------------------------------------------------
Галеря изображений fotobox:
fotobox:'class' или 1 (class=foto),
fotobox:{n:1} - не выводить дубли (где одинаковая ссылка на картинку)
fotobox:{c:'class',n:1},
Устанавливает обработку анимации на все найденные элементы..
Скрипт сначала опрашивает заголовки внутри контейнера затем h2 до..

Путь до картинки inc/img/.. при /inc/img/ от корня (движок сам подставит,
результат подстановки и видно сейчас, оставляйте пути без первого слэша /, если хотите
чтоб ссылки на сайт в подпапке корректно работал)

Примеры:
<h2>Заголовок</h2>
<div class="foto">
  <a href="/inc/img/?/0.jpg"><figure><img src="/inc/img/?/0s.jpg" alt=""><figcaption>text</figcaption></figure></a>
  <a href="/inc/img/?/0.jpg"><figure><img src="/inc/img/?/0s.jpg" alt=""><figcaption>text</figcaption></figure></a>
</div>
<div class="foto">
  <h2>Заголовок</h2> или <h3>Заголовок</h3>
  <a href="/inc/img/?/big.jpg"><img src="/inc/img/?/small.jpg" alt="text"></a>
  <a href="/inc/img/?/0.jpg"><img src="/inc/img/?/0s.jpg" alt="">text</a>
</div>
<a class="foto" href="/inc/img/?/big.jpg"><img src="/inc/img/?/small.jpg" alt="text"></a>

Размер больших картинок рекомендую делать 1300 x 700 px из соображения пропорциональности..

//------------------------------------------------------------------------------
Кнопка наверх (к началу страницы) [goup]
c - класс, по умолчанию goup
t - текст внутри кнопки, по умолчанию стрелка вверх ⇪
y - на какой высоте страницы отображать кнопку

Создаёт button с классом goup, и встроенной подсказкой из языкового пакета -
к началу страницы

Примеры:
goup:300 //эквивалентно goup:{y:300}
goup:{c:'goup',t:'⇪',y:300}

//------------------------------------------------------------------------------
Слайдер (карусель) [slide]
c - класс на который будет повешена анимация, по умолчанию slide,
    если указать movel, mover - анимация начнёт двигаться влево и в право.
t - промежуток между запуском анимации, по умолчанию 5000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации

При наведении мыши на блок с каруселью, срабатывает пауза.
Если блок не виден, анимация не проигрывается.

Устанавливает обработку анимации на все найденные элементы..

Примеры:
slide:1
slide:{c:'slide',t:5000,d:400,f:ff.aback},

<div class="slide mover">
  <div><img src="/inc/img/main/slide1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/slide2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/slide3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/slide4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/slide5.jpg" alt=""><p>test5</p></div>
</div>
<div class="slide movel">
  <div><img src="/inc/img/main/slide1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/slide2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/slide3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/slide4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/slide5.jpg" alt=""><p>test5</p></div>
</div>

//------------------------------------------------------------------------------
Переключаемые вкладки [tabs]

Пример:
tabs:1

<div class="tabs">
  <ul>
    <li>Вкладка 1</li>
    <li class="on">Вкладка 2</li>
    <li>Вкладка 3</li>
  </ul>
  <div>Содержание 1 вкладки..</div>
  <div>Содержание 2 вкладки..</div>
  <div>Содержание 3 вкладки..</div>
</div>

//------------------------------------------------------------------------------
Слайдер лента (карусель с блоками внутри) [tape]
c - класс на который будет повешена анимация, по умолчанию tape,
    если указать vert - то слайдер считается вертикальным,
    movel или movet, mover или moveb - анимация начнёт двигаться вверх или вниз.
t - промежуток между запуском анимации, по умолчанию 4000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации

При наведении мыши на блок с каруселью, срабатывает пауза.
Если блок не виден, анимация не проигрывается.

Устанавливает обработку анимации на все найденные элементы..

Примеры:
tape:1
tape:{c:'tape',t:4000,d:400,f:ff.aback},

<div class="tape mover">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/tape2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/tape3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/tape4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/tape5.jpg" alt=""><p>test5</p></div>
</div>
<div class="tape vert moveb">
  <div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
  <div><img src="/inc/img/main/tape2.jpg" alt=""><p>test2</p></div>
  <div><img src="/inc/img/main/tape3.jpg" alt=""><p>test3</p></div>
  <div><img src="/inc/img/main/tape4.jpg" alt=""><p>test4</p></div>
  <div><img src="/inc/img/main/tape5.jpg" alt=""><p>test5</p></div>
</div>

//------------------------------------------------------------------------------
CSS оформление элементов см. здесь

ссылка-якорь на onload














Куча

строк

чтоб

якоря

доставали

:)













Страница сгенерирована за 0.005818 секунды
На один процесс веб-сервера: 172 стр/сек.
Всего Apache может отдать: 44 032 стр/сек.
Выделено php памяти: 1.08 MB, real_usage: 2 MB

© Все права защищены 2004 - 2018
Карта сайта
Отслеживать изменения в Твиттере
Политика конфиденциальности

Браузер построил за сек.
Полное время сек.

С момента выгрузки предыдущей страницы из памяти браузера: сек.