|
Переключатели страниц в стиле uCoz
|
|
Четверг, 25.08.2011, 22:57
Проверенный
Достаточно часто видешь на форумах, что многие ищут стили переключателей страниц на 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.
Автор: TRANE73
Источник: http://trane73.ru/ |
Пост отредактировал Оверко - Четверг, 25.08.2011, 23:04 |
|
Четверг, 25.08.2011, 23:09
Проверенный
Отлично! Мне нравится  наконец что то новенькое |
|
|
Четверг, 25.08.2011, 23:18
Проверенный
Спасибо TRANE73 и Оверко 
Поставил Синии:D |
|
Четверг, 25.08.2011, 23:42
Проверенный
| fantan, А мне то за что?) Пользуйтесь, благодарен TRAN'у) |
|
Четверг, 25.08.2011, 23:44
Проверенный
| Оверко,за тош-то выложил другим пользователям;) |
|
Пятница, 26.08.2011, 00:11
Пользователь
| Вау, мне нравиться очень. Беру, спасибо! |
₪₪₪₪₪₪
₪₪₪₪₪
₪₪₪₪
₪₪₪
₪₪
₪ |
|
Пятница, 26.08.2011, 03:58
Проверенный
А для новостей подходит? а то поставил на новости и чёт несканало!
Или только для форума? |
_____________________________
Z330223318801
_____________________________
R370607431560
____________________________
Работаю над сайтом http://rus-dtp.ru/ |
|
Пятница, 26.08.2011, 08:44
Пользователь
как раз таки эти переключатели для всего сайта кроме форума)
если возникают проблемы нужно удалить старые стили связанные с переключателями
мною были проверены во всех модулях и стоят на моем сайте, смотрите источник |
|
Пятница, 26.08.2011, 21:37
Заблокированные
| TRANE73, Куда ставить, пробывал и на главную каталога файлов и в раздел... |
|
Пятница, 26.08.2011, 23:15
Пользователь
| [b]Стилл,[/b] после $BODY$ и $PAGE_SELECTOR$ естественно |
|
Суббота, 27.08.2011, 10:44
Пользователь
TRANE73. как раз себе хотел на сайте! СПС!  |
|
Суббота, 14.04.2012, 09:32
Проверенный
| Вещь нужная но я непонял что и куда вставлять |
|
Проверенный
| sd68, после боди поставь на нужных тебе страницах |
╔► Я очень отзывчев.
╠► Не знаешь? Спрашивай.
╚► Помощ всем и каждому. |
|
Четверг, 19.04.2012, 18:39
Проверенный
| Мульти напиши в лс я че то туплю не пойму где их ставить |
|
