Главная » Файлы » Прочие скрипты » jQuery
Оригинальная подсветка-указатель любых элементов сайта через плагин Seek на jQuery
23.06.14, 11:36:35

Скачать файл



C одной стороны простой, а с другой - просто незаменимый плагин, который позволит одним кликом на кнопку указать пользователям на нужные элементы вашего сайта

Для начала посмотрите ДЕМО (Пожамкайте на кнопки test в левой половине сайта)

Установка:

После /head на нужных страницах сайта вставляйте:
Код
<script src="/js/jquery.seek.js" type="text/javascript"></script>
  <script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <link href="/css/seek-demo.css" rel="stylesheet" type="text/css" />


Сразу после предыдущего кода вставляйте:

1) Для эффекта подсветки формы:
Код
<script type="text/javascript">
  $(function() {  
  $("#btnTestForm").click( function() {  
  $("#fsForm").seek({ css: { borderStyle: "dotted", borderWidth: "1px", borderColor: "Green" },  
  animation: { speed: 600 }  
  });  
  });  

  $("#btnTestForm2").click( function() {  
  $("#txtNome, #txtCognome").seek({ css: { borderStyle: "dotted",
  borderWidth: "1px",
  borderColor: "Green" },  
  animation: { speed: 600 },  
  startFrom: $("#fsForm")  
  });  
  });  

  });
  </script>


2) Для подсветки картинок:
Код
<script type="text/javascript">
  $(function() {  

  $("#btnTestImages").click( function () {  
  $("fieldset img").seek({ css: { borderStyle: "solid", borderWidth: "2px" },  
  animation: { easeFunction: "easeInExpo", speed: 900 },  
  multiple: { simultaneous: false, interval: 300 }  
  });  
  });  

  $("fieldset img").click( function() {  
  $(this).seek({ css: { borderStyle: "solid", borderWidth: "2px" },  
  animation: { easeFunction: "easeInExpo", speed: 500 }  
  });  
  });  

  });  
  </script>


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

1) Форма:
Код
<input type="button" id="btnTestForm" value="Кнопка выделения всей формы" />  
  <input type="button" id="btnTestForm2" value="Кнопка выделения полей формы" />  

  <fieldset id="fsForm">  
  <legend>Это ваша форма</legend>  
  <label>Логин  
  <input id="txtNome" type="text" />
  </label>
  <label>Пароль  
  <input id="txtCognome" type="text" />
  </label>
  <input type="button" id="btnSubmit" onclick="javascript:return false;" value="ОК" />
  </fieldset>


2) Группа картинок:
Код
<input type="button" id="btnTestImages" value="Кнопка поочерёдного выделения всех картинок" />

  <fieldset id="fsPhotogallery">
  <legend>Здесь ваши картинки (Клик по картинке для выделения</legend>
  <img src="Ссылка на картинку" />
  <img src="Ссылка на картинку" />
  <img src="Ссылка на картинку" />
  <img src="Ссылка на картинку" />
  </fieldset>


Внимательно всмотритесь в предоставленные коды, изучите соотношения и, когда разберётесь (У меня заняло секунд 30) - сможете выделить абсолютно любой элемент на сайте. Если возникнут какие-либо вопросы - пишите в комментариях

Осталось лишь залить два скрипта из прикреплённого архива в папку js и стиль в папку css

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