12 удобных jQuery Snippets для разработчиков №1
- Сентябрь 2
- Опубликовано в Web coding
- Станьте первым комментатором!
12 удобных jQuery Snippets для разработчиков и дизайнеров. В этом списке предоставлены некоторых полезные JQuery сниппеты, которые довольно часто используются в веб-индустрии и дизайне.
JQuery является кросс-платформенной JavaScript библиотекой, она предназначенна для упрощения клиентских сценариев в HTML. Она была выпущена в январе 2006 года в Нью-Йорке BarCamp NYC by John Resig и находилась под влиянием ранней библиотеки cssQuery Дина Эдвардса. В настоящее время разработан командой разработчиков во главе с Dave Methvin. Используется более чем на 60% из 10 000 самых посещаемых сайтов, JQuery является самой популярной библиотекой JavaScript, используемых сегодня.
Эти удобные jQuery Snippets для разработчиков используются всеми, будь то новичок или профессионал эти фрагменты можно использовать для вашей работы!
Прикрепить панели навигации наверху при прокрутке вниз
Это навигационная панель инструментов, которая будет оставаться наверху, когда вы будете прокручивать страницу вниз. Это сделано на JQuery. Логика проста - когда длина прокручивания окна больше, чем позиции положении панели инструментов, затем добавить фиксированный класс на панель инструментов. Если нет, то я удалить его.
<script>
$(function(){
var $win = $(window)
var $nav = $('.mytoolbar');
var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
var isFixed=0;
processScroll()
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
}
}
});
</script>
<div class="header">
Header info here. Scroll down to see the effect.
<div class="mytoolbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
Простые Вкладки
<style>
.tabs > ul li {
cursor: pointer;
display: inline-block;
list-style: none;
margin: 0;
text-align: center;
}
.tabs > ul li.active {background: #eee;}
.tabsCont .tab {display: none;}
.tabsCont .tab.active {display: block;}
</style>
<script>
$(document).ready(function() {
$('.tabs').each(function() {
var $tabs = $(this),
$toggles = $tabs.children('ul').find('li'),
$tab = $tabs.find('.tab');
$toggles.eq(0).addClass('active');
$tab.eq(0).addClass('active');
$toggles.on('click', function() {
var $this = $(this),
index = $this.index();
if(!$this.hasClass('active')) {
$toggles.removeClass('active');
$this.addClass('active');
$tab.hide();
$tab.eq(index).fadeIn(200);
}
});
});
});
</script>
<div class="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tabsCont">
<div class="tab">first</div>
<div class="tab">Second</div>
</div>
</div>
Проверка Dropdown
Заставить пользователя сделать выбор из выпадающего меню. Кнопка Отправить будет отключена, пока пользователь не сделает выбор.
$(document).ready(function() {
formButton = $('div.service-form form button');
$(formButton).attr('disabled','');
$('#swcwidget_53_6').on('change', function(){
var currentText = $('#swcwidget_53_6 option:selected').text();
console.log('change!');
if(currentText == 'Please Select') {
$(formButton).attr('disabled','');
} else {
$(formButton).removeAttr('disabled');
}
});
});
Открывание всех внешние ссылки в новом окне
$('a').each(function() {
// The link's href
var theHref = $(this).attr('href').toLowerCase();
// The current domain
var currentDomain = window.location.host;
// Kill any subdomains
var noSubDomain = currentDomain.match(/[^\.]*\.[^.]*$/)[0];
// Create a new (case insensitive) regex from the clean domain
var theDomain = new RegExp(noSubDomain, 'gi');
if(/^https?/gi.test(theHref)) {
// This link is using HTTP/HTTPs and is probably external
if(theDomain.test(theHref)) {
// Do nothing. For some reason, this site is using absolute internal links
} else {
$(this).attr('target', '_blank');
}
}
});
Jquery Выпадающая Навигация при наведении курсора
jQuery URL Parameters
//Function
(function($) {
$.QueryString = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'))
})(jQuery);
//USAGE
$.QueryString["MyParam"]
Простая подсказка на JQuery
<script>
$.fn.tooltip = function(showTime, hideTime) {
if(typeof showTime === "undefined") showTime = 200;
if(typeof hideTime === "undefined") hideTime = 200;
var $this = $(this);
$this.hover(function() {
var offsetLeft = parseInt($this.offset().left);
offsetTop = parseInt($this.offset().top),
text = $this.attr('title');
$this.removeAttr('title');
$('body').append('<div class="tooltip">'+text+'</div>');
$('.tooltip').css({
left: offsetLeft-$('.tooltip').width()/2,
top: offsetTop-$('.tooltip').outerHeight()-15
}).animate({
opacity: 1,
top: offsetTop-$('.tooltip').outerHeight()-10
}, showTime);
}, function() {
$(this).attr('title', text);
$('.tooltip').animate({
opacity: 0,
top: offsetTop-$('.tooltip').outerHeight()-15
}, hideTime, function() {
$(this).remove();
});
});
};
// Example:
// $('.tt[title]').tooltip(200,200);
</script>
<style>
/* LESS */
.tooltip {
background: #434a54;
color: #fff;
display: inline-block;
font-size: 14px;
line-height: 16px;
max-width: 200px;
min-width: 80px;
opacity: 0;
padding: 5px 10px;
position: absolute;
z-index: 999;
.border-radius(2px);
.box-shadow(0 0 10px #fff);
.tac;
&:after {
border-top: 6px solid #434a54;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: '';
display: block;
margin: 0 0 0 -6px;
position: absolute;
left: 50%;
bottom: -6px;
}
}
</style>
JQuery Rotator изображений с ссылками
Автоматическое добавление Class Lightbox
Добавить класс лайтбокса (независимо CSS класс, который вы используете, чтобы определить ваши лайтбокс изображения) для всех контент-изображений, но только те, которые ссылаются на изображениях.
$('div.entry-content a img').each(function() {
// The href of the link
var theImageLink = $(this).parent("a").attr("href");
// The link itself
var theParent = $(this).parent("a");
// Test the link to see if it's actually an image
if ( !/\.(jpg|jpeg|gif|png)$/i.test(theImageLink) ) {
// This isn't an image link, follow the href
} else {
$(theParent).addClass('lbimage');
}
});
JQuery Color Changer быстрого функционирования
function elementColorChange (element, newColor, originalColor, newFontColor, originalFontColor) {
$(element).hover(function() {
$(this).stop(true, true).animate ({
backgroundColor: newColor,
color: newFontColor
}, 200)
}, function (){
$(this).stop(true, true).animate ({
backgroundColor: originalColor,
color: originalFontColor
}, 200)
});
}
Jquery бесконечная прокрутка с помощью AJAX
function elementColorChange (element, newColor, originalColor, newFontColor, originalFontColor) {
$(element).hover(function() {
$(this).stop(true, true).animate ({
backgroundColor: newColor,
color: newFontColor
}, 200)
}, function (){
$(this).stop(true, true).animate ({
backgroundColor: originalColor,
color: originalFontColor
}, 200)
});
}
