Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.11.2013, 09:29   #1
Alkaed
Новичок
Джуниор
 
Регистрация: 16.11.2013
Сообщений: 8
По умолчанию Верстка. Как сделать красивый чекпоинт?

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

Вот где написано сыр, угорь итд...

И еще, ниже формы заказа будет находиться текстовое поле...
Не мог бы кто-нибудь подсказать, как сделать так, что бы при нажатии на кнопку "Заказать", данные о заказе отображались в текстовом поле? То есть, нажали на кнопку. В поле добавилась запись типа: Ниджи, 299 руб., 100 гр., с сыром.
Ну чтобы данные с галочек тоже учитывались в заказе.

Очень благодарен за помощь!
Изображения
Тип файла: jpg checkpoint.JPG (32.1 Кб, 75 просмотров)
Alkaed вне форума Ответить с цитированием
Старый 16.11.2013, 09:52   #2
Fenex
Форумчанин
 
Аватар для Fenex
 
Регистрация: 15.02.2012
Сообщений: 823
По умолчанию

Чекбоксы сделать дивами, на которые навесить события "click".

Цитата:
Не мог бы кто-нибудь подсказать, как сделать так, что бы при нажатии на кнопку "Заказать", данные о заказе отображались в текстовом поле?
Примерно так:
Код:
<div>
    <span>блюдо 1</span>
    <button onclick="echo('блюдо 1')">заказать</button>
</div>
<div>
    <span>блюдо 2</span>
    <button onclick="echo('блюдо 2')">заказать</button>
</div>
<textarea id="out"></textarea>
Код:
function echo(what) {
    var out = document.getElementById('out');
    out.innerHTML += what + '\r\n';
}
^-.-^ My GitHub
Fenex вне форума Ответить с цитированием
Старый 16.11.2013, 10:02   #3
Alkaed
Новичок
Джуниор
 
Регистрация: 16.11.2013
Сообщений: 8
По умолчанию

Цитата:
Сообщение от Fenex Посмотреть сообщение
Чекбоксы сделать дивами, на которые навесить события "click".
Ух, как быстро Вы. Спасибо большое за помощь! А можно небольшой пример? Сделаю я чекбоксы дивами, но как сделать чтобы они такими красивыми были? Чтобы галочка при нажатии была именно такой?
Alkaed вне форума Ответить с цитированием
Старый 16.11.2013, 11:51   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Alkaed Посмотреть сообщение
Ух, как быстро Вы. Спасибо большое за помощь! А можно небольшой пример? Сделаю я чекбоксы дивами, но как сделать чтобы они такими красивыми были? Чтобы галочка при нажатии была именно такой?
картинкой...

а ваще, в жопу дивы и js jsfiddle.net
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 16.11.2013, 15:21   #5
Alkaed
Новичок
Джуниор
 
Регистрация: 16.11.2013
Сообщений: 8
По умолчанию

Здорово! Спасибо. Но вот как сделать галочки? Картинками я понял как, но это как то не по фен шую... ((
Alkaed вне форума Ответить с цитированием
Старый 16.11.2013, 16:27   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Шрифтами смысл тот же, что и с картинками, а гемора больше.
Можешь css-ом нарисовать, если скилл позволяет.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 17.11.2013, 13:17   #7
Alkaed
Новичок
Джуниор
 
Регистрация: 16.11.2013
Сообщений: 8
По умолчанию

теперь у меня по нажатию на чекбокс добавляется запись в textarea. Только вот есть небольшая неприятность, если пытаешься галочку снять, она снимается, но в форму запись добавляется еще раз. Подскажите пожалуйста, как сделать, что бы при снятии галочки запись тоже убиралась?
Alkaed вне форума Ответить с цитированием
Старый 17.11.2013, 13:28   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

я вчера написал скрипт, но он выдает ошибку, как быть?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 17.11.2013, 17:57   #9
Alkaed
Новичок
Джуниор
 
Регистрация: 16.11.2013
Сообщений: 8
По умолчанию

Все, понял )) Спасибо за помощь!
Alkaed вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сделать красивый ProgressBar Bright-rider Компоненты Delphi 4 04.11.2015 07:50
Можно ли сделать красивый ProgressBar используя sparklines? RISagitov Microsoft Office Excel 2 07.08.2012 10:15
PHPBB Как реализовать красивый вывод ЧПУ dozent.admin WordPress и другие CMS 0 31.07.2012 18:05
Последовательность в изучении материала, или как создать красивый сайт _PROGRAMM_ HTML и CSS 7 02.12.2010 09:40