BlockA fitTo BlockB

24 Дек
2011

Для чего?


— В одном из проектов необходимо было развернуть «панель» в sidebar’е так, чтобы панель скрыла sidebar
— Развернуть диалог в родительском блоке, так, чтобы он закрылего содержимое

Было решено написать инструмент в контексте jQuery — «Маленький», но удобный плагин jQuery.fitTo



Как использовать?


— Подгоним размеры и позицию #my_block к размерам и позиции блока #any_block
— Блок #my_block должен позиционироваться абсолютно

// Сделать ширину блока #my_block равной ширине #any_block
$('#my_block').fitWidthTo( $('#any_block') );

// Выравниваем высоту
$('#my_block').fitHeightTo( $('#any_block') );

// Выравниваем позицию по Y
$('#my_block').fitTopTo( $('#any_block') );

// Выравниваем позицию по X
$('#my_block').fitLeftTo( $('#any_block') );

// Сравняем размеры блоков (ширину и высоту)
$('#my_block').fitSizeTo( $('#any_block') );

// Сравняем позицию блоков (top и left)
$('#my_block').fitPosTo( $('#any_block') );

// Выравниваем и размеры и позицию блоков
$('#my_block').fitTo( $('#any_block') );

// А можно и так
$('#my_block').fitHeightTo( ... ).fitLeftTo( ... );

Демо

 

Код плагина



(function($) {
   //
   $.fn.fitWidthTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).css({ width:oElem.width() });
      });
   };
   //
   $.fn.fitHeightTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).css({ height:oElem.height() });
      });
   };
   //
   $.fn.fitSizeTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).fitWidthTo(oElem).fitHeightTo(oElem);
      });
   };
   //
   $.fn.fitLeftTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).css({ left:oElem.position().left });
      });
   };
   //
   $.fn.fitTopTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).css({ top:oElem.position().top });
      });
   };
   //
   $.fn.fitPosTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).fitLeftTo(oElem).fitTopTo(oElem);
      });
   };
   //
   $.fn.fitTo = function( oElem )
   {
      return this.each(function()
      {
         $(this).fitPosTo(oElem).fitSizeTo(oElem);
      });
   }
})(jQuery);
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх