Подборка jQuery сниппетов для различных надобностей.
В наличии):
- Плавный скролл к верху страницы
- Дублирование thead в самый низ html таблицы
- Загрузка внешнего контента
- Колонки одинаковой высоты
- Табличные полосы (зебра)
- Частичное обновление страницы
- Предзагрузка изображений
- Открытие внешних ссылок в новом окне или новой вкладке
- div по ширине/высоте вьюпорта
- Проверка сложности пароля
- Изменение размеров изображения
- Автоматическая загрузка контента по скроллу
- Проверить, загрузилось ли изображение
- Сортировка списка в алфавитном порядке
- Отправляем все запросы из форм через Ajax
- Валидация файла до отправки на сервер
- Отправка данных всей формы Аяксом
- Обернуть все iframe и т.д. на странице в отдельный div с классом
- Плавный скролл к верху страницы
Позволяет плавно проскролить страницу к верху простым нажатием ссылки (с id #top), расположенной внизу страницы.
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
- Дублирование
thead
в самый низhtml
таблицы
Для лучшей читаемости таблиц можно скопировать шапку таблицы вниз таблицы.
var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function() {
$tfoot.append($(this));
});
$tfoot.insertAfter('table thead');
- Загрузка внешнего контента
Добавить определенный внешний контент в div
.
$("#content").load("somefile.html", function(response, status, xhr) {
// error handling
if(status == "error") {
$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
}
});
- Колонки одинаковой высоты
Код возьмет все div
элементы с классом .col
и установит их высоту по самому высокому элементу.
var maxheight = 0;
$("div.col").each(function() {
if($(this).height() > maxheight) { maxheight = $(this).height(); }
});
$("div.col").height(maxheight);
- Табличные полосы (зебра)
Сниппет для автоматического добавления CSS класса в каждую четную строку таблицы.
$(document).ready(function(){
$("table tr:even").addClass('stripe');
});
- Частичное обновление страницы
В примере div
с id #refresh
автоматически обновляется каждые 10 секунд.
setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait
- Предзагрузка изображений
jQuery упрощает предзагрузку изображений в фоне, так что посетителям не придется ждать целую вечность, когда появятся желаемые изображения.
$.preloadImages = function() {
for(var i = 0; i<arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$(document).ready(function() {
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});
- Открытие внешних ссылок в новом окне или новой вкладке
Атрибут target="_blank"
позволяет открывать ссылки в новых окнах. Это относится к открытию внешних ссылок, внутридоменные ссылки должны открываться в том же окне.
Код находит внешнюю ссылку и добавляет в найденный элемент аттрибут target="_blank"
.
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
div
по ширине/высоте вьюпорта
Позволяет создавать растянутый по ширине/высоте вьюпорта div
. Код также поддерживает изменение размеров окна. Хорошее решение для модальных диалогов и popup-окон.
// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();
// set initial div height / width
$('div').css({
'width': winWidth,
'height': winHeight,
});
// make sure div stays full width/height on resize
$(window).resize(function(){
$('div').css({
'width': winWidth,
'height': winHeight,
});
});
- Проверка сложности пароля
Создадим поля ввода:
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
Введенный пароль будет проверен с помощью регулярных выражений и будет выведено сообщение о его сложности.
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
- Изменение размеров изображения
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
- Автоматическая загрузка контента по скроллу
Контент динамически подгружается на странице в процессе прокрутки вниз.
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
- Проверить, загрузилось ли изображение
Лучший) способ узнать, загрузилось изображение или нет.
var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
alert('image loaded');
}).error(function () {
alert('error loading image');
}).attr('src', imgsrc);
- Сортировка списка в алфавитном порядке
Сниппет принимает любой список и сортирует его в алфавитном порядке.
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
$("ul#demoOne").sortList();
});
- Отправляем все запросы из форм через Ajax
<script type="text/javascript">
$(function() {
$('form').submit(function(e) {
var $form = $(this);
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize()
}).done(function() {
console.log('success');
alert ('Отправлено!');
}).fail(function() {
console.log('fail');
alert ('Не отправлено!');
});
e.preventDefault();
});
}) ();
</script>
- Валидация файла до отправки на сервер
Есть несколько вариантов решения данной задачи. Это решение работает в IE. Валидации файла с помощью jQuery, перед отправкой на сервер. Проверяем допустимый размер и расширение файла
<script type="text/javascript">
function CheckFile(file)
{
// Устанавливаем настройки
// Флаг для валидации расширения файла
var good_ext = false;
// Флаг для валидации размера файла
var good_size = false;
// Разрешенные расширения файла
var ext_arr = ['jpg','jpeg','png','gif'];
// Максимальный размер 10MB
var maxsize = 1024*1024*10;
// Для хранения размера загружаемого файла
var iSize = 0;
// Если браузер IE
if($.browser.msie)
{
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
var sPath = $(file)[0].value;
var objFile = objFSO.getFile(sPath);
iSize = objFile.size;
}
else
{
// В других браузерах
iSize = $(file)[0].files[0].size;
}
// Делаем проверку что файл не превышает допустимого размера
if(maxsize > iSize)
{
// Если файл допустимого размера - выставляем флаг
good_size = true;
}
// Пробегаемся по нашему массиву разрешенных типов файлов
for(i in ext_arr)
{
// Если совпадения найдены
if('image/'+ext_arr[i] == $(file)[0].files[0].type)
{
// Выставляем флаг - что расширение файла допустимо
good_ext = true;
}
}
// Для хранения ошибки
var error = '';
// Если расширение не совпадает с фильтром
if(!good_ext)
{
error += "Invalid file extension! Use .jpg, .jpeg, .png, .gif files. ";
}
// Если у нас уже есть ошибка - ставим переход на новую строку
if(error != '')
{
error += "\r\n";
}
// Если не прошли валидацию по размеру файла
if(!good_size)
{
error += "Invalid file size! Use no more than 10 MB file.";
}
// Если есть ошибки
if(error != '')
{
// очищаем значение input file
$(file).val("");
// И выводим алертом сообщение об ошибке
alert(error);
}
return false;
}
</script>
Пример вызова функции
<input type="file" name="upload_file" onchange="CheckFile(this)">
- Отправка данных всей формы Аяксом
$("#button").click(function()
{
$.post( siteurl_javascript + "/ajax/custom.php",$("#id_form").serialize());
});
- Обернуть все iframe и т.д. на странице в отдельный div с классом
На jQuery:
$('iframe').wrapAll('<div class="some_class"></div>')
На чистом JS:
// create the container div
var dv = document.createElement('div');
// get all divs
var divs = document.getElementsByTagName('div');
// get the body element
var body = document.getElementsByTagName('body')[0];
// apply class to container div
dv.setAttribute('class', 'container');
// find out all those divs having class C
for(var i = 0; i < divs.length; i++)
{
if (divs[i].getAttribute('class') === 'C')
{
// put the divs having class C inside container div
dv.appendChild(divs[i]);
}
}
// finally append the container div to body
body.appendChild(dv);
Комментарии:
Нет комментариев к этой статье.