Главная » Файлы » Прочие скрипты » jQuery

Своё контекстное меню на нужных элементах через плагин chromeContext на jQuery для uCoz
24.06.14, 18:40:04



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

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

Моё тестирование в фидле: КЛИК

Установка:

Сначала подключим главную функцию:

После < /head > на нужных страницах вставляйте:
Код
<script>  
  (function ($) {
  var cctxId = 0;
  $.fn.chromeContext = function (options) {
  var trigger = this;
  var menu = $('<div class="cctx"/>');
  var l = options.items.length;
  var i;
  for (i = 0; i < l; i++) {
  var item = options.items[i];
  var el = $('<div/>');
  if (item.separator) {
  el.addClass('cctx-separator');
  } else {
  el.addClass('cctx-item');
  el.text(item.title);
  el.on('click', item.onclick);
  }
  menu.append(el);
  }
  menu.attr('data-cctxId', cctxId);
  $('body').append(menu);
  this.attr('data-cctxId', cctxId).on('contextmenu', function (e) {
  var menu = $('.cctx[data-cctxId="' + $(this).attr('data-cctxId') + '"]');
  e.preventDefault();
  menu.css('top', e.clientY).css('left', e.clientX).show();
  }).parents().on('mouseup', function () {
  $('.cctx:visible').hide();
  });
  cctxId++;
  return this;
  };
}(jQuery));  
  </script>


Далее создаём обработчики правого клика для двух элементов на странице с id="one" и id="two". Посмотрите, как происходит создание пунктов

В самый низ страницы после < /body > вставляйте:
Код
<script>  
  $(function () {
  $('#one').chromeContext({
  items: [{
  title: 'Привет',
  onclick: function () {
  console.log('Привет.');
  }
  }, {
  separator: true
  }, {
  title: 'Я контекстное меню',
  onclick: function () {
  console.log('меню.');
  }
  }]
  });
  $('#two').chromeContext({
  items: [{
  title: 'apo-ucoz.com 1',
  onclick: function () {
  alert('Вы кликнули по первому пункту')
  }
  }, {
  title: 'apo-ucoz.com 2',
  onclick: function () {
  console.log('two.');
  }
  }, {
  title: 'apo-ucoz.com 3',
  onclick: function () {
  console.log('three.');
  }
  }, {
  title: 'apo-ucoz.com 4',
  onclick: function () {
  console.log('four.');
  }
  }, {
  title: 'apo-ucoz.com 5',
  onclick: function () {
  console.log('five.');
  }
  }, {
  title: 'apo-ucoz.com 6',
  onclick: function () {
  console.log('six.');
  }
  }]
  });
});  
  </script>


Давайте стилизуем наше контекстное меню и демо блоки

В самый низ css вставляйте:
Код
.box {
  width:200px;
  height:200px;
  float:left;
  margin:20px;
  padding:5px 10px;
  font-size:30px;
  font-weight:bold;
  color:#fff;
  text-shadow:1px 1px 2px #555
}
#one {
  background-color:#ff8080
}
#two {
  background-color:#84ff84
}
.cctx {
  display:none;
  position:absolute;
  min-width:300px;
  background-color:#fff;
  color:#000;
  border:solid 1px #bababa;
  box-shadow:2px 2px 4px #ababab;
  font-family:'Segoe UI', Tahoma, sans-serif;
  font-size:12px
}
.cctx-item {
  cursor:default;
  padding:7px 25px
}
.cctx-item:hover {
  background-color:#efefef
}
.cctx-separator {
  padding-bottom:5px;
  margin-bottom:5px;
  border-bottom:solid 1px #e9e9e9
}
#showme {
  float:left
}
pre {
  background-color:#f6f6f6;
  padding:10px
}


В то место, где должны быть блоки со своим контекстным меню, вставляйте:
Код
<div id="one" class="box">one</div>
<div id="two" class="box">two</div>


Вот и всё. По всем вопросам пишите в комментарии

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: нужных, элементах, контекстное, на, плагин, Через, Своё, chromeContext, Меню
Просмотров: 305 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: