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

Библиотека JavaScript

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

При всём обилии анимации, библиотека весит менее 50 Кб, для сравнения 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 - переменные

Статические переменные:
var ff = {
  ap: 0,
  at: 300,
  fse: '',
  w: 'walk',
  walke: 'a,button,label,textarea,input,select'

ff.ap: 0, //animation play(ing), переключатель заполняемый вручную, если необходимо 
  отследить статус анимации и не допустить запуск следующей.
ff.at: 300, //Длительность анимации по умолчанию.
ff.fse: '', //Ключ шифрования.
ff.w: 'walk', //Класс для элементов, внутри которых разрешено искать элементы
  при навигации стрелками, используется в ff.alert(), ff.menu(), ff.mes(), ff.over()
ff.walke: 'a,button,label,textarea,input,select', //Элементы по которым разрешено
  перемещаться при навигации стрелками в формах см. ff.walk, ff.walkto.

Динамически занимаемые переменные:
ff.host:'', //fsen.ru
ff.path: '/', //путь от корня, для вызова скриптов, если сайт в подкаталоге.
ff.lang: '', //текущий язык страницы берётся из <html lang="ru">.
ff.ield: '', //Сохраняет id элемента при при проверке капчи.
ff.touch: 0, //Это touch устройство (планшет, смартфон итп.)
ff.now: 0, //performance.now() засекает время для организации задержки(timeout) при
  прокрутке страницы.
ff.fixi: 0, //Зафиксирован ли элемент при прокрутке(scroll) страницы.
ff.fixt: 0, //Timeout при прокрутке(scroll) страницы, разгружает браузер.
ff.i: 0, //Сохраняет номер элемента при пермещении ff.walkto.
ff.kd: null, //ff.bind - сохраняет window.onkeydown.
ff.ku: null, //ff.bind - сохраняет window.onkeyup.
ff.dtf: null, //Сохраняет event.dataTransfer.files при отправке форм с вложением.
ff.goup: null, //Кнопка наверх (к началу страницы).
ff.oa: null, //Элемент вплывающей подсказки ff.alert.
ff.oo: null, //Блок/подложка (div class="overb") используемый для вычисления 
  видимого размера окна ff.alert.
ff.ob: null, //Блок/подложка (div class="overb") накрывающий страницу с кнопкой закрытия, 
  при выводе анимации меню и прочих.
ff.ot: null, //Временно занимаемый элемент, используется при анимации 
  под всплывающий блок ff.over.
ff.oi: null, //Элемент tooltip об ошибке заполнения поля ff.mest.
ff.tapes: [],//Массив объектов Слайдера ленты (карусель с блоками внутри).
ff.slides: [], //Массив объектов Слайдера (карусели).

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

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

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

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

ff.ae(n,f,e,с,r) - add/remove/EventListener

n - название события,
а - функция,
e - элемент или id(строка (через запятую если вешаем на нескольких сразу)) 
    1 = document, отсутсвие или 0  = window
с - useCapture = false или объект ({passive:!1})
r - удалить обработчик события = 0
 
Вешает слушателей на события
ff.ae('resize',function(){});//на window
ff.ae('resize',touchr,1);//на document
ff.ae('mousedown',function(){},obj,1);//на oбъект
ff.ae('mousedown',function(){},'myid',1);
ff.ae('mousedown',function(){},'myid,myid2',{passive:!1});//на oбъекты
ff.ae('mousedown',function(){},'myid,myid2',{passive:!1},1);//удалить
ff.ae('touchmove',drag.move,1,0,1);//удалить document

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

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

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

x - анимация:
0 или отсутствие параметра = случайный прилёт/улёт подсказки с разных сторон..
-11 - плавно изменяет прозрачность без перемещения (эффект fade-in/out)
Держите в уме сетку направлений движения:
8 1 2
7 9 3
6 5 4
Если задать 3 - подсказка прилетит справа и улетит направо..
Если задать 4.8 - прилетит справа снизу, улетит наверх налево.
Если задать -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(o1,o2,..) - установить элементам style.display='block'

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

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

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

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

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

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

ff.bind(function(e){ //onkeydown
  e=e||window.event;
  var k=e.keyCode;
  if(k==13)...
});
ff.bind(); //вернуть (unbind)

ff.bind(function(e){ //onkeyup
  e=e||window.event;
  var k=e.keyCode;
  if(k==13)...
},1);
ff.bind(0,1); //вернуть (unbind)

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

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

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

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

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

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

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

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

ссылка-якорь на функцию 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 - последний),
  если не указан возвращается массив всех найденных.

o=ff.byc(p,'class',0);

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

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

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

i=ff.byt(p,'i',0);

ссылка-якорь на функцию 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.dirname(p,l) - Возвращает имя родительского каталога

p - путь (path)
l - уровень (levels) = 1

Функция ведёт себя подобно PHP-шной.
console.log(ff.dirname('\\etc\passwd')); //= .
console.log(ff.dirname('/etc/passwd/word/')); //= /etc/passwd
console.log(ff.dirname('/etc/passwd/word/in.php')); //= /etc/passwd/word
console.log(ff.dirname('/etc/')); //= /
console.log(ff.dirname('.')); //= .
console.log(ff.dirname('/usr/local/lib',2)); //= /usr

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

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) после десятичного знака ("запятой").
ff.float(' 123,456 руб'); //123.456
ff.float(' 123,456 руб',2);//123.45

ссылка-якорь на функцию 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.get(n,s) - аналог PHP $_GET

n - название искомой перменной
s - сортировать результат, по умолчанию выключено = 0

Ищет в адресе(?r=15&k=16) ключ n, если его нет или он пустой - вернёт null

if(ff.is(ff.get('r')))alert(ff.get('r'));
или
var r=ff.get('t');
if(ff.is(r))alert(r);

Без параметра n - возвращает массив ключ значение - g=ff.get();
Отсортировать результат - g=ff.get(null,1);

g=ff.get(null,1);
for(e of g)console.log(e[0] + ' ' + e[1]);
for([key, value] of g)console.log(key + ' ' + value);

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

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.isi(v) - является ли переменная целым числом (integer)

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

if(ff.isi('143')){}

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

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

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

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

ff.ismail(v) - проверяет email

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

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

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

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

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

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="">
<input type="text" onkeyup="ff.kd(event,13,function(){ff.g('idbutton').click()})" 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.kis(p,n,o) - верно ли введена капча

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

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

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

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

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

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.lis(s) - вернуть язык ввода

Функция задумана для определения языка ввода в полe пароля.
Удаляет все символы кроме букв и пытается определить язык по последней.

s - текст
В данный момент умеет определять только русский и английский языки 'ru','en'.
Если не сможет определить - вернёт пустую строку.

<textarea onkeyup="document.title=ff.lis(this.value)" rows="1" cols="1"></textarea>

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

ff.mask(e,m) - телефон согласно маски

s - элемент
m - маска, по умолчанию '+7 (___) ___-__-__'

|t~onfocus=``ff.mask(this)`` onkeyup=``ff.mask(this)``^Телефон *^+7 (___) ___-__-__|

<input type="text" value="" placeholder="Номер телефона" onfocus="ff.mask(this)" onkeyup="ff.mask(this)" onchange="...">

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

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

Вызов ff.menu связан с фокусом, вызывайте с кнопок, ссылок или иных активных элементов
(не считая вызова с клавиатуры).

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

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

