powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Лист с чекбоксами
17 сообщений из 17, страница 1 из 1
Лист с чекбоксами
    #35567025
Who am I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Как сделать лист с чекбоксами? Конечно, это не обязательно будет именно лист (<ul>..<li>..) но главное чтобы внешне было похоже.

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

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

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

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

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

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

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

Хочу добиться того, чтобы небыло разницы визуальной. Т.е. например сейчас текст, который не помещается в одну строчку находится _под_ чекбоксом, а с листами такого нету, весь текст выравнивается строго справа от картинки, которая применяется в листе.
...
Рейтинг: 0 / 0
Лист с чекбоксами
    #35567145
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
Лист с чекбоксами
    #35567507
Фотография 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
Лист с чекбоксами
    #35568671
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
Лист с чекбоксами
    #35568711
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
Лист с чекбоксами
    #35568713
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
не хочешь еще добавить возможность не целиться в чекбокс, а тыркать прямо в соотв. текст? Через скрипт или тэг <label> .
...
Рейтинг: 0 / 0
Лист с чекбоксами
    #35568718
Фотография 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
Лист с чекбоксами
    #35568719
Фотография 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
Лист с чекбоксами
    #35569087
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
Лист с чекбоксами
    #35569090
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
Лист с чекбоксами
    #35569094
Who am I
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
illionне хочешь еще добавить возможность не целиться в чекбокс, а тыркать прямо в соотв. текст? Через скрипт или тэг <label> .

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

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

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

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

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

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

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

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

и за рефакторинг скрипта ;)
...
Рейтинг: 0 / 0
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Лист с чекбоксами
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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