[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
переключатель страниц на css3 и jQuery для Каталога Файлов
offtop
Дата: Воскресенье, 19.05.2013, 05:29 | Сообщение # 1
Оффлайн
Пользователи
Сообщений: 216
IP: Скрытная информация


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

Установка:

На страницах Каталога файлов, где есть переключатели, замените $PAGE_SELECTOR$ на:
Код
<style>   
  .aponewselect {   
   white-space:normal;   
   width:500px;   
  }   

  .swchItem, .swchItemA, .swchItemDots {   
   padding:1px 3px 1px 3px;   
   margin-right:3px;   
   margin-bottom:2px !important;   
   background:rgba(220, 220, 220, 0.8);   
   border-top:1px solid #aaa;   
   border-left:1px solid #aaa;   
   border-right:1px solid #eee;   
   border-bottom:1px solid #eee;   
   border-radius:2px;   
   min-width:20px;   
   height:15px;   
   text-align:center;   
   cursor:pointer;   
   transition: border .3s linear, background .2s linear;   
  -moz-transition: border .3s linear, background .2s linear;   
  -webkit-transition: border .3s linear, background .2s linear;   
  -o-transition: border .3s linear, background .2s linear;   
   text-decoration:none !important;   
   color:#777 !important;   
  float:left;   
  }   

  .swchItemA, .swchItemDots {   
   background:rgba(240, 220, 220, 0.8);   
  }   

  .swchItem:hover {   
   border-bottom:1px solid #999;   
   border-right:1px solid #999;   
   border-top:1px solid #eee;   
   border-left:1px solid #eee;   
   background:rgba(220, 245, 220, 0.8);   
  }   

  .swchItem:active {   
   border-bottom:1px solid #ddd;   
   border-right:1px solid #ddd;   
   border-top:1px solid #eee;   
   border-left:1px solid #eee;   
   background:rgba(220, 240, 220, 0.8);   
  }   
  </style>   

  <div class="aponewselect">$PAGE_SELECTOR$</div>   

  <script>   
  // ApoTeam (c) 2013   
   $('div.aponewselect').prepend('<a class="swchItem" href="javascript://" onclick="$(\'a#aposwitchnew\').remove();$(\'span.swchItemDots\').show();return false;">×</a>');   
   $('span.swchItemDots').click(function() {   
  var apothisprev = parseInt($(this).prev().text()) + 1;   
  var apothisnext = parseInt($(this).next().text());   
  for(i=apothisprev;i<apothisnext;i++) {   
   $(this).before('<a class="swchItem" id="aposwitchnew" style="display:none;" href="javascript://" rel="nofollow" onclick="spages(' + i + ');return false;">' + i + '</a>');   
  }   
   $(this).hide();   
   $('a.swchItem').fadeIn();   
  });   
  // apo (c) 2013   
  </script>


...
Прикрепления: 9228734.png (16.0 Kb)
  • Страница 1 из 1
  • 1
Поиск: