Собрал наиболее часто используемые анимационные эффекты в библиотеку, она представляет из себя нечто вроде аналога / замены jQuery и прочих, без перекрытия методов и лишних заморочек (без конфликтов в случае подключения сторонних API). Постарался сделать её максимально простой для понимания и охватить все необходимые функции, чтоб была возможность быстро и сжато создавать любую дополнительную функциональность. Естественно всё кроссбраузеорно и работает без лагов и глюков, но древние браузеры типа IE8- в пролёте. (Статистика склоняется к 0,1% таких пользователей, полагаю это просто чьи-то древние боты так представляются..)
При всём обилии анимации, библиотека весит около 59 Кб, для сравнения, очень популярная jquery-3.6.1.min.js = ~88 Кб! И зачастую, чтоб подцепить какую-нить анимацию, потребует дополнительного сценария (подключения дополнительных библиотек и увеличения веса и запросов к серверу)..
Функции:
* помечены обязательные параметры при передаче параметров в функции, остальные можно пропускать, будут взяты значения по умолчанию.. Служебные функции таким цветом.
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
Статические переменные:
var ff = {
ap: 0,
at: 300,
fse: '',
w: 'walk',
walke: 'a,button,label,textarea,input,select,combobox'
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,combobox', //Элементы по которым разрешено
перемещаться при навигации стрелками в формах см. 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]
n - название события,
f - функция,
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
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.atrcut(s,a) - получить значение атрибута и вырезать его из строки
s - строка
a - название искомого атрибута
Возвращает массив [s:'исходная строка с вырезанным атрибутом', a:'значение атрибута']
s='<intut onkeyup="myfunc()">';
a=ff.atrcut(s,'onkeyup');
if(a.a!=''){//найдено значение, что-то делаем..
a.a+=';myfunc2()';
s=s.s;//заменяем поданную строку на отчищенную от атрибута
}
ссылка-якорь на функцию ff.atrcut
ff.b(o1,o2,..) - установить элементам style.display='block'
Параметрами передаётся элемент или строка с id элемента
ff.b('id');
ff.b('id1','id2');
ff.b(obj1,obj2);
ссылка-якорь на функцию ff.b
Функция запоминает предыдущее состояние и возвращает к нему повторным
вызовом без параметров
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
Функция принимает объект свойств:
Все параметры необязательные.
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.css(n,p,v,b) - изменить свойство в css
n - название селектора класса итп '.sr-only'
p - название свойства 'width'
v - задаваемое значение '100px'
b - остановиться (break) после первого найденного правила (1 по умолчанию)
Пример:
ff.css('.overb','backgroundColor','rgba(255,0,0,.7)');
Для данного действия есть вспомогашка:
ff.overb('rgba(255,0,0,.7)');
ссылка-якорь на функцию ff.css
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.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
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
Вернёт элемент по 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
Булевая, может принимать несколько переменных. (аналог php isset)
Особенно полезна в случае прихода в функцию переменной = 0..
if(ff.is(fl[l],fl[l][n])){}
ссылка-якорь на функцию ff.is
ff.isf(v) - является ли переменная числом с плавающей запятой (float)
Булевая - возвращает true, false
e - элемент
Проверяет visibility==hidden или вычисляет размеры объекта,
при display=none элемент не отображается и его размеры = 0
ссылка-якорь на функцию ff.ish
Булевая - возвращает 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,v) - всплывающее/выезжающее меню
Вызов ff.menu связан с фокусом (можно обойти через u=2), вызывайте с кнопок,
ссылок или иных активных элементов (не считая вызова с клавиатуры).
Если есть необходимость при вёрстке уложить в контейнеры, для того чтоб
позиционировать группы меню при разном расширении, добавьте класс 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 - прилипать без учёта точки вызова (например чтоб сделать выезжающий блок, попап.)
отрицательное число -1, -2, -3(не прилипать) - оставить элемент в position:fixed
e - элемент - меню или 'id', по умолчанию берётся первый <nav>
t - длительности анимации = 400 мс. (1000 мс = 1 сек)
-400 (минус) отменяет установку фокуса на первую ссылку во время появления.
v - добавлять отступ сверху (и переустанавливать отстпы сверху и слева после анимации)
в случае растягивания блока за счёт абсолютной/фиксированной позиции:
position:absolute;margin:auto;left:20px;right:20px;top:20px;bottom:20px;
(блок растянут на весь экран с отступами)
Если меню вмещается будет выведено под кнопкой его вызывающей,
если не вмещается по уровню кнопки и если и тут не вместилось то верха экрана.
Ещё скрипт пытается найти первый button и подвешивает на него функцию закрытия
или создаёт кнопку и добавляет её внутрь переданного элемента e ('id'). class=fbn
В onclick можете добавить свои действия, выполнятся после анимацией скрытия,
если потребуется выполнить до - добавьте кнопке класс jsbefore.
Чтоб она ездила вместе с блоком перебейте свойство -
.myblock .fbn{position: absolute !important}
или
.myblock .fbn{width:40px;height:40px;top:8px !important;right:5px !important;
position:absolute !important;z-index:3;opacity:1 !important;box-shadow:none !important;}
Так же происходит установка клавиш управления 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,g) - всплывающая/выезжающая форма для обратной связи
z - mesid - id формы для обработки на стороне сервера,
используйте 1525605447, в будущем будет генератор в ПУ сайта.
t - строка описывающая поля через разделитель | внутри разделитель ^
* - обязательное поле для заполнения пользователем (required)
** - обязательно одно из помеченных так полей (или или)
`` заменятся на "
` заменятся на '
Синтаксис: ^тег^значение (вкладывает значение внутрь тега..)
^^произвольный html код
u - URL по которому отправить запрос, по умолчанию inc/form.php
c - название класса, который добавить всплывшему блоку, по умолчанию mes
e - текст ошибки, по умолчанию из языкового пакета берётся:
f.l('fill') - Заполните обязательное поле
g - id или класс элемента на который поставить фокус (по умолчанию - на 1 элемент)
Проще на примере всех возможных свойств показать:
ff.mes(1525605447,'
$| //оставить блок в позиции fixed после анимации появления
$0| //установить top в 0 (или 20px...)
x| //вложить кнопку закрытия внутрь блока class="fbn fbx"
x^myclass^Закрыть [Esc]| //заменить class и title на свои Чтоб кнопка ездила вместе с наполнением .mes .fbn{position:absolute}
^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
Сообщение *| == a^Сообщение *| //текстовое поле textarea
//добавим своё значение и произвольную строку
Сообщение *==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"
Следом можно указать:
^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| или
h~name=``myname``^txt^myid~value| //для внешней вставки данных напимер..
myid - для обращения к полю по id (под этим же именем придёт в post)
value - значение
Я даю 2 секунды на анимацию, перед тем как вставить данные в всплывшую форму.
h^Название
h^Название^myid
h^Название^~value
c^Флажок checkbox^myid~value| или
c~name=``myname``^Флажок 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
//Можно добавить своё событие до отсылки формы
|*~id=``myid`` onkeyup=``ff.kd(event,13,function(){ff.g(\`mysend\`).click()})``^txt *|^kbd|
|b~onclick=``my()`` id=``mysend``^txt|
^small^Нажимая на кнопку «Отправить», даю согласие на
<a href=`!privacy` target=`_blank`>обработку персональных данных</a>. //восклицательный знак перед ссылкой означает добавить текущий путь ff.path
(/ или https://fsen.ru/sitefolder/ т.е. если сайт в подкаталоге)
','inc/form','mes','Заполните обязательное поле');
Анимация появления будет случайной.. Передаваемые данные шифруются..
Я постарался максимально затруднить жизнь спамерам..
Так же происходит установка клавиш управления 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" tabindex="-1" 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
Служебная. Разгружает браузер, предотвращая излишние частые вычисления..
Обрабатывает кнопу наверх g - goup, фиксацию элемента f - fix,
объект hash - h (эмуляция многостраничности для одностраничных сайтов),
объект fx - x (анимация появления блоков для сайтов визиток).
ссылка-якорь на функцию ff.onscr
Проверяет помещается ли объект в окно и отдаёт координаты в зависимости от
направления прилёта..
n - результат без отступа (экран/100)
ссылка-якорь на функцию ff.otly
ff.ove - выполняется при закрытии всплывающих окон
Служебная. Разустанавливает ff.bind клавиш и переходит к последнему
элементу до запуска окон анимации - меню итп.
ссылка-якорь на функцию ff.ove
ff.ovy(x,h) - служебная для анимации
Проверяет поданные направления x анимации разбивая float, если он подан
в качестве направления и в зависимости от того скрыт h ли элемент отдаёт
направления движения..
ссылка-якорь на функцию ff.ovy
ff.over(t,x,u,c,e,g) - всплывающий блок с затемнением фона
Так же является служебным для ff.mes. role=dialog
t - текст / html вставляемый внутрь блока..
~| в начале - оставить элемент в position:fixed
~0| установить top в 0 (или 20px...)
x| в начале - не создавать кнопку закрытия в блоке подложке overb
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()}
g - id или класс элемента на который поставить фокус (ff.mes по умолчанию - на 1 элемент)
Так же происходит установка клавиш управления ff.bindefссылка-якорь на функцию ff.over
ff.overb(v,n,p) - изменить свойство в css .overb
Вспомогательная, вызывает ff.css()
Если понадобится динамически менять цвет фона подложки при
выведении всплывающего меню ff.menu(), ff.over() итп.
v - задаваемое значение 'rgba(255,0,0,.7)'
n - название селектора класса итп (по умолчанию '.overb')
p - название свойства (по умолчанию 'backgroundColor')
Примеры:
ff.overb('rgba(255,0,0,.7)');
ff.overb('100px','.myclass','width');
ссылка-якорь на функцию ff.overb
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;
.getBoundingClientRect()
возвращает размер элемента и его позицию относительно viewport
(часть страницы, показанная на экране, и которую мы видим).ссылка-якорь на функцию 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.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,e,r,z,s) - установить cookie и обновить страницу
n* - название
v* - значение
e - время жизни cookie сек.(0 = месяц по умолчанию) см. ff.c
r - список удаляемых/заменяемых переменных $_GET из адреса
z - заменить переменные
s - сортировка, включена по умолчанию = 1
Установить:
ff.sc('name','value');
Установить с удалением/заменой/добавлением параметров $_GET:
ff.sc('name','value',90,'remove,me');
ff.sc('name','value',0,'t'); //fsen.ru?t=1612863384838 -> fsen.ru
ff.sc('name',1,60,'t',ff.time(1)); //fsen.ru -> fsen.ru?t=1612863384838
ff.sc('name','value',0,'old','new');
ff.sc('name','value',0,'replace,remove,replace','new,null,new2'); //null==remove
Удалить:
ff.sc('name','');
ссылка-якорь на функцию ff.sc
ff.scr() - получить позицию прокрутки(scroll) страницы
e - элемент или 'id'
t - отступить сверху, по умолчанию 9px
y - переключатель:
к началу страницы - ff.scrto(0,0,1);
к концу - ff.scrto(0,0,2);
d - длительность анимации прокрутки (duration) по умолчанию 300мс (ff.at)
ff.scrto(e);
ff.scrto('id',50);
ff.scrto(0,0,1,400)
ссылка-якорь на функцию ff.scrto
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(o,-1)
Если конец выделения меньше позиции начала,
будет автоматически прибавлена позиция начала,
таким образом можно не вычислять длину..
ff.sel(o,-1,1) //каретку на предпоследний символ и выделить последний
ff.sel(o,7,1) //каретку на 7 символ и выделить 8-й.Если подать строку вместо цифры, то s и e возьмут длину строки поля за значение,
т.е. произойдёт установка каретки в конец.
ff.sel(o,2,'e') //каретку на 2 символ и выделить до конца
ff.sel(o,'e') //установить каретку в конец
Задержка 200мс перед вводом после установки фокуса,
заметил бывают сбои и установка происходит в начало.
ссылка-якорь на функцию ff.sel
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
Возвращает текущую метку времени 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 - установить фокус на элементе = 1
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,f,h) - получить элемент
Используется для перемещения по элементам формы.
e - элемент или 'id' внутри которого идёт поиск
n - разрешённые элементы, по умолчанию ff.walke='a,button,label,textarea,input,select'
i - номер элемента, который взять, по умолчанию 1-й
q - если не указано или 0 - не сбрасывать счётчик при поиске..
f - установить фокус на элементе = 1
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.onload(function() {
ff.init({
...
fotobox: 1, //class=fotoили
fotobox: 'myclass',
или
fotobox: {n:1} //не выводить дубли (где одинаковая ссылка на картинку)или
fotobox: {c:'myclass',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 scroll">
<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>
scroll - показывать изображения в полном размере, с полосами прокрутки внутри блока.
Размер больших картинок рекомендую делать 1300 x 700 px из соображения
пропорциональности..
ссылка-якорь на fb
var fc - шифрование
Объект "жопной боли" криптоаналитика при прослушивании трафика в сети.
Полная функциональность не описывается..
Так же защищает данные от возможного искажения..
ссылка-якорь на fc
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
fd.bindswipe(o,f) - управлением пальцем (для touch устройств)
o - элемент или 'id'
f - функция обработки
f = f || function(d){};
d - направление свайпа пальцем: 1 = up, 2 = right, 3 = down, 4 = left
Пример:
if(ff.touch)fd.bindswipe('myid',function(d){
if(d==1)doswipeup();
...
});
ссылка-якорь на функцию fd.bindswipe
var fe - слайдер (карусель) [slide]
ff.onload(function() {
ff.init({
...
slide: 1,
или
slide: {c:'slide',t:5000,d:400,f:ff.aback,u:1},
или
slide: {c:'newsslide',t:5000,d:400,u:'1,leftclass,rightclass',e:function(t){newsslide(t)}},
...
});
});
c - класс на который будет повешена анимация, по умолчанию slide,
если указать movel, mover - анимация начнёт двигаться влево и в право.
t - промежуток между запуском анимации, по умолчанию 5000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации
u - 1 = разместить кнопки управления выше родительского элемента,
чтоб была возмозность за блок выносить.
Если написать так: '1,leftclass,rightclass' заменятся классы кнопок навигации.
'1,leftclass,rightclass,1' - скрывать кнопки управления при анимации.
b - функция до начала проигрывания анимации.
e - функция в конце проигрывания анимации, для дозагрузки элементов например.
При наведении мыши на блок слайдера, срабатывает пауза.
Если блок не виден, анимация не проигрывается.
Устанавливает обработку анимации на все найденные элементы..
Примеры:
//class="slide swipe" - обрабатывать управление пальцем (swipe) на touch устройствах.
<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>
Сделаем дозагрузку элементов слайдера:
Загрузим 3 блока, первый из конца и два из начала по 5 новостей в блоке,
при смещении влево будем вставлять блок в начало из конца, вправо из начала
новостной ленты в базе данных.
JS:
var leftloaded=0;
ff.onload(function() {
ff.init({
focus: 1,
fotobox: 1,
tomain: 1
...
},{
slide: {c:'newsslide',u:'1,slideleft,slideright',e:function(t){newsslide(t)}}
});
var i, z = ff.slides.length;
for (i = 0; i < z; i++){
if(ff.slides[i].class=='newsslide'){
if(ff.slides[i].s>1){//количество блоков div 0..n
leftloaded=1;
ff.slides[i].go(1);//сдвигаем на 1 блок вправо без анимации
//или ff.slides[i].move(0); с анимацией направо
//или ff.slides[i].ic(7); если требуется дальше
} break;
}
}
});
function newsslide(t){
var y=2;
if(t.x==0)y=1;//догружаем блок в начало //t.x - текущая позиция
else if(t.x==t.s)y=0;//догружаем блок в конец
if(y!=2)ff.send('inc/news','more='+(t.s+1)+'&index='+t.index+'&tofirst='+y+'&leftloaded='+leftloaded,'newsout');
}
PHP:
inc/styles/def/_.php:
include D.'inc/news.php';
inc/news.php:
if(isset($_POST['more'])){//забор страниц далее через post (Показать ещё)
define('D',preg_replace('#/inc$#','/',dirname($_SERVER['SCRIPT_FILENAME'])));
$s=dirname($_SERVER['PHP_SELF']);if('/'!=$s)$s.='/';
$s=str_replace('/inc/','/',$s);
define('R',$s);//root
}
include D.'deny/sql.php';
dbConnect();
//sql может не соответствовать текущей кодобазе движка, проверяйте функции..
$limit=5;//сколько новостей в одном блоке..
$s=$p='';
if(!isset($_POST['more'])){//1-е результаты
$r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
$count=(int)$r[0];
$lim2=$limit*2;
$i=$x=0;
if($count>=$lim2){
if($count>$lim2){//>10 из конца забираем 5 шт или сколько осталось
$x=$count-$lim2;
if($x>$limit)$x=$limit;
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT '.$x) or _exit();
while($r=$q->fetch_row()){
++$i;$p=slider($r).$p;//функция упаковки запроса например p, figure итд, без div!
if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}//если вывод по 1 - обязательно
} if(''!=$p)$s.='<div>'.$p.'</div>';
}//из начала 10 шт
$i=0;$p='';
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$lim2) or _exit();
while($r=$q->fetch_row()){
++$i;$p.=slider($r);
if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}
} if(''!=$p)$s.='<div>'.$p.'</div>';
}else{//нехватка блоков, выводим всего два блока <= 10 шт
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$lim2) or _exit();//из начала 10 шт
while($r=$q->fetch_row()){
++$i;$p.=slider($r);
if($limit==$i){$s.='<div>'.$p.'</div>';$i=0;$p='';}
} if(''!=$p)$s.='<div>'.$p.'</div>';
}
echo '<div class="newsslide">'.$s.'</div><div id="newsout" class="skip"></div>';
}else{//забор страниц далее через post (Найти ещё)
$start=(int)$_POST['more'];if(0>$start)$start=0;
$i=(int)$_POST['index'];
$r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
$count=(int)$r[0];
$start=$start*$limit;//количество загруженных новостей в блоках по 5 шт..
if($start>=$count)_exit();//вся лента новостей загружена
$tofirst=(int)$_POST['tofirst'];
$leftloaded=(int)$_POST['leftloaded']*$limit;
if($tofirst){//вставить блок в начало {i:1,..}
$start=$leftloaded;
$x=$count-$start;
if($x<$limit)$limit=$x;
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT '.$start.','.$limit) or _exit();
while($r=$q->fetch_row())$p=slider($r).$p;
}else{
$start=$start-$leftloaded;//уже предзагружены - не считать
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.$start.','.$limit) or _exit();
while($r=$q->fetch_row())$p.=slider($r);
}
if(''!=$p)echo '`|eval`|(function(){'.($tofirst?'leftloaded++;':'').'var o=ff.ce({i:'.$tofirst.',p:ff.slides['.$i.'].o,t:`'.$p.'`});ff.n(o);ff.slides['.$i.'].update();})();';
//в функцию можно не заворачивать, это чтоб var o не попало в глобальную видимость и чего-нить не стёрло, мало ли используете..
}
ссылка-якорь на fe
var fh - эмуляция многостраничности для одностраничных сайтов [hash]
Используется для одностраничных сайтов, дабы сэмулировать многостраничную
структуру для поисковиков.
Занимается управлением document.title, history.state итп. на основании
якорей на странице.
Прокручивает к якорю при нажатии, и при прокрутке страницы переключает
заголовки итд..
Ссылки "подцвечивает" классом 'da' по умолчанию или любым
желаемым hash: 'myclass',
Место срабатывания в каждом блоке можно подкорректировать путём задания
позиции конкретного якоря(ссылки) или массово под конкретное разрешение..
.lt{position:relative;top:-120px}
Пример использования (название для document.title возьмёт из ссылок):
<nav>
<a href="/#about">О нас</a>
<a href="/#services">Услуги</a>
<a href="/#contacts">Контакты</a>
</nav>
<a id="about" class="lt"></a><br><h2>О нас</h2>
<p>Наша компания...</p>
<a id="services" class="lt"></a><h2>Услуги нашей компании</h2>
<p>Наши услуги...</p>
<a id="contacts" class="lt"></a><h2>Контакты</h2>
<p>Наши контакты...</p>
ff.onload(function(){
ff.init({
...
hash: 1,
или с указанием времени прокручивания
hash: 400,
или с указанием класса для активной ссылки
hash: 'myclass',
или
hash: {t:400},
или
hash: {c:'myclass',t:400},
...
});
});
ссылка-якорь на fh
var fo - выпадающий список [combobox]
Служебный объект, обслуживает аналог стандартных элементов select -> combobox
с адаптацией для слабовидящих (WCAG 2.0, ГОСТ Р 52872-2012) и возможностью поиска.
Метод активации и прочее смотрите в onloadссылка-якорь на fo
var fs - операции с фокусом и первое нажатие tab
Служебная.
Первое нажатие tab - перейти к основному содержанию
Метод активации и прочее смотрите в onloadссылка-якорь на fs
var ft - слайдер лента (карусель с блоками внутри) [tape]
ff.onload(function() {
ff.init({
...
tape: 1,
или
tape: {c:'tape',t:2500,d:500,f:ff.aback},
или
tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
...
});
});
c - класс на который будет повешена анимация, по умолчанию tape,
если указать vert - то слайдер считается вертикальным,
movel или movet, mover или moveb - анимация начнёт двигаться
вверх или вниз.
t - промежуток между запуском анимации, по умолчанию
4000 мс. (1000 мс = 1 сек)
d - длительности анимации, по умолчанию 400 мс.
f - функция анимации
u - 1 = разместить кнопки управления выше родительского элемента,
чтоб была возмозность за блок выносить.
Если написать так: '1,leftclass,rightclass' заменятся классы кнопок навигации.
e - функция в конце проигрывания анимации, для дозагрузки элементов например.
При наведении мыши на блок с каруселью, срабатывает пауза.
Если блок не виден, анимация не проигрывается.
Устанавливает обработку анимации на все найденные элементы..
Примеры:
//class="tape swipe" - обрабатывать управление пальцем (swipe) на touch устройствах.
<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>
Сделаем дозагрузку элементов новостной ленты:
ff.onload(function() {
ff.init({
focus: 1,
fotobox: 1,
tomain: 1
...
},{
tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
})
});
function newstape(t){//передана ссылка на весь объект - делайте что хотите.
if(t.isend())ff.send('inc/news','more='+(t.s+1)+'&index='+t.index,'newsout');//t.s = [0 ... n]
}
//В отдающем /inc/news.php скрипте:
$i=(int)$_POST['index'];
1) Хороший вариант, динамически вставить блоки
$s = '...';
$s = 'ff.ce({p:ff.tapes['.$i.'].i,t:`'.$s.'`});';//контейнер = div по умолчанию2) Другой варинат - будет мигать при перестроении из-за innerHTML
$s = '<div>...</div>';
echo '`|eval`|ff.tapes['.$i.'].i.innerHTML+=`'.$s.'`;ff.tapes['.$i.'].update();';
Ещё вариант со сдвигом и дозагрузкой в обе стороны:
ff.onload(function() {
ff.init({
focus: 1,
fotobox: 1,
tomain: 1
...
},{
tape: {c:'newstape',t:2500,d:500,u:'1,slideleft,slideright',e:function(t){newstape(t)}}
});
var i, z = ff.tapes.length;
for (i = 0; i < z; i++){
if(ff.tapes[i].class=='newstape'){
if(ff.tapes[i].s>4)ff.tapes[i].go(1);//-1 от требуемого количества 5 = [0..4]
break;
}
}
});
function newstape(t){
var o,s,e,y=2;//первый элемент в минусовой позиции для математики..
if(t.n==-1)y=1;//догружаем блоки в начало //t.n - текущая позиция
else if(t.isend())y=0;//догружаем блоки в конец
if(y!=2){
o=ff.byt(t.a[0],'var',0);s=ff.v(o);
o=ff.byt(t.a[t.s],'var',0);e=ff.v(o);
ff.send('inc/news','more=1&index='+t.index+'&tofirst='+y+'&s='+s+'&e='+e,'newsout');
}
}
PHP:
inc/styles/def/_.php:
include D.'inc/news.php';
inc/news.php:
if(isset($_POST['more'])){
define('D',preg_replace('#/inc$#','/',dirname($_SERVER['SCRIPT_FILENAME'])));
$s=dirname($_SERVER['PHP_SELF']);if('/'!=$s)$s.='/';
$s=str_replace('/inc/','/',$s);
define('R',$s);//root
}
$limit=6;//вывод для tape,+2 блока для дозагрузки, на экране 4 по бокам ещё по 1,
чтоб при листании он понял что это последний/первый элемент и догрузил.
if(!isset($dbl))include D.'deny/sql.php';
dbConnect();
//sql может не соответствовать текущей кодобазе движка, проверяйте функции..
$t=$s=$p='';
if(!isset($_POST['more'])){//1-е результаты
$r=dbqf('SELECT COUNT(*) FROM news WHERE hidden=0');
$count=(int)$r[0];
if($count>=$limit){
$r=dbqf('SELECT * FROM news WHERE hidden=0 ORDER BY id ASC LIMIT 1');
$t.='<div onclick="newsopen(this)"><var>'.$r[0].'</var>...</div>';//$r[0]=id
}
$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 ORDER BY id DESC LIMIT '.($limit-1)) or _exit();
while($r=$q->fetch_row())
$t.='<div onclick="newsopen(this)">...</div>';
echo '<div class="newsc"><div class="newstape">'.$t.'</div></div><div id="newsout" class="skip"></div>';
}else{//забор страниц далее через post (Найти ещё)
$s=(int)$_POST['s'];
$e=(int)$_POST['e'];
$i=(int)$_POST['index'];
$tofirst=(int)$_POST['tofirst'];
if($tofirst)$q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 AND id>'.$s.' AND id<'.$e.' ORDER BY id ASC LIMIT '.$limit) or _exit();
else $q=$db[BN]->query('SELECT * FROM news WHERE hidden=0 AND id>'.$s.' AND id<'.$e.' ORDER BY id DESC LIMIT '.$limit) or _exit();
while($r=$q->fetch_row()){//ff.ce - div по умолчанию
$t.='ff.ce({i:'.$tofirst.',p:ff.tapes['.$i.'].i,f:function(){newsopen(this)},t:`<var>'.$r[0].'</var>...`});';
}
if(''==$t)_exit();
echo '`|eval`|ff.tapes['.$i.'].preup();'.$t.'ff.tapes['.$i.'].update();';
}//_close();
ссылка-якорь на ft
var fx - анимация появления блоков для сайтов визиток
Ищет элементы с классом fxanim, в случае появления на экране задает класс fxdone
и начинает проигрываться заданная в CSS стилях анимация,
по сути можно прикрутить любую...
Если объект больше половины экрана, проигрывание запуститься ранее.
Затем подчищает за собой - удаляет все классы начинающиеся с fx.
Если больше нет объектов - обработка останавливается,
но пустой вызов при скорллинге будет..
fxloop позволяет повторять эффект постоянно, скрипт будет удалять класс fxdone
при выходе за пределы видимости анимированного элемента.
Добавте CSS в свой файл стилей:
.fxanim{}
.fxloop{}
.fxdone{transition:.6s ease}
.fxtime200{transition-duration:.2s !important}
.fxtime400{transition-duration:.4s !important}
.fxtime800{transition-duration:.8s !important}
.fxdelay200{transition-delay:.2s !important}
.fxdelay400{transition-delay:.4s !important}
.fxdelay600{transition-delay:.6s !important}
.fxdelay800{transition-delay:.8s !important}
.fxdelay1200{transition-delay:1.2s !important}
.fxfade{opacity:0}
.fxfade.fxdone{opacity:1}
.fxrotateleft{transform:rotate(20deg);opacity:0}
.fxrotateright{transform:rotate(-20deg);opacity:0}
.fxrotateleft.fxdone,
.fxrotateright.fxdone{transform:rotate(0deg);opacity:1}
.fxslideup{transform:translateY(100px);opacity:0}
.fxslidedown{transform:translateY(-100px);opacity:0}
.fxslideleft{transform:translateX(100px);opacity:0}
.fxslideright{transform:translateX(-100px);opacity:0}
.fxslideup.fxdone,.fxslidedown.fxdone,.fxslideleft.fxdone,
.fxslideright.fxdone{transform:translate(0,0);opacity:1}
.fxzoomin{transform:scale(0.75);opacity:0}
.fxzoomout{transform:scale(1.5);opacity:0}
.fxzoomin.fxdone,.fxzoomout.fxdone{transform:scale(1);opacity:1}
fxtime* - время (мс) проигрывания анимации;
fxdelay* - задержка (мс) перед запуском анимации;
fxfade - анимация появления (нарастания прозрачности)
fxrotateleft - появление с поворотом слева
fxrotateright - появление с поворотом справа
fxslideup - появление движением снизу вверх
fxslidedown - появление движением сверху вниз
fxslideleft - появление движением слева направо
fxslideright - появление движением справа налево
fxzoomin - появление увеличением
fxzoomout - появление уменьшением
Задайте overflow:hidden для блоков(контейнеров) дабы избавиться
от скроллинга страницы или просто на main,
и перекрытие блоков при надобности position:relative;z-index:1
Якоря лучше выносить за блок, иначе скроллинг ff.scrto(e);
будет на сдвинутую позицию блока (актуально при использовании hash: 1)..
ff.onload(function() {
ff.init({
...
fx: 1,
...
});
});
Пример:
<div class="fxanim fxloop fxrotateleft">
<div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
</div>
<div class="fxanim fxloop fxrotateright fxdelay200">
<div><img src="/inc/img/main/tape1.jpg" alt=""><p>test1</p></div>
</div>
<a href="/" class="fxanim fxloop fxrotateright fxdelay400">
<img src="/inc/img/main/tape1.jpg" alt="">
</a>
ссылка-якорь на fx
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},
fotobox: 1,
fx: 1,
goup: {t:'⇪',y:300},
hash: 1,
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.
h - элемент для срабатывания триггера подъёма элемента e* по достижении его высоты.
y - высота прокрутки(scroll) сверху, при котором необходимо фиксировать элементы.
t - срабатывать в начале позиции элемента (top) при наличии h.
По умолчанию y=top+height (т.е. позиция снизу).
Примеры:
//.fixed{position:fixed !important} //уже есть в обязательной "шапке" CSS
header.fixed{left:0;right:0}
ff.onload(function(){
ff.init({
...
fix: {e:ff.byt(0,'header',0),y:95}
...
});
Собираем по мере прокручивания элементы на разной высоте в бургер:(полоса появляющаяся сверху при прокрутке страницы)
wherebmenu, wherephone - дополнительные элементы для фиксации позиции элементов
(необходимые элементы будут перемещены, в следствии случиться "галлюцинал" без дополнительных элементов)
ff.onload(function() {
var w=ff.g('wherebmenu'),v=ff.g('wherephone'),b=ff.g('bmenu'),o=ff.g('burger');
ff.init({
...
fix:[
{e:ff.g('home'), h:w, t:1}, //равноценно с меньшей оптимизацией {e:'home', h:'wherebmenu', t:1},
{e:o, h:w, t:1}, //равноценно {e:'burger', h:'wherebmenu', t:1},
{e:b, h:w, t:1}, //равноценно кнопке вызывающей меню {e:'bmenu', h:'wherebmenu', t:1},
{e:o, h:ff.byt(0,'header',0), c:'lighter', y:-50}, //Достигли конца блока
с отступос вверх -50px = добавляем класс lighter, скажем бургер стал другого цвета.
{e:ff.g('phone'), h:v, t:1, y:-100} //при достижении wherephone минут 100px добавляем class fixed для phone
],
...
});
Дальше действия зависят от CSS сценария, обычно это фиксация элементов над бургером.
//------------------------------------------------------------------------------
Сохранение истории фокуса и обслуживание [tomain]:
//------------------------------------------------------------------------------
focus:1
По умолчанию задаются перехваты клавишам:
Ctrl+` фокус на предыдущий элемент;
Ctrl+1 к меню (в том числе Ctrl+NumPad 1)
Если есть флаг tomain:1
Первое нажатие Tab (и Esc - закрыть) - перейти к основному содержанию
Создаётся кнопка с классом tomain, он есть в обязательной "шапке" CSS..
При нажатии на кнопку будет добавлен якорь maincontent на тег main или article и
будет выполнен переход..
//------------------------------------------------------------------------------
Кнопка наверх (к началу страницы) [goup]:
//------------------------------------------------------------------------------
c - класс, по умолчанию goup
t - текст внутри кнопки, по умолчанию стрелка вверх ⇪
y - на какой высоте страницы отображать кнопку
Создаёт button с классом goup, и встроенной подсказкой из языкового пакета -
к началу страницы
Примеры:
goup: 300, //эквивалентно goup:{y:300}
goup: {c:'goup',t:'⇪',y:300},
ссылка-якорь на onload
Куча
строк
чтоб
якоря
доставали
:)
Страница сгенерирована за 0.013781 секунды
На один процесс веб-сервера: 73 стр./сек.
Всего Apache может отдать: 18 688 стр./сек.
Выделено php памяти: 1.29 MB, real_usage: 2 MB