Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Новое сворачивание категорий


Новое сворачивание категорий

Сообщений 1 страница 20 из 153

1

Добавил к сворачиванию категорий красивый эфект, сохранение осталось, упростил настройку
в html-верх

<script type="text/javascript">
//cookies
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

var aimg = {
open: '-',
close: '+'
}
function categorytoggle(el){
var cat = $(el).parents('div.category');
cat.children('div.container').toggle('slow');
el.innerHTML = el.innerHTML == aimg.open ? aimg.close : aimg.open;
var catc = getcookie(cat.attr('id'));
catc = catc == 'close' ? 'open' : 'close';
setcookie(cat.attr('id'),catc,3600*24*30*1000);
}
</script>

вместо выделенных + и - можно вставить любой другой символ или картинку

Код:
<img src="адрес" border="0" />

+ соответствует закрытому блоку, а - открытому

в хтмл-низ ставить это

Код:
<script type="text/javascript">
$('#pun-main div.category > h2 div.catleft').after('<a href="#" onclick="categorytoggle(this); return false;" style="float: right;">'+aimg.open+'</a>');
for(var i=1;i<=$('#pun-main div.category').length;i++)
    if(getcookie('pun-category'+i)=='close'){
	$('#pun-category'+i+' > div.container').css({display: 'none'});
	$('#pun-category'+i+' > h2 > a').html(aimg.close)
}
</script>

+16

2

Здорово!!  :flag: И теперь и в мозилле при обновлении страницы свернутые категории сохраняются!!

Вот только если ставить картинкой + или - тогда при свертывании блока картинка не сразу меняется, н-р блок закрыли, картинка осталась с минусом, плюс появляется на этом месте только при обновлении страницы, пример..

0

3

mkusher
http://mybb.ru/f/collection/0211.gif Я ваш поклонник)  ^^  http://mybb.ru/f/collection/0213.gif

0

4

Молодец, Олег! неплохо развил идею ;)

0

5

если вместо плюса и минуса вставлять изображения, то желательно прописывать к ним всплывающую при наведении курсора подсказку

<img src="адрес" alt="Cкрыть раздел" border="0" />
<img src="адрес" alt="Показать раздел" border="0" />

0

6

Для картинок проще добавлять к div.catleft')  блок span с изменяемым/добавляемым классом - и менять класс - а картинку ставить бекграндом в сss
Объясняю почему - HTML код разные браузеры преобразуют по разному - и при втором считывании ( а картинка содержит html теги - использовать проверку на el.innerHTML == aimg.open ? не оч логично, устанавливать либо как выше, через класс, либо же действовать через атрибут scr
тогда и проверка будет логична  и, в принципе, наверно проще сделать клик функцию по картинке, без добавок <a href=# , которые в некоторых браузерах вызывают дергание скроллинга картинки в верх окна
:blush:

Отредактировано Deff (Ср, 26 Янв 2011 15:09:14)

0

7

Чтобы изменилась картинка надо обновить страницу...
Как сделать тобы картинка сама обновлялась?

Отредактировано Exampl (Ср, 26 Янв 2011 13:46:12)

0

8

Romych написал(а):

желательно прописывать к ним всплывающую при наведении курсора подсказку

Romych написал(а):

alt="Показать раздел"

:disappointed: Это не всплывающая подсказка, это альтернативный текст на месте изображения для тех, кто выключил в браузере графику.

Код:
title="Текст подсказки"

Вот это всплывающая подсказка.
А в целом, Олег молодец!

+1

9

:blush: Только для картинок /поправил как трепалсо в посте 6
в html-верх

<script type="text/javascript">
//cookies
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

var aimg = {
open: 'http://savepic.ru/2290084.png',
close: 'http://savepic.ru/2275748.png'

}
</script>

в хтмл-низ ставить это

<script type="text/javascript"><!--Cворачивание категорией Ч2-->
$('#pun-main div.category > h2 div.catleft').after('<span class="offctgr" style="float: right;"><img src="'+aimg.open+'" title="показать/cкрыть" /></span>');
$('#pun-main div.category').each(function (i) {
    var ctgId=$(this).attr('id');
         if(getcookie(ctgId)=='close'){
   $('#'+ctgId+' > div.container').css({display: 'none'});
   $('#'+ctgId+' > h2 > .offctgr img').attr("src",aimg.close)}
});

$('span.offctgr').click(function(){
var cat=$(this).parents('div.category').attr('id');
$(this).parents('div.category').children('div.container').toggle('slow');
var s = $(this).find("img").attr("src") == aimg.open ? aimg.close : aimg.open;
$(this).find("img").attr("src",s)
var catc = getcookie(cat);
catc = catc == 'close' ? 'open' : 'close';
setcookie(cat,catc,3600*24*30*1000);
      return false; });
</script>

красным - ссылки на картинки

Для полного смыкания блоков иногда стоит поставить в HTML верх такой код

<style>
.category h2{margin-top: -7px!important;}
#pun-stats h2{margin-top: -17px!important;}
</style>

Красное - регулировка


Для тех, кто скрывает названия категорий, ставя свои картинки, - такой код: (*дополнительно в HTML верх

<style>
.offctgr{
display:block!important;
visibility:visible!important;
}
</style>

http://hostjs-mybb2011.narod.ru/mainOffcategor.htm

Отредактировано Deff (Пт, 25 Мар 2011 19:31:22)

+5

10

Deff написал(а):

Только для картинок

Deff, красота!! да, картинки тогда меняются, все работает!! http://mybb.ru/f/collection/0208.gif

0

11

mkusher, респект, отличный скрипт!

кто-нибудь подскажет, как можно изменить цвет + и - в скрипте?

а также может быть есть какой-нибудь сайт, где можно подобрать иконки для + и - ?

0

12

Caligula написал(а):

а также может быть есть какой-нибудь сайт, где можно подобрать иконки для + и - ?

я обычно ищу здесь - http://www.iconsearch.ru/

вот плюс - http://www.iconsearch.ru/search/?q=%EF% … =0&y=0

вот минус - http://www.iconsearch.ru/search/?q=%EC% … =0&y=0

размер иконок вверху справа

+1

13

Romych, спасибо
а просто изменить цвет + и - никак нельзя? меня они устраивают в принципе безо всяких иконок. проблема в том, что они по цвету сливаются со стилем форума и потому хочу просто сменить цвет

0

14

Caligula написал(а):

а просто изменить цвет + и - никак нельзя?

Добавить класс к ссылке в скрипте, идущим HTML низ

<script type="text/javascript">
$('#pun-main div.category > h2 div.catleft').after('<a href="#" class="offctgr" onclick="categorytoggle(this); return false;" style="float: right;">'+aimg.open+'</a>');
for(var i=1;i<=$('#pun-main div.category').length;i++)
    if(getcookie('pun-category'+i)=='close'){
$('#pun-category'+i+' > div.container').css({display: 'none'});
$('#pun-category'+i+' > h2 > a').html(aimg.close)
}
</script>

И поставить css код, задающий цвет в HTML верх

<style>
.offctgr {
color:#AAAA00!important;
font-weight:bold!important;
text-decoration:none!important;
font-size:23px!important;
margin-top:-3px;
}
</style>

Красным : цвет; размер; смещение

PS:(*скрипт же в HTML верх, устанавливаем - из первого  сообщения

Отредактировано Deff (Ср, 26 Янв 2011 23:55:45)

+1

15

Deff, спасибо.

0

16

mkusher, низкий поклон

0

17

Добавки
Добавка Инфо-панели, устанавленной непосредственно перед первой категорией сворачиваемой по скрипту сообщения 9,(*Код ставится после установки кодов скриптов "Новое сворачивание категорий"
Посмотреть тут > http://hostjs-mybb2011.narod.ru/MyInfoblock.htm

В объявление. идёт эта часть:

Код:
<!-- Таблица 00 --><!-- Добавка Инфо-панели-->
<!--Код  идет совместно с Новым сворачиванием категорий -->
<style>	
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 200px;
text-align: center;
font-size: 12px;
width: 720px;
}

.submenutext {
color: #fff;
display: none; 
height: 60px;
}


#MenuTxT {
 background:url(http://savepic.ru/2287761.png) no-repeat center;
text-shadow: #755a57 1px 1px 5px,#9C816C -1px -1px 5px,#91776b  1px 1px 1px;
}
</style>
<div class="MyInfo container" style="display:none">
<div id="pun-category123" class="category">
<h2><div class="catleft"><!-- --></div><span>Ваше Название</span><div class="catright"><!-- --></div></h2>
<div class="container">
<center><table style="width: 723px;">
 <tbody>
  <tr>
   <td>
    <div id="menu"> <b>
<span alt=#sm1 "style="cursor: pointer;">Кнопка 1</span>
<span alt=#sm2 "style="cursor: pointer;">Кнопка 2</span>
<span alt=#sm3 "style="cursor: pointer;">Кнопка 3</span>
<span alt=#sm4 "style="cursor: pointer;">Кнопка 4</span>
<span alt=#sm5 "style="cursor: pointer;">Кнопка 5</span>
           </b>
    </div>
   </td>
  </tr>
  <tr>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center"> 
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
Контент 1-й кнопки
</div>
     <div id="sm2" class="submenutext"><br /><br />

Контент 2-й кнопки
</div>
     <div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
     <div id="sm4" class="submenutext"><br /><br />
Контент 4-й кнопки
</div>
     <div id="sm5" class="submenutext"><br /><br />
Контент 5-й кнопки
</div>

</div><!--конец контента кнопок-->
   </td>
</tr>
 </tbody>
</table></center><!-- End/Таблица 00 --></div></div></div>

А эту часть, устанавливаем прямо перед скриптом сворачивания категорий из 9-го сообщения, той частью, что идёт в HTML низ

Код:
<script type="text/javascript"><!--Cкрипт Добавки Инфо-блока перед первой категорией -->
<!--устанавливать непосредственно  перед скриптом сворачивания категорий HTML низ из 9 сообщения-->
$("#pun-main .category:first").before($(".MyInfo.container").remove().html())
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });});
</script><!--End/Cкрипт Добавки Инфо -->

//Основная идея Таблички от RPS

Отредактировано Deff (Сб, 29 Янв 2011 17:34:42)

0

18

А нельзя ли как то добавить сворачивание в панель личной информации?

0

19

lenhenster написал(а):

А нельзя ли как то добавить и сворачивание панели личной информации?


Попробуйте поменять в первой и второй части скрипта для панели  части, на выделенное  красным

...
В скрипте для юзера

name=name.substring(0)
arr[i].innerHTML="<div id=\"pun-category126\" class=category><h2><div class=\"catleft\"></div><span>личная информация</span></h2><div class=container><table border=0>

...
В скрипте для гостя

name=name.substring(0)
arr[i].innerHTML="<div id=\"pun-category124\" class=category><h2><div class=\"catleft\"></div><span>информация для гостя</span></h2><div class=container><table border=0>

(*Поправил

Отредактировано Deff (Пт, 28 Янв 2011 11:29:47)

+1

20

Deff, сворачивает, но не запоминает сворачивание

+1


Вы здесь » Единый форум поддержки » Новые возможности форумов » Новое сворачивание категорий