u - прилипать к краям слева-справа и при направлениях 1, 5 к верху/низу
  реагирует только на единицу,
  отрицательное число (-1, -2) - оставить элемент в position:fixed
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
  • Сообщение *| //текстовое поле
    //добавим своё значение и произвольную строку

    Сообщение *==myvalue~onclick=``alert(`txt`)``
  • //добавить в создаваемый тег произвольную строку
    Представьтесь *~name=`forPOST` onclick=``alert(`txt`)``|
    t~onclick=``alert(`txt`)``^Телефон|
    //Имейте ввиду, встречающий скрипт form.php проигнорирует переданное
    зашифрованное поле с произвольным name=, необходимо самостоятельно
    встречать в скрипте $forpost=aPOST('forPOST',1); (см. /deny/cry.php)


    //пример одного и того же:
    ^^<button title=`txt` onclick=``alert(`txt`)``><i class=`name`>t</i></button>|
    ==
    ~title=`txt` onclick=``alert(`txt`)``^button^<i class=`name`>t</i>|
  • %^E-mail или телефон *| //поле с проверкой ввода - email или телефон
    добавляет полю class="fmailp"
  • @^E-mail *| //поле с проверкой ввода - email
    добавляет полю class="fmail"
  • *^Пароль *| //указание вывести input type="password"

    Следом можно указать:

    ^kbd| //запустит механизм распознавания языка ввода
    и выведет в соответствующий тег, см. css .mes .fpass+kbd
    размещать следует сразу после поля из-за css (можно и по другому сделать).


    ~role=`button` title=`Показать пароль` onclick=``ff.mesp(this,`fa fa-eye`,`Показать пароль`,`fa fa-eye-slash`,`Скрыть пароль`)``^var^<i class=`fa fa-eye`></i>|
    //Найдёт предыдущий input и сменит тип, тем самым показав пароль за звёздочками
    в виде текста, см. css .mes var
  • h^Скрытое поле^myid~value| //для внешней вставки данных напимер..
    myid - для обращения к полю по id (под этим же именем придёт в post)
    value - значение
    Я даю 2 секунды на анимацию, перед тем как вставить данные в всплывшую форму.
    h^Название
    h^Название^myid
    h^Название^~value
  • c^Флажок checkbox^myid~value| myid - для обращения к полю по id (под этим же именем придёт в post)
    value - значение
    c^Название
    c^Название^myid
    c^Название^~value
    c~onchange=``this.value=this.checked?1:0``^Подписаться на новости^~0
    добавляет для label class="fcbox"
  • s^Язык^ru~ru_Русский~en_Английский| //выпадающий список(select)
    Строим элемент select^ //s~onchange=``ff.sc(`on`,this.value)``^
    Текст заголовка label^
    ключ(value) сравнения для выбора пункта как selected~
    option~option~option~option~option..
    может быть в формате только значение(value), оно подставится и в текст
    или ~ru_Русский == значение(value) _ текст option
  • f^Приложить файлы^Загрузить| //input type="file" multiple (скрытый),
    по умолчанию кнопка Обзор... или указанное ^Загрузить
    выводит список выбранных файлов..
  • d^Приложить файлы^Перетащите файлы или нажмите^загрузить|
    Поле загрузки файла с возможностью Drag-and-drop,
    т.е. забросить файлы в поле из папки или нажать кнопку для стандартного диалога.
    По умолчанию кнопка Обзор... или указанное ^загрузить
  • #^Введите код *^^Показать другой| //капча, последнее значение ссылки..
  • b^отправить| //кнопка для отсылки формы - ff.mesend
  • ^small^Нажимая на кнопку «Отправить», даю согласие на
    <a href=`!privacy` target=`_blank`>обработку персональных данных</a>.
    //восклицательный знак перед ссылкой означает добавить текущий путь ff.path
    (/ или https://fsen.ru/sitefolder/ т.е. если сайт в подкаталоге)
','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^отправить');
echo '`|eval`|ff.mes(1,\'^h2^Заголовок|!|Сообщение *==myval~onclick=``alert(`txt`)``\',\'login\')';

Если необходимо создать форму на странице и отослать через этот же механизм:
<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.kis(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>

  <label for="fse17">Язык</label>
  <select onchange="ff.sc('lang',this.value)" id="fse17">
    <option value="ru" selected>Русский</option>
    <option value="en">Английский</option>
  </select>

  <label for="fse18">Пароль</label>
  <input type="password" value="" id="fse18" class="fpass" onkeyup="ff.v(ff.next(this,'kbd',1),ff.lis(this.value))">
  <kbd></kbd>
  <var role="button" title="Показать символы за звёздочками" onclick="ff.mesp(this,'fa fa-eye','Показать символы за звёздочками','fa fa-eye-slash','Скрыть символы')"><i class="fa fa-eye"></i></var>

  <label for="fse19" class="fcbox">Подписаться на новости</label>
  <input type="checkbox" value="0" onchange="this.value=this.checked?1:0" id="fse19">

  <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.mesp(e,a,b,c,d) - переключает тип поля input

Служебная для ff.mes для кнопки показать/скрыть пароль.
Заменяет у вложенного элемента i className с "a" на "c",
ищет предыдущий input и меняет тип type="password" на type="text"
e - текущий элемент (см. ff.mes - *^Пароль *|)
a - className первого состояния password
b - всплывающая подсказка (title - Показать символы за звёздочками)
c - className второго состояния text
d - всплывающая подсказка (title - Скрыть символы)

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

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

Служебная для ff.mesend.
t - элемент или id (textarea,input,select)
e - своё сообщение об ошибке или
  попытается взять из формы по input class="err" или
  из языкового пакета  fill: 'Заполните обязательное поле'.
p - родительский элемент блока формы для поиска ошибки по class="err"
  по умолчанию родительский t.parentNode

Запуск без параметров удаляет предыдущее сообщение.
ff.mest()
ff.mest(ff.g('myid'))
ff.mest(ff.g('myid'),'myerr')
ff.mest(ff.g('myid'),0,parent)

ссылка-якорь на функцию 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(o1,o2,..) - установить элементам style.display='none'

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

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

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

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

e - элемент
n - название тега или '' чтоб взять следующий (необязателен)
c - зациклить до встречи первого совпадения, по умолчанию 0
  (поиск соседнего элемента с требованием совпадать по тегу)
Вернёт false если не найден

d=ff.next(e,'div');
или
d=ff.next(e,'div,p,ul');

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

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

v* - значение
x - знаков после запятой (по умолчанию 2)
d - дробная часть разделяется через точку '.' по умолчанию
s - разделитель тысяч (по умолчанию пробел)


Вернёт строку, числа разбиваются по 3 знака

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

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

Булевая - возвращает true, false
e - элемент
v - значения через запятую, если передана пустая строка '' или
  не передана вернёт true (для обеспечения внутренней функциональности).

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

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

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

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

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

ff.onload(function(){});

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

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

Служебная. Разгружает браузер, предотвращая излишние частые вычисления..
Обрабатывает кнопу наверх 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,e) - всплывающий блок с затемнением фона

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

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

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

Так же происходит установка клавиш управления 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,c) - получить предыдущий элемент

e - элемент
n - название тега или '' чтоб взять следующий (необязателен)
c - зациклить до встречи первого совпадения, по умолчанию 0
  (поиск соседнего элемента с требованием совпадать по тегу)
Вернёт false если не найден

d=ff.prev(e,'div');
или
d=ff.prev(e,'div,p,ul');

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

ff.props(e,s) - получить свойства элемента

Служебная, для отладки.
e - элемент
s - разделять строки (по умолчанию '\n')

console.log(ff.props(e));
alert(ff.props(e));

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

ff.quotes(v) - замена кавычек

Служебная, заменяет приходящие `` и ` на " и '
Так же может подставить путь(ff.path) ссылкам =`! или =\`!
ссылка-якорь на функцию ff.quotes

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 - обязательно в начале ответа!

Вызвать выполнение скрипта eval:
echo '`|eval`|alert(`js eval`)';
echo 'текст<input type="hidden" id="fseval" value="func()">';
echo '<input type="hidden" id="fseval" value="ff.v(`sign`,`<button class=``butorange``>text</button>`)">';
`` заменятся на "
` заменятся на '

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

А вот как выполнить дополнительный запрос после отсылки:
elseif(1600000000==$mesid)echo '`|rise`|<p role="alert">'.$out.'</p><input type="hidden" id="fseval" value="roistatGoal.reach({leadName:`Заявка с сайта`,text:`Заявка 1`,name: `'.$name.'`,phone:`'.$phone.'`});">';

ссылка-якорь на функцию 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,r,z,s) - установить cookie и обновить страницу

n* - название
v* - значение
r - список удаляемых/заменяемых переменных $_GET из адреса
z - заменить переменные
s - сортировка, включена по умолчанию = 1
//время жизни cookie сек.(месяц по умолчанию) см. ff.c

Установить:
ff.sc('name','value');

Установить с удалением/заменой параметров $_GET:
ff.sc('name','value','remove,me');
ff.sc('name','value','t'); //fsen.ru?t=12312312 => fsen.ru
ff.sc('name','value','old','new');
ff.sc('name','value','replace,remove,replace','new,null,new2'); //null==remove

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

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

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

Возвращает объект {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(ms) - Unix Time Stamp

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

В случае передачи флага ms вернёт время в микросекундах ff.time(1)

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

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

e - элемент или 'id'
v - значение
Функция определяет сама где значение у элемента в value или в innerHTML..
Приоритет получения/задания значений: e.getAttribute('value'), e.value, e.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,h) - получить соседний элемент

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

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

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

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

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

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

