Вы находитесь на странице: 1из 3

Вот$ТЗ.$Если$он$показалось$вам$сумбурным,$могу$объяснить$непонятное$ устно. $

Есть$html$ форма$выбора$метода$оплаты$в$интернет$магазине.$В$ней$сначала$ идут$инпуты$( <input>)$с$типами$оплаты.$У$каждого$из$них$ name="method"$и$ у$каждого$есть$соответствующий$тег$l abel$с$человеческим$называнием.$ У$ каждого$из$них$в$ value$ находится$машинное$название$метода$оплаты.$ Потом$идут$блоки.$По$одному$на$каждый$метод$оплаты.$У$каждого$ class=”$ method_form”$ и$ id$равно$ имени$способа$оплаты,$$за$который$отвечает$этот$ блок.$В$каждом$ из$этих$блоков$могут$быть$поля$формы,$необходимые$ для$ конкретного$способа$оплаты.$ Основной$смысл$плагина$в$том,$что$бы$показывать$только$тот$блок,$ который$нужен$для$выбранного$способа$оплаты.$Вот$алгоритм$его$ работы. $

1. Плагин , $ при$своей$инициализации, $ делает$следующее: $ $

a. Смотрит,$выбран$ли$какой$нибудь$инпут$с$именем$ ”method” .$ Если$нет,$ то$плагин$выбирает$первый$по$ порядку$ незадиз ейбленный$инпут $ с$именем$ ”method” ,$отмечает$его$ выбранным(checked=”checked”).$ $

b. смотрит,$какой$инпут$с$именем$ ”method”$(name="method") $ отмечен , $ как$выбранный$( checked=”checked”).$И$скрывает$все$ блоки$с$классом$“method_form” (class=”method_form”)$ у$ которых$id$ не$равно$ value$ отмеченного$инпута. $

c. Плагин$делает$невидимыми$все$инпуты$с$именем$ ”method”.$

Остаются$видны$только$ теги$label $ у$кажд ого$инпута .$ Для$ тега $ label$ того$ инпута,$который$checked$добавляет$класс$ ”selected_method”.$

2. При$выборе$какого$либо$незадисейбленного$инпута(так$как$они$ скрыты$это$происходит$при$клике$по$его$лейблу)$происходит$ следующее:$

a. для$его$лейбла$добавляется$класс$ ”selected_method”,$для$всех$ остальных$лейблов$удаляется$тег$“selected_method”.$$

b. блок$с$классом$ “method_form”$ у$которого$ id$ равно$name$ выбранного$инпута$$делается$видимым,$а$остальные$блоки$с$ классом$ “method_name”$ скрываются. $

c. Для$каждого$инпута$в$блоке$с$классом$ “method_name” ,$ который$только$что$выбран, $ смотрится,$есть$ли$инпут$с$таким$ же$именем$в$блоке$с$классом$ “method_name” ,$который$только$ что$был$скрыт.$И$если$есть , $ то$копируется$значение$этого$ инпута$из$скрытого$поля$в$появившееся. $

Детали$реализации:$

1. Пла гин$привязывается$к$какому$то$определенному$блоку$и$ выполняет$всю$свою$работу$тол ько$для$элементов$в$этом$блоке.$$Т.е.$

Плагин$вызывается$примерно$вот$так :$ $('#block).superPlugin({}).$И$ всю$свою$работу$плагин$делает$только$в$блоке$с$айди$“block” . $

3. Все$имена$классов,$инпутов,$айдишники$и$т$д$должны$быть$заданы$ как$константы$в$начале$плагина(а$лучше$как$параметры),$что$бы$ если$нужно$заменить$какой$нибудь,$не$пришлось$искать$его$во$всем$ код е. $

$

Вот$пример$хтмл$кода $

<form

method="POST">

<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='86d92d3dacf0d7436652054417db71a3' /></div>

<li><label for="id_method_0"><input

disabled="disabled" type="radio" id="id_method_0" value="pay_on_delivery" name="method"/> Pay on delivery</label></li>

<li><label for="id_method_1"><input checked="checked"

type="radio" id="id_method_1" value="robokassa" name="method"/> Robokassa</label></li>

<li><label for="id_method_2"><input

type="radio" id="id_method_2" value="transfer_individual" name="method"/> Transfer Individual</label></li>

<li><label for="id_method_3"><input

type="radio" id="id_method_3" value="transfer_legal" name="method"/> Transfer Legal</label></li>

<li><label for="id_method_4"><input

type="radio" id="id_method_4" value="other" name="method"/> Other</label></li>

<hr>

<div id="pay_on_delivery" class="method_form" > <h3>Pay on delivery</h3>

<hr>

</div>

<div id="robokassa" class="method_form" >

<h3>Robokassa</h3>

<hr>

</div>

<div id="transfer_individual" class="method_form" > <h3>Transfer Individual</h3> <p><label for="id_transfer_individual-payment_full_name">Payment full name:</label> <input id="id_transfer_individual-payment_full_name" type="text" name="transfer_individual-payment_full_name" maxlength="255" /></p> <p><label for="id_transfer_individual-payment_address">Address:</label>

<textarea id="id_transfer_individual-payment_address" rows="10" cols="40" name="transfer_individual-payment_address"></textarea></p> <hr> </div>

<div id="transfer_legal" class="method_form" > <h3>Transfer Legal</h3> <p><label for="id_transfer_legal-payment_full_name">Payment full name:</label> <input id="id_transfer_legal-payment_full_name" type="text" name="transfer_legal-payment_full_name" maxlength="255" /></p> <p><label for="id_transfer_legal-payment_address">Address:</label> <textarea id="id_transfer_legal-payment_address" rows="10" cols="40" name="transfer_legal-payment_address"></textarea></p> <p><label for="id_transfer_legal-payment_legal_inn">Payment legal inn:</label> <input id="id_transfer_legal-payment_legal_inn" type="text" name="transfer_legal-payment_legal_inn" maxlength="255" /></p> <p><label for="id_transfer_legal-payment_legal_kpp">Payment legal kpp:</label> <input id="id_transfer_legal-payment_legal_kpp" type="text" name="transfer_legal-payment_legal_kpp" maxlength="255" /></p> <hr> </div>

<div id="other" class="method_form" >

<h3>Other</h3>

<p><label for="id_other-payment_comment">Comment:</label> <textarea id="id_other-payment_comment" rows="10" cols="40" name="other- payment_comment"></textarea></p> <hr> </div>

<button type="submit">finalize</button> </form>

$