Библиотека JavaScript
Собрал наиболее часто используемые анимационные эффекты в библиотеку, она представляет из себя нечто вроде аналога / замены jQuery и прочих, без перекрытия методов и лишних заморочек (без конфликтов в случае подключения сторонних API). Постарался сделать её максимально простой для понимания и охватить все необходимые функции, чтоб была возможность быстро и сжато создавать любую дополнительную функциональность. Естественно всё кроссбраузеорно и работает без лагов и глюков, но древние браузеры типа IE8- в пролёте. (Статистика склоняется к 0,1% таких пользователей, полагаю это просто чьи-то древние боты так представляются..)
При всём обилии анимации, библиотека весит около 61 Кб! Для сравнения, очень популярная jquery-3.6.4.min.js = ~88 Кб! И зачастую, чтоб добавить анимацию, потребует подключить дополнительные js библиотеки, что ведёт к увеличению веса и запросов к серверу.
Функции:
* помечены обязательные параметры при передаче параметров в функции, остальные можно пропускать, будут взяты значения по умолчанию.. Служебные функции таким цветом.
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 - квадратный корень
ссылка-якорь на функции
ff.aback - стрельба из лука
ff.abounce - отскок
ff.acirc - дуга
ff.aelastic - упругая анимация
ff.alinear - линейная
ff.aquad - в степени n (квадратичная)
ff.asquare - квадратный корень
ссылка-якорь на функции
touchr - перехват touch устройств (планшетов итп)
Заменяет вызовы, благодаря чему onclick и пр. начинает работать как touch события. Биндится/устанавливается на автомате..
ссылка-якорь на функцию touchr
ссылка-якорь на функцию touchr
var ff - переменные
Статические переменные:
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]
Служебная. Метод активации и прочее смотрите в onload ссылка-якорь на функцию ff.ac
ff.ae(n,f,e,с,r) - add/remove/EventListener
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
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.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(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); Проход по всем элементам: var i,e=ff.byc(0,'iframe'),l=e.length; for(i=0;i<l;i++)iframe(e[i],ff.atr(e[i],'name')); ссылка-якорь на функцию ff.byc
ff.byt(e,t,n) - берёт элементы по названию тега
e - родительский элемент или строка с id элемента, если не указан берётся document t - название тега n - индекс элемента (0 - первый, -1 - последний), если не указан возвращается массив всех найденных. i=ff.byt(p,'i',0); Проход по всем элементам: var i,e=ff.byt(0,'iframe'),l=e.length; for(i=0;i<l;i++)iframe(e[i],ff.atr(e[i],'name')); ссылка-якорь на функцию 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
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});
Таким образом можно переназначать свойства..
Если передан style, будет вставка CSS стилей, а не создание элемента.
ff.ce({n:'style',t:'.myclass{margin:0 auto}.myclass2{margin:19px 2%}'});
Добавочный механизм создания кнопки:
Вставляет кнопку до текста 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.copy(o,e,v,c,t) - скопировать в буфер обмена (Clipboard)
o - элемент или строка с id от куда брать текст
(подразумевается что это textarea или input)
//остальные параметры необязательны
e - элемент или строка с id куда вставить текст v
v - текст вставляемый при копировании для оповещения о событии
c - отчистить текст см. ff.copytext(v,c)
е - задержка перед возвратом предыдущего текста (3000 мс по умолчанию)
Примеры:
<textarea id="buts" rows="1" cols="1" onfocus="this.select()" readonly>text for copy to clipboard</textarea>
<button onclick="ff.copy('buts',this,'Copyed')">Copy</button>
<pre>
text for copy to clipboard
</pre>
<button onclick="ff.copy(ff.prev(this, 'pre', 1), this, (ff.lang == 'ru' ? 'Скопировано': 'Copied'), 2)">Copy</button>
ссылка-якорь на функцию ff.copy
ff.copytext(v,c) - скопировать текст в буфер обмена (Clipboard)
v - копируемый текст. c - отчистить текст 0 по умолчанию - отключено 1 - пробелов в начале и конце, двойных пробелов 2 - 1 + удаляет переносы строки и заменяет & на & | < и < на < | > и > на > 3 - 1 + 2 + вырезает теги 4 - 1 + 2 + 3 но не удалять переносы строк 5 - заменяет & на & | < и < на < | > и > на > ссылка-якорь на функцию ff.copytext
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.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(1,e,function(){ff.ap=0;ff.fade(0,e,0,0,200)},1,200);
ff.fade(1,e,function(){setTimeout(function(){ff.fade(0,e,0,0,200)},200)},1,200);
ссылка-якорь на функцию 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 число
v - значение ссылка-якорь на функцию ff.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,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`)``
- i^Имя пользователя *| //текстовое поле input=text
i~id=``user`` name=``user`` onkeyup=``ff.lim(this);ff.kd(event,13,function(){ff.g(\`mysend\`).click()})``^Имя пользователя *'
- //добавить в создаваемый тег произвольную строку
Представьтесь *~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|
или
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
ff.onscr(g,f) - обработка прокрутки(scroll) страницы
Служебная. Разгружает браузер, предотвращая излишние частые вычисления.. Обрабатывает кнопу наверх g - goup, фиксацию элемента f - fix, объект hash - h (эмуляция многостраничности для одностраничных сайтов), объект fx - x (анимация появления блоков для сайтов визиток). ссылка-якорь на функцию 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,n) - служебная для анимации
Проверяет помещается ли объект в окно и отдаёт координаты в зависимости от направления прилёта.. 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(`x|<button class="fbn fbx" title=" Закрыть [Esc] " onclick="ff.ob.click()"></button> mytext `,0,500,`myclass`);
.myclass .fbn{position:absolute}
ссылка-якорь на функцию 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) - возвращает случайное число в заданном диапазоне
x=ff.rand(1,10); ссылка-якорь на функцию ff.rand
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,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) страницы
Возвращает объект {t:сверху, l:слева}
t = ff.scr().t;
ссылка-якорь на функцию ff.scr
ff.scrto(e,t,y,d) - прокрутить к элементу
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.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(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.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 - переключает вкладки [tabs]
ff.onload(function() { ff.init({ ... 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> ссылка-якорь на функцию 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 - установить фокус на элементе = 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.wl() - получить текущий URL
Возвращает window.location приведённый к строке ссылка-якорь на функцию ff.wl
var fb - галерея изображений [fotobox]
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
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
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
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}, 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