Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Лист с чекбоксами / 17 сообщений из 17, страница 1 из 1
30.09.2008, 11:08
    #35567025
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
Как сделать лист с чекбоксами? Конечно, это не обязательно будет именно лист (<ul>..<li>..) но главное чтобы внешне было похоже.

Вот http://zeroed.ru/notes/code-complete/requirements

Первый элемент убрал из списка и поставил перед ним checkbox - выглядит коряво.

Может уже есть готовые простые решения?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2008, 11:33
    #35567112
Краказябл
Краказябл
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
Попробуйте присвоить чекбоксу отрицательный левый отступ (margin-left)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2008, 11:34
    #35567119
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
какой первый элемент убрал из какого списка и почему получилось коряво? Чем отличается лист чекбоксов от просто чекбоксов в столбик?

В общем, давай пример кода и что в нем конкретно не устроило, и чего нужно в итоге добиться, и какова конечная цель этого списка чекбоксов.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2008, 11:36
    #35567135
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illionкакой первый элемент убрал из какого списка и почему получилось коряво? Чем отличается лист чекбоксов от просто чекбоксов в столбик?

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

Я же специально дал ссылку, чтобы сравнить лист с тем что получилось. :)

http://zeroed.ru/notes/code-complete/requirements

Хочу добиться того, чтобы небыло разницы визуальной. Т.е. например сейчас текст, который не помещается в одну строчку находится _под_ чекбоксом, а с листами такого нету, весь текст выравнивается строго справа от картинки, которая применяется в листе.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2008, 11:39
    #35567145
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
КраказяблПопробуйте присвоить чекбоксу отрицательный левый отступ (margin-left)

Блин, пробовал с margin просто - фигня получалась полная. А что с текстом остальным? Я ток полагаю надо сделать отступ для всего окружающего <div>, т.к. у листов всегда отступ есть. А потом сделать margin-left для .checkboxes input ?

Код: plaintext
1.
2.
3.
<div class="checkboxes">
  <input type="checkbox"/>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.09.2008, 13:39
    #35567507
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
Who am I
Я же специально дал ссылку, чтобы сравнить лист с тем что получилось. :)
...
Хочу добиться того, чтобы небыло разницы визуальной. Т.е. например сейчас текст, который не помещается в одну строчку находится _под_ чекбоксом, а с листами такого нету, весь текст выравнивается строго справа от картинки, которая применяется в листе.

а, так это и был кривой пример :-). Начинаю понимать что требуется. Можно же как-нить подогнать.

Так например:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
<style>
.mixed_list .ch {list-style-type:none; position:relative; }
.mixed_list .ch input {position:absolute; left:-22px; }
</style>
<ul class="mixed_list">
	<li>  1   1   1   1   1   1   1   1   1   11   1   1   1  </li>
	<li class="ch"> <input type="checkbox" />  2   2   2   2   2   2   2   2   2   2   2  </li>
	<li>  3   3   3   3   3   3   3   3   3  </li>
</ul>

или если ul не принципиален, то так:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<style>
.list div {position:relative; padding-left:40px;}
.list div input {position:absolute; left:-30px;}
</style>
<div class='list'>
<div><input type="checkbox" />  2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2 </div>
<div><input type="checkbox" />  2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2 </div>
<div><input type="checkbox" />  2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2   2 </div>
</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 01:55
    #35568671
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illion, шикарно!
спасибо большое!

в итоге сошелся на вот таком:

.list div {position:relative; padding-left:35px; margin-bottom: 7px; line-height: 110%}
.list div input {position:absolute; left:10px;}

и добавил скрипт для красоты

http://zeroed.ru/notes/code-complete/requirements

