All-For-Kompa.RU

Сегодня:
Карта сайта форум Главная
Скрыть рекламный блок

Всё для компа

chat

Реклама

Реклама

Календарь

«  Июль 2010  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031

Популярное

Партнёры



Развлекательный портал по игре Dota 2. У нас вы первым узнаете о последних игровых новостях, сможете почитать интересные статьи и гайды, посмотреть стримы популярных комментаторов и многое другое.

Про-софт - сайт професионального софта. Ето сайт не только софта но также игровых дополнений, музыки, фильмов, игр для ПК а также читов для ПК игр. Постоянное обновление материалов и каждый день появляется чтото новенькое!

Архив новостей

Авторизация


Реклама

Хочешь помочь проекту? Установи наш баннер!

Опрос

Если не спиться

1. лечь спать а не сидеть за компом до 6 утра
2. утопиться
3. обкуриться
4. воды напиться
5. задолбиться
6. обмочиться
7. выпрямиться

Реклама

Хочешь помочь проекту? Установи наш баннер!

Популярные тэги

Комментарии

Счетчики

На сайте: 1
Прохожие: 1
Пользователей: 0
Статус:

Счётчик тИЦ и PR Rambler's Top100

Раздел: uCoz

Интересное плавающее меню с действиями для чекбоксов на jQuery

АвторАвтор: leonP4

|Голосов: 0 ДатаДата: 24.07.2010, 02:10



Очень интересный плагин! Если хоть немного разбираться в html, css и
jQuery - можно адаптировать его под любые свои нужды!

Для
начала посмотрите ДЕМО

Если демонстрация вас удовлетворила -
приступим к установке:

Чекбоксы прописываются так:

<table
id="mytable">
  <tr>
  <td class="check">
  <input
id="check_1" name="check_1" type="checkbox" value="1" />
  </td>

  <td>Контент размещаем здесь</td>
  </tr>
  <tr>

  <td class="check">
  <input id="check_2"
name="check_2" type="checkbox" value="2" />
  </td>
  <td>Контент
размещаем здесь</td>
  </tr>
</table>

Меню, которое будет выходить при нажатии на чекбокс прописываем
так:

<div
id="actionsBox" class="actionsBox">
  <div id="actionsBoxMenu"
class="menu">
  <span id="cntBoxMenu">0</span>
  <a
class="button box_action">Архивировать</a>
  <a
class="button box_action">Удалить</a>
  <a
id="toggleBoxMenu" class="open"></a>
  <a
id="closeBoxMenu" class="button">X</a>
  </div>  
  <div
class="submenu">
  <a class="first
box_action">Переместить...</a>
  <a
class="box_action">Отметить как прочтенный</a>
  <a
class="box_action">Отметить как новый</a>
  <a
class="last box_action">Спам</a>
  </div>

</div>

Далее мы
рассмотрим стили для нашего меню. Будем использовать свойства CSS 3, так
что если вы хотите, чтобы данное меню работало в старых версиях
браузеров, то нужно адаптировать это маленькое меню с использованием
изображений.

Изначально мы хотим скрыть все меню. Таким образом
div actionsBox будет иметь следующий стиль:

.actionsBox{

  font-size:13px;
  font-family:Helvetica,Arial,Verdana;
  font-style:normal;

  left:50%;
  position:absolute;
  top:-50px;
  opacity:0;

  cursor:move;
}


Основное меню с кнопками будет иметь стиль:

.actionsBox
.menu{
  color:#47708F;
  width:240px;
  line-height:30px;
  text-shadow:1px
1px 0px #fff;
  padding:7px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;

  border-radius:5px;
  font-weight:bold;
  border:1px solid
#D9EAF2;
  background:#e8f4fa;
  background:
  -webkit-gradient(

  linear,
  left bottom,
  left top,
  color-stop(0.58,
rgb(217,234,242)),
  color-stop(0.93, rgb(232,244,250))
  );
  background:

  -moz-linear-gradient(
  center bottom,
  rgb(217,234,242)
58%,
  rgb(232,244,250) 93%
  );
  -moz-box-shadow:1px 1px
3px #999;
  -webkit-box-shadow:1px 1px 3px #999;
  box-shadow:1px
1px 3px #999;
}

Здесь
активно используется CSS 3: градиент, скругленные углы, тени текста и
прямоугольника создают прекрасный эффект, который не нуждается в
изображениях.

Кнопки будут иметь следующий стиль:

.actionsBox
.menu .button{
  padding:4px 7px;
  border:1px solid #D9EAF2;
  cursor:pointer;

  background:#e8f4fa;
  background:
  -webkit-gradient(
  linear,

  left bottom,
  left top,
  color-stop(0.38,
rgb(230,243,249)),
  color-stop(0.88, rgb(245,249,250))
  );
  background:

  -moz-linear-gradient(
  center bottom,
  rgb(230,243,249)
38%,
  rgb(245,249,250) 88%
  );
  -moz-border-radius:5px;
  -webkit-border-radius:5px;

  border-radius:5px;
  -moz-box-shadow:0px 1px 0px #f9f9f9;
  -webkit-box-shadow:0px
1px 0px #f9f9f9;
  box-shadow:0px 1px 0px #f9f9f9;
}

С помощью очень слабой тени мы создаем эффект легкой гравировки.
Когда кнопка получает фокус ввода, элемент получает белый фон:

.actionsBox
.menu .button:hover{
  background:#fff;
}

Тег span в меню предназначен для вывода количества выбранных
элементов списка:

.actionsBox .menu
span{
  padding:0px 10px;
}

Подменю изначально скрыты. Мы задаем им окантовку со скругленными
углами внизу:

.actionsBox
.submenu{
  display:none;
  width:120px;
  margin-left:100px;

  top:46px;
  right:10px;
  background:#fff;
  border:1px
solid #D9EAF2;
  border-top:none;
  -moz-border-radius:0px 0px
10px 10px;
  -webkit-border-bottom-left-radius:10px;
  -webkit-border-bottom-right-radius:10px;

  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;

  -moz-box-shadow:0px 1px 4px #ddd;
  -webkit-box-shadow:0px
1px 4px #ddd;
  box-shadow:0px 1px 4px #ddd;
}
.actionsBox
.submenu a{
  display:block;
  cursor:pointer;
  padding:10px
15px;
  border-top:1px solid #D9EAF2;
}

Последний пункт также будет иметь скругленные углы внизу:

.actionsBox
.submenu a.last{
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-left-radius:10px;

  -webkit-border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;

  border-bottom-right-radius:10px;
}

Первый пункт не будет иметь границы сверху:

.actionsBox
.submenu a.first{
  border-top:none;
}
.actionsBox
.submenu a:hover{
  background-color:#f9f9f9;
}

Пункт открыть/закрыть бедет иметь следующий стиль:

.actionsBox
.menu a.open,
.actionsBox .menu a.closed{
  border:1px solid
#D9EAF2;
  padding:4px 17px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;

  border-radius:5px;
  -moz-box-shadow:0px 1px 0px #f9f9f9;
  -webkit-box-shadow:0px
1px 0px #f9f9f9;
  box-shadow:0px 1px 0px #f9f9f9;
  cursor:pointer;

  opacity:0.6;
  margin-right:5px;
}
.actionsBox
.menu a.open{
  background:#fff url(../open.png) no-repeat center
center;
}
.actionsBox .menu a.closed{
  background:#fff
url(../closed.png) no-repeat center center;
}
.actionsBox
.menu a.open:hover,
.actionsBox .menu a.closed:hover{
  opacity:1.0;

}

Вот и весь стиль.
Конечно, вам придется адаптировать его, если вы собираетесь использовать
в своих приложениях.. В IE можно увидеть, что стили заданы очень
простые.

Сначала включим скрипты jQuery и jQuery UI, так как мы
собираемся сделать наше маленькое меню перемещаемым.

Основная
идея - сделать так, чтобы меню появлялось тогда, когда пользователь
отметит чекбокс. Также мы хотим скрывать его, если нет отмеченных
чекбоксов и реализовать возможность перетаскивать его с помощью мыши.
Меню должно следовать за пользователем, когда происходит прокрутка
контента страницы.

Также мы будем изменять класс строки таблицы
на "selected”, когда чекбокс становиться отмеченным.

Добавим
следующую функцию:

$(function() {
  /*
сообщает, если мы перетаскивали меню */
  var dragged = false;
   
  /*
таймаут для перемещения меню, когда прокручивается окно */
  var
moveBoxTimeout;
   
  /* делаем actionsBox перемещаемым */
  $('#actionsBox').draggable({

  start: function(event, ui) {
  dragged = true;
  },
  stop:
function(event, ui) {
  var $actionsBox = $('#actionsBox');
  /*

  вычисляем текущее расстояние от вреха окна до элемента
  данное
значение будет использоваться в дальнейшем, чтобы переместить меню
после прокрутки
  */
  $actionsBox.data('distanceTop',parseFloat($actionsBox.css('top'),10)
- $(document).scrollTop());
  }
  });
   
  /*
  когда
происходит нажатие кнопки мыши на чекбоксе,
  изменяем класс строки
таблицы,
  и показываем меню
  */
  $('#mytable
input[type="checkbox"]').bind('click',function(e) {
  var $this =
$(this);
  if($this.is(':checked'))
  $this.parents('tr:first').addClass('selected');

  else
  $this.parents('tr:first').removeClass('selected');
  showActionsBox();

  });
   
  function showActionsBox(){
  /* количество
отмеченных элементов */
  var BoxesChecked = $('#mytable
input:checked').length;
  /* обновляем количество отмеченных
элементов списка */
  $('#cntBoxMenu').html(BoxesChecked);
  /*
  если
есть хотя бы один отмеченный элемент, показываем меню,  
  в другом
случае - скрываем его
  */
  var $actionsBox = $('#actionsBox');

  if(BoxesChecked > 0){
  /*
  Положение меню вычислется
как сумма текущего положения верха окна с смещения
  Если мы не
перетаскивали окно, то смещение нам известно, в другом случае значение
хранится в distanceTop
  */
  if(!dragged)
  $actionsBox.stop(true).animate({'top':
parseInt(15 + $(document).scrollTop()) + 'px','opacity':'1'},500);
  else

  $actionsBox.stop(true).animate({'top':
parseInt($(document).scrollTop() + $actionsBox.data('distanceTop')) +
'px','opacity':'1'},500);
  }
  else{
  $actionsBox.stop(true).animate({'top':
parseInt($(document).scrollTop() - 50) +
'px','opacity':'0'},500,function(){
  $(this).css('left','50%');
  dragged
= false;
  /* если подменю открыты, то мы их закрываем */
  var
$toggleBoxMenu = $('#toggleBoxMenu');
  if($toggleBoxMenu.hasClass('closed')){

  $toggleBoxMenu.click();
  }
  });
  }
  }
   
  /*

  при прокручивании содержимого окна нужно установить меню в
правильную позицию
  */
  $(window).scroll(function(){
  clearTimeout(moveBoxTimeout);

  moveBoxTimeout = setTimeout(showActionsBox,500);
  });
   
  /*
зарываем/открываем подменю для других действий */
  $('#toggleBoxMenu').toggle(

  function(e){
  $(this).addClass('closed').removeClass('open');

  $('#actionsBox .submenu').stop(true,true).slideDown();
  },
  function(e){

  $(this).addClass('open').removeClass('closed');
  $('#actionsBox
.submenu').stop(true,true).slideUp();
  }
);
   
  /*
  закрываем
меню:
  скрываем его, и затем удаляем элемент из and DOM,
  что
означает, что оно больше не появиться
  */
  $('#closeBoxMenu').bind('click',function(e){

  $('#actionsBox').animate({'top':'-50px','opacity':'0'},1000,function(){

  $(this).remove();
  });
  });
   
  /*
  пример:
для всех действий (className:box_action)
  выводим сообщение в
котором указываем значения отмеченных элементов
  */
  $('#actionsBox
.box_action').bind('click',function(e){
  var ids = '';
  $('#mytable
input:checked').each(function(e,i){
  var $this = $(this);
  ids
+= 'id : ' + $this.attr('id') + ' , значение : ' + $this.val() + '\n';
  });

  alert('Отмеченные элементы:\n'+ids);
  });
});

Кнопка закрытия полностью удалит меню. Вы можете изменить действие,
адаптировав функцию. Например, сделать так, что пользователь опять
включит меню нажав на чекбокс.

Последняя функция - пример того,
как получать значения выделенных элементов. Ее можно также изменить,
подстроив под собственные нужды для обработки отмеченных значений.


Вот и все!

P.S.: Для того, чтобы получить полное представление о
работе меню, выберите несколько элементов, перетащите меню в другое
место и прокрутите страницу.Вы увидите как меню следует за прокруткой
страницы и вновь становится на свое место.

Все исходники и демо
находятся в прикреплённом архиве 

Источник урока: http://ruseller.com/lessons.php?rub=32&id=642




Правообладателям



Перед тем как скачать "Интересное плавающее меню с действиями для чекбоксов на jQuery", проверьте ВСЕ ссылки на работоспособность. На момент публикации "Интересное плавающее меню с действиями для чекбоксов на jQuery", все ссылки были в рабочем состоянии

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Популярные файлыНовые файлы
Call of Duty 5: World at ...[ Скачали 67353 раз ]
Амфибии, Гайд по ассасина...[ Скачали 31736 раз ]
Амфибии, Гайд по шаманам.[ Скачали 30644 раз ]
cs 1.6 patch v48 full[ Скачали 29015 раз ]
Русский бот PW Alfa v 2.6[ Скачали 17182 раз ]
Огромный пак глюков и баг...[ Скачали 12734 раз ]
civilization 5 скачать бе...[ Скачали 11922 раз ]
PW MP5[ Скачали 11139 раз ]
MHS-Bot-PW 2.3 ботовод[ Скачали 10393 раз ]
Niko Bellic (нико белич) ...[ Скачали 9999 раз ]
Millennia (2024/Ru/En/Mul...[ Добавлен 27.03.2024 ]
Wallpapers Girls №1032[ Добавлен 26.03.2024 ]
Bears In Space (2024/Ru/E...[ Добавлен 25.03.2024 ]
Bloody Ink (2024/Ru/En/Mu...[ Добавлен 25.03.2024 ]
Gas Station Simulator (20...[ Добавлен 24.03.2024 ]
We Are Football 2024 (202...[ Добавлен 24.03.2024 ]
Wallpapers Girls №1031[ Добавлен 23.03.2024 ]
Horizon Forbidden West: C...[ Добавлен 23.03.2024 ]
Alone in the Dark: Digita...[ Добавлен 22.03.2024 ]
Wallpapers Girls №1030[ Добавлен 22.03.2024 ]