Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Полезные jQuery примеры

  • Понедельник, 1 ноября 2011, 22:23 |
  • Автор: karpovi4 |
  • Просмотров: 3101 |
  • Комментарии: 1 |
  • В закладки:
Полезные jQuery примерыХэлоу!!)
Данные примеры будут особенно полезны тем, кто либо пока плохо знает jQuery, либо не знает его вообще. В любом случае это полезные штуки, которые довольно часто используются всяких там сайтах. Вперед)

Выделение группы чекбоксов с помощью клавиши Шифт
Такая возможность есть в каком-то почтовике, не помню точно в каком. Но суть не в этом. Суть в том, что в 2 клика можно выделить группу чекбоксов. Очень удобная штука!! Очень удобно в различных файловых менеджерах, почтах и прочих интерфейсах с большим количеством чекбоксов.

Итак, сам код:
<script type="text/javascript">
// код сниппета
(function($) {
    $.fn.setCheckboxesShift = function() {
        var cbx = this,
        last = -1,     // номер предыдущего чекбокса;
        start,         // служебные
        finish;     // переменные
    
        // проходим по каждому указанному чекбоксу
        cbx.each(function(index) {
            // при клике по нему (или его лэйблу)
            $(this).click(function(e) {
                // проверяем, стал ли он чекнутым
                if($(e.target).attr('checked')) {
                    // теперь смотрим, больше ли у предыдущего индекс
                    if(index > last) {     start     = last;     finish     = index;
                    } else {             start     = index;     finish     = last; }
                
                    // если был предыдущий и зажата клавиша Шифт
                    if(last > -1 && e.shiftKey) {    
                        // проходим с начального до конечного чекбокса        
                        for(i = start; i <= finish; i ++) {
                            // и делаем их выделенными
                            $(cbx[i]).attr('checked', 'checked');
                        }
                    }
                    // запоминаем индекс только что кликнутого чекбокса
                    last = index;
                }
            });
        });
    };
})(jQuery);

$('#checkboxes-list').disableTextSelect(); // для этого нужен плагин disableTextSelect
// к указанным чекбоксам добавить такую возможность
$('#checkboxes-list :checkbox').setCheckboxesShift();
</script>


Клик по объекту плавно разворачивает какой-нить блок
Этот сниппет будет полезен, к примеру, для реализации страницы "вопрос\ответ". Где при клике на вопрос открывается ответ на него.
<script type="text/javascript">
(function($) {
    $.fn.openCloseBlocks = function(blocks, options) {
        var defaults = {
            speed: 'normal'
        },
        opts         = $.extend(defaults, options),
          togglers     = $(this),
          bls         = $(blocks); if(!bls) return;
          
          togglers.each(function(index) {
              $(this).click(function(e) {
                  e.preventDefault();            
                  $(bls[index]).slideToggle(opts['speed']);
              });
          });
    };
})(jQuery);

// использование
// выбераем нужные ссылки
// аргумент — что открывать (i-ый элемент первого массива
// открывает i-ый элемент второго массива)
$('div > a').openCloseBlocks($('div.blocks'), {
    speed: 'fast'
});
</script>


Клик по объекту показывает блок прямо под ней поверх контента
Весьма полезная вещь. Можно сделать что-то типо подсказок на сайте. Или тп.
<script type="text/javascript">
(function($) {
    $.fn.dropDownBlock = function(block, options) {
        var defaults = {
            speed: 'fast',
            top: $(this).height(),
            left: 0
        },
        opts     = $.extend(defaults, options),
          toggler = $(this),
          block     = $(block);
          toggler.css({'outline': 'none'})
          
          toggler.click(function(e) {
              e.preventDefault();
              $(block).css({
                'position'     : 'absolute',
                'top'         : (toggler.offset().top + opts['top']) + 'px',
                'left'         : (toggler.offset().left + opts['left']) + 'px'
              });
              if($(block).is(':visible')) $(block).fadeOut(opts['speed']);
              else $(block).fadeIn(opts['speed']);              
              this.focus();
          });
          toggler.blur(function() {
              $(block).fadeOut(opts['speed']);
          });
    };
})(jQuery);

// использовать так:
// клик на #toggler
// показывается #drop-down-list
$('#toggler').dropDownBlock($('#drop-down-list'), {
    speed: 'slow',
    left: 10
});
</script>

Не забываем подписываться на нашу рассылку!!) Форму подписки можно наблюдать в правой колонке.
  • Пишет: Taoufik (Гости) |
  • Сообщений: 0 |
  • 20 сентября, 11:09
  • #1
YMMD with that asenwr! TX
Добавить комментарий