посмотри как выглядит и попробуй чекбокс нажать =)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 03:04
    #35568711
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
Блин, в IE6 отображает неправильно =(

CSS:

Код: plaintext
1.
2.
3.
4.
/* List of checkboxes */

.list div {position:relative; padding-left:35px; margin-bottom: 7px; line-height:  110 %}
.list div input {position:absolute; left:10px;}

HTML:

Код: plaintext
1.
2.
3.
4.
<div class="list">
<div><input onclick="markCode(this)" type="checkbox" /><span>Определены ли все способы ввода данных в систему с указанием источника, точности, диапазона значений и частоты ввода?</span></div>
<div><input onclick="markCode(this)" type="checkbox" /><span>Определены ли все способы вывода данных системой с указанием назначения, точности, диапазона значений, частоты и формата?</span></div>
</div>

Кроссбраузерщики, где вы? =)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 03:11
    #35568713
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
не хочешь еще добавить возможность не целиться в чекбокс, а тыркать прямо в соотв. текст? Через скрипт или тэг <label> .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 03:26
    #35568718
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
Who am IБлин, в IE6 отображает неправильно =(
а так?
Код: plaintext
1.
2.
.list div { position:relative; margin-left:35px; margin-bottom:7px; line-height: 110 %; }
.list div input { position:absolute; left:-30px; }
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 03:31
    #35568719
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
заглянула в исходник. Увидела:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function markCode(checkboxItem) {
    var isChecked;
    if (checkboxItem.checked) {
      isChecked = true;
    } else {
      isChecked = false;
    }
   
    var textElement = checkboxItem.nextSibling;
    if (isChecked) {
      textElement.style.color = "lightgreen";
    } else {
      textElement.style.color = "white";
    }

поэм любители :). Урезаем эту красоту:
Код: plaintext
1.
2.
3.
function markCode(checkboxItem) {
      checkboxItem.nextSibling.style.color = checkboxItem.checked?"lightgreen":"white";
    }
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 10:57
    #35569087
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illion Who am IБлин, в IE6 отображает неправильно =(
а так?
Код: plaintext
1.
2.
.list div { position:relative; margin-left:35px; margin-bottom:7px; line-height: 110 %; }
.list div input { position:absolute; left:-30px; }


ШИКАРНО!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 10:58
    #35569090
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illionзаглянула в исходник. Увидела:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
function markCode(checkboxItem) {
    var isChecked;
    if (checkboxItem.checked) {
      isChecked = true;
    } else {
      isChecked = false;
    }
   
    var textElement = checkboxItem.nextSibling;
    if (isChecked) {
      textElement.style.color = "lightgreen";
    } else {
      textElement.style.color = "white";
    }

поэм любители :). Урезаем эту красоту:
Код: plaintext
1.
2.
3.
function markCode(checkboxItem) {
      checkboxItem.nextSibling.style.color = checkboxItem.checked?"lightgreen":"white";
    }


я могу все объяснить. это была инкрементная разработка, а отрефакторить не успел, т.к. было часа 3 ночи ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 10:59
    #35569094
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illionне хочешь еще добавить возможность не целиться в чекбокс, а тыркать прямо в соотв. текст? Через скрипт или тэг <label> .

я думал про это вчера! =)

вот приду с работы и подумаю еще =)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.10.2008, 12:09
    #35569335
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illionне хочешь еще добавить возможность не целиться в чекбокс, а тыркать прямо в соотв. текст? Через скрипт или тэг <label> .

таки уговорила.

http://zeroed.ru/notes/code-complete/requirements пробуй первый элемент. до остальных дома руки дойдут =)

label все же проще
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2008, 00:02
    #35571007
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
[quot Who am I]http://zeroed.ru/notes/code-complete/requirements пробуй первый элемент.[/quot

ну красота неописуемая )). Поздравляю.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.10.2008, 00:03
    #35571009
Who am I
Who am I
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Лист с чекбоксами
illion[quot Who am I]http://zeroed.ru/notes/code-complete/requirements пробуй первый элемент.[/quot

ну красота неописуемая )). Поздравляю.

благодарю за помощь ;)

и за рефакторинг скрипта ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Лист с чекбоксами / 17 сообщений из 17, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 477ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1455806]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 171ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 230ms
total:  477ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]