- PVSM.RU - https://www.pvsm.ru -
Здесь я собрал несколько, на мой взгляд, интересных сниппетов [1] для работы с jQuery. Давно интересует тема создания своего локального хранилища с подобными фрагментами кода. Часто приходится их использовать и хорошо бы иметь их под рукой.
Вот несколько отобранных решений для повседневного использования
Допустим, вы хотите привязать обработчик щелчка для каждой ссылки на странице. Функция для этого обработчика щелчка превращает все остальные ссылки в другой цвет.
var $allLinks = $("a");
$allLinks.click(function() {
$allLinks.not(this).css("color", "red");
});
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
var news = 2;
hidenews = "- Hide news archive";
shownews = "+ Show news archive";
$(".archive").html( shownews );
$(".news:not(:lt("+news+"))").hide();
$(".archive").click(function (e) {
e.preventDefault();
if ($(".news:eq("+news+")").is(":hidden")) {
$(".news:hidden").show();
$(".archive").html( hidenews );
} else {
$(".news:not(:lt("+news+"))").hide();
$(".archive").html( shownews );
}
});
HTML:
<div class="news">First news</div>
<div class="news">Second news</div>
<div class="news">Third news</div>
<a class="archive" href="#"></a>
$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
$("#twitter").html(data[0].text);
});
var userAgent = navigator.userAgent.toLowerCase(),
browser = '',
version = 0;
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
// Is this a version of IE?
if ($.browser.msie) {
userAgent = $.browser.version;
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Internet Explorer";
}
// Is this a version of Chrome?
if ($.browser.chrome) {
userAgent = userAgent.substring(userAgent.indexOf('chrome/') + 7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
// If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
$.browser.safari = false;
browser = "Chrome";
}
// Is this a version of Safari?
if ($.browser.safari) {
userAgent = userAgent.substring(userAgent.indexOf('safari/') + 7);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Safari";
}
// Is this a version of Mozilla?
if ($.browser.mozilla) {
//Is it Firefox?
if (navigator.userAgent.toLowerCase().indexOf('firefox') != -1) {
userAgent = userAgent.substring(userAgent.indexOf('firefox/') + 8);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Firefox"
}
// If not then it must be another Mozilla
else {
browser = "Mozilla (not Firefox)"
}
}
// Is this a version of Opera?
if ($.browser.opera) {
userAgent = userAgent.substring(userAgent.indexOf('version/') + 8);
userAgent = userAgent.substring(0,userAgent.indexOf('.'));
version = userAgent;
browser = "Opera";
}
// Now you have two variables, browser and version
// which have the right info
//Отключение:
$("#submit-button").attr("disabled", true);
//Повторное включение:
$("#submit-button").removeAttr("disabled");
Добавляет класс «first» для первого элемента с классом «activity» находящийся в зоне видимости
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var first = false;
$(".activity").each( function() {
var offset = $(this).offset();
if (scrollTop <= offset.top && ($(this).height() + offset.top) < (scrollTop + windowHeight) && first == false) {
$(this).addClass("first");
first=true;
} else {
$(this).removeClass("first");
first=false;
}
});
});
$('#my-selector').bind('click', function() {
$(this).unbind('click');
alert('Clicked and unbound!');
});
//Или вариант такой:
$('#my-selector').one('click', function() {
alert('Clicked and unbound!');
});
1. Задаем значение для поиска как «Search...»
2. Когда поле поподет в фокус задаем черный цвет.
3. Если значение по умолчанию — удаляем его.
4. Когда поле вне фокуса — меняем цвет с черного на светло серый.
5. Если значение пустое — возвращаем дефолтное значение.
$("#s")
.val("Search...")
.css("color", "#ccc")
.focus(function(){
$(this).css("color", "black");
if ($(this).val() == "Search...") {
$(this).val("");
}
})
.blur(function(){
$(this).css("color", "#ccc");
if ($(this).val() == "") {
$(this).val("Search...");
}
});
if (typeof jQuery == 'undefined') {
// jQuery IS NOT loaded, do stuff here.
}
$('button').click(function(event, wasTriggered) {
if (wasTriggered) {
alert('triggered in code');
} else {
alert('triggered by mouse');
}
});
$('button').trigger('click', true);
if ( $(".child-element").parents("#main-nav").length == 1 ) {
// YES, the child element is inside the parent
} else {
// NO, it is not inside
}
if ( $('#myElement').length > 0 ) {
// it exists
}
//Ищет выбранный элемент checkbox'a и возвращает true или false:
$('#checkBox').attr('checked');
//Ищет все выбранные элементы checkbox'a:
$('input[type=checkbox]:checked');
//Делаем что-то для каждого найденного пустого элемента
$('*').each(function() {
if ($(this).text() == "") {
//Do Something
}
});
//если элемент пустой возвращает TRUE или FALSE:
var emptyTest = $('#myDiv').is(:empty);
Этот код будет вычислять растояние между курсором мыши и центром элемента. Это может быть полезно для запуска функции, когда курсор мыши находится в пределах пределенного расстояния от элемента. Или вы можете создать значение свойства, такие как ширина, высота, или непрозрачности элемента, в области курсора мыши.
(function() {
var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});
})();
$('a[href]').each(function() {
if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
$(this).addClass(C[1]);
}
});
$(function() {
var docHeight = $(document).height();
$("body").append("<div id="overlay"></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
// Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
// Or, hide them
$("img").error(function(){
$(this).hide();
});
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
$.expr[':']['nth-of-type'] = function(elem, i, match) {
var parts = match[3].split("+");
return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
}
});
//Меняет размер для такого html:
<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>
//Работает только в пределах одного домена
$('#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('Должно быть больше 6 символов');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Сложный пароль');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Средняя сложность');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Ошибка!');
}
return true;
});
//Использовать вместе с html:
<input type="password" name="pass" id="pass">
<span id="passstrength"></span>
$('#theImage').attr('src', 'image.jpg').load(function() {
alert('This Image Has Been Loaded');
});
$(document).ready(function(){
jQuery.fn.center = function () {
this.css('position','absolute');
this.css('top', ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + 'px');
this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
return this;
}
$('div').center();
});
$(document).ready(function(){
$.fn.replaceUrl = function() {
var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;
this.each(function() {
$(this).html(
$(this).html().replace(regexp,'<a href="$1">$1</a>')
);
});
return $(this);
}
//usage
$('p').replaceUrl();
});
$(function(){
$('a[rel$='external']').click(function(){
this.target = "_blank";
});
});
$(document).ready(function() {
$('.top').click(function(){
if($.browser.safari){
bodyelem = $("body")
} else{
if($.browser.opera){
bodyelem = $("html")
} else{
bodyelem = $("html,body")
}
}
bodyelem.animate({scrollTop: 0});
return false;
});
});
$(document).ready(function() {
jQuery.fx.off = true;
});
Здесь собраны крупицы того, чем действительно может пользоваться программист. Но Вы можете собрать свой собственный сборник-хранилище такого добра и обращаться к нему по мере необходимости.
Автор: codemake
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/14807
Ссылки в тексте:
[1] сниппетов: http://ru.wikipedia.org/wiki/%D0%A1%D0%BD%D0%B8%D0%BF%D0%BF%D0%B5%D1%82
Нажмите здесь для печати.