Используется для перемещения по элементам формы.
e - элемент или 'id' внутри которого идёт поиск
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input,select'
i - номер элемента, который взять, по умолчанию 1-й
q - если не указано или 0 - не сбрасывать счётчик при поиске..
h - брать в том числе невидимые элементы (необходим для ff.mesend 
    для захвата input type="hidden")

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

var a=fs.ae(); //document.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(s) - аналог php base64_encode

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

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

fc.b(s) - аналог php base64_decode

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

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

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

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

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

var fd - обрабатывает перетаскивание объектов (Drag-and-drop)

Служит для создания "бегунков" (скроллбаров) и прочих элементов связанных с 
тасканием объектов на странице.
Умеет ограничивать возможную область перетаскивания.

(Работает на touch устройствах.)

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

fd.init(e,minX,maxX,minY,maxY) - установить Drag-and-drop

e - элемент или 'id'
minX,maxX,minY,maxY - ограничения по осям. (не обязательные)

fd.init(e, 0, ff.wh(e).w - 20, 59, 59);
e.ondrag = e.ondragend = function(x, y){ calc(x); }

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

fd.winit(e,f) - установить обработку колёсика мыши (MouseWheel)

e - элемент или 'id'
f - функция обработки

fd.winit(e.parentNode, function(event){
  var x, i = fd.wheel(event);
  if (i !== !1) {
    x = ff.int(e.style.left);
    if (i == -1){ //влево, колёсико крутится вверх
      x -= 15;
      if (x < 0) x = 0;
    } else { //вправо, i == 1 колёсико крутится вниз
      x += 15;
      i = ff.wh(e.parentNode).w - 20; // естественно логичнее заранее посчитать
      if (x > i) x = i;                         // и по замыканию передать значение 
    }
    e.style.left = x + 'px';
    calc(x);
  }
});

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

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

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

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

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

var fo - выпадающий список [combobox]

Служебный объект, обслуживает аналог стандартных элементов select -> combobox 
  с адаптацией для слабовидящих (WCAG 2.0, ГОСТ Р 52872-2012) и возможностью поиска.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS оформление элементов см. здесь.
//------------------------------------------------------------------------------
ff.onload(function() {
  //По умолчанию включены:
  ff.init({focus:1,fotobox:1,tomain:1});
});

ff.onload(function() {
  //Возможны:
  ff.init({
    accordion:1,
    combobox: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

Если необходимо воспользоваться элементами несколько раз:
ff.onload(function() {
  ff.init({
    accordion: 1,
    combobox:1,
    focus: 1,
    fotobox: 1,
    goup: 300,
    tomain: 1
  },
  {combobox:'combo'},
  {
    accordion:'ac2',
    combobox:'combo2'
    slide:{c:'slide2', t:5000,d:400,f:ff.aback},
    tabs:'tabs2',
    tape:{c:'tape2',t:2500,d:500,f:ff.aback},
    fotobox:{c:'foto2'}
  });
});
Обратите внимание!
- focus и tomain в единичном экземпляре, и должны в одном объекте вызываться вместе.
  (скрипт перевыполнит последние установки из последнего объекта (где заданы))
- goup:{c:'mygoup',t:'/',y:300}, - в единичном экземпляре (в целях оптимизации) 
  из-за отслеживанием прокрутки страницы..

//------------------------------------------------------------------------------
Эффект аккордеона [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>

//------------------------------------------------------------------------------
Выпадающий список [combobox]:
//------------------------------------------------------------------------------
combobox:'class' или 1 (class="combobox")

Компонент combobox (объект fo={}) аналог стандартного элемент select,
  с возможностью поиска и адаптацией для слабовидящих.
Описание и пример смотрите здесь.

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

Пример:
//.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 - функция анимации
u - вложить элементы управления на уровень контейнера, а не в него..

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

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

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

<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  //ищет class 'tabs'
или
tabs:'tabs2'

<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>

//------------------------------------------------------------------------------

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














Куча

строк

чтоб

якоря

доставали

:)













Страница сгенерирована за 0.141698 секунды
На один процесс веб-сервера: 7 стр/сек.
Всего Apache может отдать: 1 792 стр/сек.
Выделено php памяти: 699.49 KB, real_usage: 2 MB

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

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

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