Использование метода $.clone() для копирования меню навигации 


Использование метода $.clone() для копирования меню навигации

Опубликовано

 

Не так давно в моем блоге появилось дополнительное фиксированное меню, которое отображается и скрывается в документе при определенных условиях. В него я поместил копию уже существующего блока с категориями разделов (правый верхний блок), при помощи метода $.clone() библиотеки jQuery.

Метод $.clone()

Метод $.clone() предназначен для создания копии элементов обернутого набора.

Листинг 1

clone(copyHandlers)

Параметр copyHandlers принимает логические значения true, false. Если параметр имеет значение true, то вместе с элементами будут скопированы все обработчики событий (если таковые имеются), если false то обработчики событий соответственно скопированы не будут.

Листинг 2

$("селектор1").clone(true).prependTo("селектор2");

В листинге 2 приведен пример по клонированию. Все элементы обернутого набора и их события попадающие под условие селектора 1 клонируются в элемент указанный в селекторе 2,

HTML

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

  • Блок, источник содержания <div id="Categories"></div>
  • Фиксированный блок, в который будет помещена копия содержания из источника <div id="CategoriesClone"></div>

Листинг 3. Содержимое блока источника.

<div id="Categories" class="Categories">
 <ul>
  <li><a href="#">Категория 1</a></li>
  <li><a href="#">Категория 2</a></li>
  <li><a href="#">Категория 3</a></li>
  <li><a href="#">Категория 4</a></li>
  <li><a href="#">Категория 5</a></li>
  <li><a href="#">Категория 6</a></li>
 </ul>
</div>

  • Также в документ необходимо поместить еще два блока, которые служат для задания границ ограничения видимости фиксированного блока:

<div id="top">…</div> - верхняя граница
<div id="bottom">…</div> - нижняя границы

jQuery

Далее представлен код на jQuery, для клонирования содержания из источника в фиксированный блок, а также для задания условий, отображения фиксированного блока на экране.

Листинг 4

<script type="text/javascript">
$(document).ready(function(){

 //Фиксированный блок, содержащий клонированные категории скрывается с экрана
 $("#CategoriesClone").css("display","none");

 //Код, находящийся в функции выполняется при скроллинге мыши
 $(window).scroll(function () {

  /*
  Далее определяются переменные содержащие значения пределов в документе  (верхний, нижний) переходя за которые   фиксированный блок с категориями либо отображается, либо скрывается
  */
  //Верхний предел
  var PredelTOP=$("#top").offset().top+$("#top").height()+10;
  //Нижний предел
  var PredelBOTTOM=$("#bottom").offset().top;

  /*
  Если значение координаты по оси Y текущего положения документа больше верхнего предела и меньше нижнего предела,  то фиксированное меню отображается на экране
  */
  if (PredelTOP<$(document).scrollTop() &&
  PredelBOTTOM>($(document).scrollTop()+$(window).height())){

   if ($("#CategoriesClone").css("display")=="none"){

    //Клонирование категорий и фиксация блока с помощью CSS свойств
    $("#Categories")
    .children()
    .clone(true)
    .appendTo($("#CategoriesClone"))
    .parent()
    .css({
    "position":"fixed",
    "top":"10px",
    "z-index":"100"
    })
    .fadeIn();

   }

  //Иначе фиксированное меню скрывается с экрана
  }else{

   if ($("#CategoriesClone").css("display")=="block")
    $("#CategoriesClone").hide().children().remove();

  }

 });

 //При клике на категорию, на экране отображатся сообщение
 $("div.Categories a").click(function(){
  alert($(this).text());
  return false;
 });

});
</script>