Как сделать вывод цен за услуги?

brokkoli7

Пользователь
Регистрация
14.01.13
Сообщения
2
Реакции
0
Баллы
1
Здравствуйте уважаемые вебмастера!

Подскажите, пожалуйста, какими методами можно реализовать подобную задачу:

На странице выбора услуг будут блоки с услугами. При нажатии на блок внизу страницы должна выводиться стоимость услуги.

Примерно так:



При выборе двух и более услуг должна выводиться их сумма:
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
Думаю, что нужно писать специальный скрипт. Это у вас что-то типа калькулятора.
 

lukamal

Редактор
Регистрация
30.08.12
Сообщения
803
Реакции
484
Баллы
28
Можно такие скрипты поискать.

Вот как это сделал Vector.

Код
<style type="text/css">
.tab_menu {background-color:#dddddd; color:#555555; border-bottom:1px solid #d7d7d7; height:20px;}
.tab_menu ul {margin:0px; padding:0px; list-style:none; text-align:left;}
.tab_menu li {display:inline; line-height:20px;}
.tab_menu li a {color:#000000; text-decoration:none; padding:4px 5px 3px;}
.tab_menu li a.tabactive {background-color:#d5d5d5; font-weight:bold; position:relative;}
#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4 {text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}
</style>

<script type="text/javascript">
var tablink_idname = new Array("tablink")
var tabcontent_idname = new Array("tabcontent")
var tabcount = new Array("4")
var loadtabs = new Array("1")
var autochangemenu = 1;
var changespeed = 20;
var stoponhover = 1;
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
</script>
<div class="tab_menu">
<ul>
<li><a class="tab1" href="http://pcvector.ru/t4811/#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;" title="" id="tablink1">1</a></li>
<li><a class="tab2 tabactive" href="http://pcvector.ru/t4811/#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;" title="" id="tablink2">2</a></li>
<li><a class="tab3" href="http://pcvector.ru/t4811/#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;" title="" id="tablink3">3</a></li>
<li><a class="tab4" href="http://pcvector.ru/t4811/#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;" title="" id="tablink4">4</a></li>
</ul>
</div>

<div id="tabcontent1" style="background: none repeat scroll 0% 0% rgb(255, 109, 109); display: none;"><b><a href="http://pcvector.ru/t3797" style="color:#fff;">Не можете качать? - Читайте эту тему</a></b></div>
<div style="display: block;" id="tabcontent2"><b><a rel="nofollow" href="http://pcvector.ru/misc.php?do=bestuser">Лучший пользователь года! (общий фонд 3000 руб).</a></b></div>
<div style="display: none;" id="tabcontent3"><b><a rel="nofollow" href="http://pcvector.ru/index.php?pageid=banner">Наши баннеры и кнопки</a></b></div>
<div style="display: none;" id="tabcontent4"><b><a href="http://pcvector.ru/t3400">Ежемесячно, самый активный пользователь получит 100 руб!</a></b></div>

</div>
 

Wmboard

Пользователь
Регистрация
01.01.70
Сообщения
9.274
Реакции
2.665
Баллы
28
Адрес
На wmboard
lukamal, а как это выглядит на картинке?
 

Ночная странница

Пользователь
Регистрация
30.01.12
Сообщения
1.751
Реакции
965
Баллы
28
Возраст
47
Вот как это сделал Vector.

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

Статистика форума

Темы
200.635
Сообщения
380.523
Пользователи
327.875
Новый пользователь
fora777
Сверху Снизу