Jquery on Jeremy Jackson

Стилизация Radio button и Checkboxes

Mon, 23 Jul 2012 10:34:50 +0000

Написал тут по быстрому скрипт стилизации radiobuttons и checkboxes на jquery для Drupal:

(function ($) {
    $(document).ready(function() {
        $('input[type="checkbox"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.checkbox-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            if(self.hasClass('checked')) {
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })

        $('input[type="radio"]').each(function() {
            var self = $(this);
            self.hide();
            if (this.getAttribute('checked')) {
                self.after('');
            } else {
                self.after('');
            }
        })

        $('.radio-style').live('click', function(){
            var self = $(this);
            var id = this.getAttribute('data-id');
            var name = this.getAttribute('data-name');

            if(self.hasClass('checked')) {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.removeClass('checked');
                $('#' + id).attr('checked', '');
            } else {
                $('input[name="'+name+'"]').attr('checked', '');
                $('div[data-name="'+name+'"]').removeClass('checked');
                self.addClass('checked');
                $('#' + id).attr('checked', 'checked');
            }
        })
    });
})(jQuery);

Стили:

JS/jQuery полезняшки

Mon, 19 Mar 2012 13:05:09 +0000

Выбор множество селекторов:

$("div,span,p.myClass").css("border","3px solid red");

Даже если у body 100% height, $(‘body’).height() покажет реально занимаемый размер, лучше использовать:

$(document).height();

Высота в JS

var height = document.getElementById('someDiv').clientHeight; // высота + вертикальный паддинг
var height = document.getElementById('someDiv').offsetHeight; //высота + вертикальный паддинг + бордеры
var height = document.getElementById('someDiv').scrollHeight; //высота + вертикальный паддинг + бордеры + скроллбар

Кастомная функция для jQuery

$.fn.myFunction = function() { 
    return $(this).addClass('changed'); 
}

$('.className').myFunction();

Запуск функции setTimeout с сохранением параметров

setTimeout(function(url, children, parent) {
                return function() {
                   someFunc (url, children, parent);
                }
            } (url, children, parent), 50);

Функция insertAfter:

Placeholder для форм на js

Wed, 01 Feb 2012 02:47:56 +0000

Ниже следуший код выдергивает название label к текстфилдам и вставляет их как placeholder.

$('#answ-cont label').each(function(){
    var id = $(this).attr('for');
    var text = $(this).text();
    $(this).css('display', 'none');
    $('input[type="text"]#' + id).val(text);
    $('input[type="text"]#' + id).bind("focus", function(event) {
      if ($(this).val() === text)
      $(this).val("");
    });
    $('input[type="text"]#' + id).bind("blur", function(event) {
      if ($(this).val() === "")
      $(this).val(text);
    });
  });

Jquery Validate

Wed, 28 Sep 2011 05:50:47 +0000

Вот такой простой способ валидации форм. login, pass это name input.

jQuery("#block-login-register-form").validate({ rules: { login: { required: true, minlength: 2 }, pass: { required: true, minlength: 5 }, password2: { required: true, minlength: 5, equalTo: “#edit-pass” }, email: { required: true, email: true }, license: “required” }, messages: { login: { required: “Пожалуйста введите имя”, minlength: “Любой алфавит, от 2 до 30 символов” }, pass: { required: “Пожалуйста введите пароль”, minlength: “Минимальная длина пароль 5 символов” }, password2: { required: “Пожалуйста повторите пароль”, minlength: “Минимальная длина пароль 5 символов”, equalTo: “Пароли не совпадают” }, email: “Пожалуйста введите существующий e-mail”, license: “Пожалуйста согласитесь с правилами сайта” } });

Fancybox

Fri, 16 Sep 2011 14:30:57 +0000

Вызов какого-нибудь, окошка по клику с заданым тайтлом. Для вывода собственного текста есть параметр content, .trigger(‘click’) - выводит окошко.

Кликая по одной ссылки, открываеться окно с картинкой из другой ссылки.

jQuery(".goals a.trendmotion").click(function(){ jQuery(“a.trendmotion#trendmotion”).fancybox({ ’titlePosition’ : ‘inside’, ’titleFormat’ : function() { return trend_desc;
} }).trigger(‘click’); });

Скрипт скрытия/раскрытия таблиц по клику на caption

Tue, 23 Aug 2011 06:18:44 +0000

JS Скрипт

$(document).ready(function(){ $(".table_styles caption").parent().addClass(‘hide’); $(".table_styles caption").click( function() { $(this).parent().toggleClass(‘hide’); }); })

CSS:

table {
  width: 100%;
}
.table_styles .hide thead,
.table_styles  .hide tbody{
  display:none;
}
.table_styles  table caption {
  cursor: pointer;
}

Использование регулярных выражений в jQuery

Tue, 23 Aug 2011 05:49:13 +0000

Для использования регулярных выражений, без которых иногда просто не обойтись, можно пользоваться следующим сниппетом:

/for regex in jquery/

jQuery.expr[’:’].regex = function(elem, index, match) {

var matchParams = match[3].split(’,’),

validLabels = /^(data|css):/,

attr = {

  method: matchParams[0].match(validLabels) ? matchParams[0].split(':')[0] : 'attr',

  property: matchParams.shift().replace(validLabels,'')

regexFlags = ‘ig’,

regex = new RegExp(matchParams.join(’’).replace(/^\s+|\s+$/g,’’), regexFlags);

return regex.test(jQuery(elem)attr.method);

}

Пример использования:

$(“input:regex(id, ^edit-field-sud-value-” + s[4] + “-children-.*)”).attr(‘checked’, ‘checked’);