- 1. Плавне прокручування до початку сторінки
- 2. дублюємо заголовки таблиць
- 3. Під-вантаження зовнішніх даних
- 4. Однакова висота колонок
- 5. Таблична зебра
- 6. Часткове оновлення сторінки
- 7. предзагрузкі зображень
- 8. Відкриття зовнішніх посилань в нових вікнах / табах
- 9. Блок в усі вікно браузера
- 10. Перевірка складності пароля
- 11. ресайз зображень засобами jQuery
- 12. Під-вантаження контенту при прокручуванні сторінки вниз
- 13. Перевірка завантаження зображення
- 14. Сортування по-алфавітом
Наша взаимовыгодная связь https://banwar.org/
Щось давненько я не публікував ніякого коду. Сьогодні я виправлю ситуацію і дам кілька корисних фрагментів на jQuery, які обов'язково вам знадобляться на ваших сайтах.
Я не буду вдаватися в теорію, вся документація по jQuery є на офіційному сайті бібліотеки. Я лише нагадаю, що, таке jQuery.
jQuery - це бібліотека JavaScript, що фокусується на взаємодії JavaScript і HTML. Бібліотека jQuery допомагає легко отримувати доступ до будь-якого елементу DOM, звертатися до атрибутів і вмісту елементів DOM, маніпулювати ними. Також бібліотека jQuery надає зручний API для роботи з AJAX.
Отже, поїхали!
1. Плавне прокручування до початку сторінки
Без неї вже не обходиться жоден сайт. Всього лише 4 рядки коду дозволять вашим відвідувачам в один клік плавно пркрутіть всю сторінку вгору.
$ ( "A [href = '# top']"). Click (function () {$ ( "html, body"). Animate ({scrollTop: 0}, "slow"); return false;});2. дублюємо заголовки таблиць
Щоб поліпшити сприйняття і читабельність ваших таблиць, можна продублювати їх заголовки знизу під таблицею. Здавалося б дрібниця, але це дуже зручно в складних і великих таблицях, які не поміщаються в один екран.
var $ tfoot = $ ( '<tfoot> </ tfoot>'); $ ($ ( 'Thead'). Clone (true, true) .children (). Get (). Reverse ()). Each (function () {$ tfoot.append ($ (this));}); $ Tfoot.insertAfter ( 'table thead');3. Під-вантаження зовнішніх даних
За допомогою jQuery дуже легко довантажувати на веб-сторінки зовнішній контент. Його можна вивести прямо в блок DIV, як в прикладі нижче.
$ ( "# Content"). Load ( "somefile.html", function (response, status, xhr) {// error handling if (status == "error") {$ ( "# content"). Html ( " An error occured: "+ xhr.status +" "+ xhr.statusText);}});4. Однакова висота колонок
Відомо, що вирівняти блоки по висоті стандартними засобами HTML і CSS не так-то просто. Всього кілька рядків коду нижче дозволить вам зробити висоту всіх блоків рівній висоті більшого блоку.
var maxheight = 0; $ ( "Div.col"). Each (function () {if ($ (this) .height ()> maxheight) {maxheight = $ (this) .height ();}}); $ ( "Div.col"). Height (maxheight);5. Таблична зебра
Як відомо, сприйняття і читабельність таблиці буде помітно вище якщо зробити різнобарвне чергування рядків. Це дуже легко реалізується на jQuery.
$ (Document) .ready (function () {$ ( "table tr: even"). AddClass ( 'stripe');});6. Часткове оновлення сторінки
За допомогою jQuery дуже просто реалізувати блочне (часткове) оновлення сторінки. Наприклад, код нижче дозволить вам кожні 10 секунд автоматично оновлювати блок #refresh.
setInterval (function () {$ ( "# refresh"). load (location.href + "#refresh> *", "");}, 10000); // milliseconds to wait7. предзагрузкі зображень
Даний код дозволяє здійснювати завантаження зображень у фоновому режимі без подгрузок в процесі перегляду сторінки. Просто перерахуйте в 7 рядку необхідні вам для предзагрузкі зображення.
$ .PreloadImages = function () {for (var i = 0; i <arguments.length; i ++) {$ ( "<img />").attr("src", arguments [i]); }} $ (Document) .ready (function () {$ .preloadImages ( "hoverimage1.jpg", "hoverimage2.jpg");});8. Відкриття зовнішніх посилань в нових вікнах / табах
Даний сниппет здійснює примусове відкриття всіх зовнішніх посилань сторінки в новому вікні браузера. Скрипт банально визначає поточний домен сайту, і спрацьовує якщо він не збігається з адресою на засланні.
$ ( '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');});}});9. Блок в усі вікно браузера
Даний скрипт допоможе вам розтягнути блок на весь екран браузера. Відмінно підійде для модальних вікон і діалогів.
var winWidth = $ (window) .width (); var winHeight = $ (window) .height (); $ ( 'Div'). Css ({ 'width': winWidth, 'height': winHeight,}); $ (Window) .resize (function () {$ ( 'div'). Css ({ 'width': winWidth, 'height': winHeight,});});10. Перевірка складності пароля
Якщо ви дозволяєте відвідувачам свого сайту самостійно вказувати паролі, було б непогано проконтролювати його складність і інформувати про це користувача.
Для початку напишемо HTML-частина коду:
<Input id = "pass" name = "pass" type = "password" /> <span id = "passstrength"> </ span>А за допомогою коду нижче ми перевіримо введений пароль і виведемо відвідувачеві інформацію: його пароль складний, середній або слабкий, а також перевіримо чи не занадто він короткий.
$ ( '# Pass'). Keyup (function (e) {var strongRegex = new RegExp ( "^ (? =. {8}) (? =. * [AZ]) (? =. * [Az]) (? =. * [0-9]) (? =. * \\ W). * $ "," g "); var mediumRegex = new RegExp (" ^ (? =. {7}) ((( ? =. * [AZ]) (? =. * [az])) | ((? =. * [AZ]) (? =. * [0-9])) | ((? =. * [az ]) (? =. * [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;});11. ресайз зображень засобами jQuery
Звичайно, логічніше змінювати розміри зображень на стороні сервера засобами PHP і GD, але бувають ситуації коли це необхідно зробити саме на стороні клієнта. І в цьому знову нам допоможе jQuery.
$ (Window) .bind ( "load", function () {$ ( '# 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});12. Під-вантаження контенту при прокручуванні сторінки вниз
Найчастіше цей прийом називають як нескінченний скролл. Контент завантажується в міру прокручування користувачем сторінки. Це досить просто реалізувати за допомогою коду нижче.
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);});13. Перевірка завантаження зображення
Часто буває потрібно перевірити завантажено зображення в даний момент чи ні. І в цьому знову нам допоможе jQuery.
var imgsrc = 'img / image1.png'; $ ( '<Img />').load(function () {alert (' image loaded ');}). Error (function () {alert (' error loading image ');}). Attr (' src ' , imgsrc);14. Сортування по-алфавітом
Якщо вам потрібна динамічна сортування списку по-алфавітом, вам обов'язково допоможе цей невеликий сниппет.
$ (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 ();});Збережіть - стане в нагоді.
Php?ToUpperCase (); return (compA <compB)?
