[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Переключатели страниц в стиле uCoz
Переключатели страниц в стиле uCoz
Pr0f1x
Дата: Вторник, 30.08.2011, 22:40 | Сообщение # 1
Администратор
    Сообщений:
    841
    Награды:
    2
    100

Достаточно часто видешь на форумах, что многие ищут стили переключателей страниц на uCoz. Вот и мне надоели стандартные, поэтому сначала я сделал обычные серые чисто на CSS, а недавно поставил в стиле uCoz на jQuery. Новые переключатели страниц достаточно просты и удобны, однако замечу, что они выполнены в нескольких цветовых решениях, поэтому выложу попорядку.
Для начала установите скрипт перед </body>:
Code
<script type="text/javascript">      
  $('.swchItemA, .swchItemA1').each(function(){    
  $(this).html('<div style="display:inline-block !important;margin-bottom:-5px;" class="MmenuOver"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="MmenuLeft"></td><td class="MmenuCenter"><div style="padding:2px 5px;" class="mmenuItem"><b>'+$(this).html()+'</b></div></td><td class="MmenuRight"></td></tr></table></div>')    
  });    
  $('.swchItem, .swchItem1').each(function(){    
  $(this).html('<div style="display:inline-block !important;margin-bottom:-5px;" onmouseover="this.className=\'MmenuOver\';" class="MmenuOut" onmouseout="this.className=\'MmenuOut\'"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="MmenuLeft"></td><td class="MmenuCenter"><div style="padding:2px 5px;" class="mmenuItem">'+$(this).html()+'</div></td><td class="MmenuRight"></td></tr></table></div>')    
  });    
  </script>

Для голубых переключателей добавьте в CSS код:
Code
.MmenuOut, .MmenuOver {height:21px;margin:2px;color:#000;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/1/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/1/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/1/tb-btn-sprite.gif') repeat-x 0 -42px;}

Для того, чтобы на вашем сайте появились зеленые переключатели, добавьте в вашу табличку стилей этот код:
Code
.MmenuOut, .MmenuOver {height:21px;margin:2px;color:#000;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/2/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/2/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/2/tb-btn-sprite.gif') repeat-x 0 -42px;}

Если хотите серые переключатели страниц, то добавьте в ваш CSS данный стиль:
Code
.MmenuOut, .MmenuOver {height:21px;margin:2px;color:#000;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/3/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/3/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/3/tb-btn-sprite.gif') repeat-x 0 -42px;}

Если хотите увидеть на сайте стиль розовых переключателей:
Code
.MmenuOut, .MmenuOver {height:21px;margin:2px;color:#000;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/4/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/4/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/4/tb-btn-sprite.gif') repeat-x 0 -42px;}

Оранженвые переключатели страниц появляться после установки этого кода:
Code
.MmenuOut, .MmenuOver {height:21px;margin:2px;color:#000;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/5/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/5/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/5/tb-btn-sprite.gif') repeat-x 0 -42px;}

А если вам нужны простые черные переключатели, берите код:
Code
.MmenuOut {height:21px;margin:2px;color:#000;}    
  .MmenuOver {height:21px;margin:2px;color:#fff;}    
  .MmenuLeft,.MmenuRight {width:3px;height:21px;}    
  .MmenuOver .MmenuLeft {background: transparent url('/.s/img/wd/6/tb-btn-sprite.gif') no-repeat 0 0;}    
  .MmenuOver .MmenuRight {background: transparent url('/.s/img/wd/6/tb-btn-sprite.gif') no-repeat 0 -21px;}    
  .MmenuOver .MmenuCenter {background: #C8CACE url('/.s/img/wd/6/tb-btn-sprite.gif') repeat-x 0 -42px;}

Вот такие простые стили можно сделать всего лишь парой строк на JS и столько же в CSS.
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Переключатели страниц в стиле uCoz
  • Страница 1 из 1
  • 1
Поиск: