Помощь Изменить список категорий на такой

Хомячок · 24 Янв 2011

Привет всем! Решил изменить вид категорий при добавлении новости на такой:

Выводятся все категории. При нажатии выделяется серым и запоминается как выделенная категория. При отправке передается вроде со всей формой. Очень удобно имхо)

Но содрать с сайта и прикрутить к дле не получается! Может кто-нибудь видел подобный модуль к дле или другим движкам. Мне главное рабочий html+js код (чтобы можно было это передавать с формой), остальное сам прикручу).

Могу дать ссылку на сайт, но там надо региться.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Juri · 24 Янв 2011

Сделайте чекбоксами в 2-3 столбика или сколько хотите, будет то же самое, даже удобнее

fri · 25 Янв 2011

Судя по всему там флеш используется(чисто по внешнему виду).

В дле выбор категорий осуществляется селектом, и я бы не стал трогать этот момент(программы постеров если это варезник не будут работать, довольно много кода надо править), лучше если уж совсем неймется просто его украсьте.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Если чекбоксами сделаете

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Будет ничем не хуже

Хомячок · 25 Янв 2011

Спасибо за варианты! Но вариант на том сайте компактней и наглядней всех предложенных. Селект вообще не удобен при выборе нескольких категорий, не видно все и надо оторожно крутить, чтоб найти нужную. Либо надо увеличивать его размер, но лучше уж тогда чекбоксами в несколько столбцов.

Работет на чистом javascript + библиотека prototype.js. Почти удалось содрать, только в ie не работает почему-то, да и при подключении prototype.js у меня дизайн портится. Поэтому, если нет больше вариантов, придется мне делать чекбоксами.

fri · 25 Янв 2011

Хомячок написал(а):
Спасибо за варианты! Но вариант на том сайте компактней и наглядней всех предложенных. Селект вообще не удобен при выборе нескольких категорий, не видно все и надо оторожно крутить, чтоб найти нужную. Либо надо увеличивать его размер, но лучше уж тогда чекбоксами в несколько столбцов.
Работет на чистом javascript + библиотека prototype.js. Почти удалось содрать, только в ie не работает почему-то, да и при подключении prototype.js у меня дизайн портится. Поэтому, если нет больше вариантов, придется мне делать чекбоксами.

Мог бы помочь, но дело в том что по вашей ссылке я вообще не нашел этого селекта

JSilver · 25 Янв 2011

вот, нацарапал на коленке...

Код:

<html>
<script>
var slct="slct";
function yo() {
var st="";
x=document.getElementById(slct);
x.multiple=true;
x.style.visibility = 'hidden';
for (var i=0;i<x.length;i++)
  {
  st+='<span onclick="sw('+i+',this);"';
  if (x.options[i].selected==true) {
    st+=' style="border:thin dotted #FF0000;"';
  }
  st+='>'+x.options[i].text+'</span>&nbsp; ';
  };
document.getElementById("my").innerHTML='<div id="my">'+st+'</div>';
}
function sw(vl,cn) {
x=document.getElementById(slct);
if (x.options[vl].selected==true) {
  x.options[vl].selected=false;
  cn.style.border="0px";
} else {
  x.options[vl].selected=true;
  cn.style.border="thin dotted #FF0000";
}
}
</script>
<body onload="yo();">
<form id=frm>
<select id=slct>
<option value=1>val1
<option value=2>val2
<option value=3>val3
<option value=4>val4
</select>
<div id="my"></div>
</form>
</body>
</html>

Хомячок · 25 Янв 2011

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

вот, нацарапал на коленке...

Код:

<html>
<script>
var slct="slct";
function yo() {
var st="";
x=document.getElementById(slct);
x.multiple=true;
x.style.visibility = 'hidden';
for (var i=0;i<x.length;i++)
  {
  st+='<span onclick="sw('+i+',this);"';
  if (x.options[i].selected==true) {
    st+=' style="border:thin dotted #FF0000;"';
  }
  st+='>'+x.options[i].text+'</span>&nbsp; ';
  };
document.getElementById("my").innerHTML='<div id="my">'+st+'</div>';
}
function sw(vl,cn) {
x=document.getElementById(slct);
if (x.options[vl].selected==true) {
  x.options[vl].selected=false;
  cn.style.border="0px";
} else {
  x.options[vl].selected=true;
  cn.style.border="thin dotted #FF0000";
}
}
</script>
<body onload="yo();">
<form id=frm>
<select id=slct>
<option value=1>val1
<option value=2>val2
<option value=3>val3
<option value=4>val4
</select>
<div id="my"></div>
</form>
</body>
</html>

Спасибо! Почти как надо, только осталось кое-что поправить. Вот, я загрузил скрипт со своими поправками:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Там осталось несколько косяков:
1. первое значение val1 почему-то выделяется всегда, независимо от наличия selected"
2. можно <body onload="yo();"> как-то по другому сделать, просто это будет только при добавлении новости, а функция будет на всем сайте выполняться(((
3. Хотелось бы иметь возможность более одного блока <select></select>, т.е. у меня будет блок с категориями и блок со странами. Потом может еще блок с режиссерами. Большие блоки будут сворачиваться/разворачиваться с помощью функции ShowOrHide дле по нажатию на треугольник:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

4. В скрипте по ссылке выше подключен файл со стилями style.css

div.block3 {
background: #F0F0F0 url(Для просмотра ссылки Войди или Зарегистрируйся) no-repeat 0% 0%;
line-height: 16px;
padding-left: 10px;
padding-top: 10px;
width: 389px;
height: 25px;
}
span.labeler {
border-bottom: 1px dashed;
color: #0F56A4;
cursor: pointer;
margin: 3px;
}
div.item td.l span, .invert {
background: #C4C4C4;
color: white !important;
font-size: 12px;
padding-left: 5px;
padding-right: 5px;
}

Нужно чтобы по умолчанию все val1,val2,val3 выглядели стилем: <span class="labeler"></span>, а при выделении (вместо рамки) стиль менялся на <span class="labeler invert"></span>
Вроде как остальное норм, все работает!

JSilver · 25 Янв 2011

2 Хомячок: да всё это решаемо. рыбу я тебе слепил, а уж соль и перец, как говорится - по вкусу...
вот для дальнейшего движения мысли:

Код:

<html>
<script>
function yo(slct) {
var st="";
x=document.getElementById(slct);
x.style.visibility = 'hidden';
for (var i=0;i<x.length;i++)
  {
  st+='<span onclick="sw('+i+',this,'+"'"+slct+"'"+');"';
  if (x.options[i].selected==true) {
    st+=' style="border:thin dotted #FF0000;"';
  }
  st+='>'+x.options[i].text+'</span>&nbsp; ';
  };
document.getElementById("div-"+slct).innerHTML='<div id="div-"'+slct+'>'+st+'</div>';
}
function sw(vl,cn,sl) {
x=document.getElementById(sl);
if (x.options[vl].selected==true) {
  x.options[vl].selected=false;
  cn.style.border="0px";
} else {
  x.options[vl].selected=true;
  cn.style.border="thin dotted #FF0000";
}
}
</script>
<body>
<form id=frm>
<select id=slct multiple>
<option value=1>val1
<option value=2>val2
<option value=3>val3
<option value=4>val4
</select>
<div id="div-slct"></div>
</form>
<script>
yo("slct");
</script>
<form id=frm2>
<select id=selct>
<option value=1>val1
<option value=2>val2
<option value=3>val3
<option value=4>val4
</select>
<div id="div-selct"></div>
</form>
<script>
yo("selct");
</script>
</body>
</html>

Помощь Изменить список категорий на такой

Хомячок

Хранитель порядка

Juri

Мой дом здесь!

fri

Создатель

Хомячок

Хранитель порядка

fri

Создатель

JSilver

Постоялец

Хомячок

Хранитель порядка

JSilver

Постоялец