как я могу создать такую форму?

на этой странице: https://www.psd2html.com/order-now.html вы можете выбрать товары, которые хотите, и цена изменится с вашим выбором. как он может быть построен?как я могу создать такую форму?

источник

2009-08-24 datisdesign

Я обновил свою версию страницы, если вы хотите ее проверить сейчас –

Это просто обычный список радиоклубов, и при нажатии на радио значение меняется на общей метке стоимости. Для этого вы можете использовать функцию onclick для радиообмена. Я бы рекомендовал использовать jquery. JQuery - отличная структура, построенная на основе javascript. Я больше никогда не вернусь к использованию старого старого JavaScript.

Убедитесь, что вы referenceing JQuery в <head> вашего файла, как это:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery

Вот попробуйте следующее:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      Your payment amount is : <span id="spn_Price"></span> 
     </div> 

      <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"/> 
      <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"/> 

     <script type="text/javascript"> 
      function DisplayPrice(price) 
      { 
       $('[id$=spn_Price]').html(price); 
      } 
     </script> 
    </form> 
</body> 
</html>

источник

2009-08-24 14:52:34

Я просто скопирую этот код, но ничего не происходит !! – datisdesign

там вы попробуете сейчас, я сделал небольшую ошибку в jQuery –

Спасибо, что он работает сейчас :) – datisdesign

Они используют Mootools, объектно-ориентированный каркас JavaScript для достижения этот эффект, но это можно было бы сделать и в ванильном JavaScript (хотя я бы рекомендовал фреймворк для обработки проблем с несколькими браузерами и т. д.). Текущий любимый, кажется, jQuery).

По существу, на основе выбранного переключателя в каждом варианте компоновки делается ссылка на элемент, который соответствует общей цене (<em id="amount">$[price]</em>) и набор html в соответствии с выбранным радио.

источник

2009-08-24 14:54:02

вы можете узнать, какие рамки javascript они используют с WTFramework bookmartklet http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/ – ajrawson

@ajrawson - это классно круто –

что-то, что может помочь вам ..

с помощью JQuery:

<p> 
you amount is : <span id="displayPrice"></span> 
</p> 

<input type="radio" value="159" name="price" onclick="javascript:$('displayPrice').html(this.value)"/> 
<input type="radio" value="259" name="price" onclick="javascript:$('displayPrice').html(this.value)"/>

и так далее ..

источник

2009-08-24 14:58:05

Thnx, но я не могу его получить за работой !! – datisdesign

попробуйте добавить javascript в оператор onclick, например, мое редактирование. Какая у вас ошибка. Я на 100%, это путь к нему ... Я хочу, чтобы такие вопросы позволили мне помочь: P –

Вы ссылаетесь на jquery в файле, как я это делал в своем посте? Я рекомендую загрузить его и иметь локальную ссылку лично, но это полезно для того, чтобы попробовать что-то новое. –

Если у вас есть "JQuery в действии", то вы найдете там точно пример.

В двух словах: цены были сохранены в качестве дополнительных атрибутов пролетов, например:

<span price="100">100$</span>

Затем с помощью JQuery можно создать необходимые слушатель и получить цену, используя селектор «диапазон [цену]» (а затем умножить его по номеру и общей цене)

источник

2009-08-24 15:01:43 Roman

Я бы порекомендовал JQuery, потому что это довольно легко понять, чем большинство других библиотек JavaScript, которые я пробовал в прошлом. Мне довелось несколько разобраться с JavaScript, пока я не запустил JQuery, и такие эффекты, как тот, который вы хотите, теперь легко реализовать.

источник

2009-08-24 15:28:51 Kobojunkie

Красота в Интернете заключается в том, что (почти) весь презентационный и логический код в пользовательском интерфейсе доступен для просмотра! Вы не сможете увидеть код PHP или Rails no, но, следуя ссылкам в заголовке страницы, вы можете увидеть файлы css, связанную с внешним интерфейсом JS и, как правило, весь документ собран вместе.

Нет лучшего способа узнать, на мой взгляд, чем использовать DOM-сниффер (придуманный прямо сейчас, я, я верю).

XRay имеет букмарклет, позволяющий вам проверить страницу и ее свойства CSS.
Web Developer Toolbar - наиболее полный инструмент для проверки всего, что я знаю.
Кроме того, многим очень нравится FireBug. Последние два предназначены только для Firefox, но на самом деле, взгляните на них и научитесь выкапывать и подталкивать самостоятельно.

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

источник

2009-08-24 15:54:14

как я могу создать такую ​​форму?

ответ

Смежные вопросы

как я могу создать такую форму?