Zadaniem tej klasy jest:
1. Obsługa formularza o następującyh typach pól:
- input.text
- select
- texarea
- checkbox
po zmianie zawartości / opcji każdego z inputów obok formularza ma pojawić
się <div> z animacją (0-100%) zawierającą informację:
-zawartość pola <nazwa pola> została zmieniona na <wartość>
animacja po 3sekundach ma zniknąć
Co mam
- kod html z formularzem poniżej
- w dokumentacji mootools znalazłem "fragmenty" frameworka, których przywołanie jak myślę jest potrzebne do napisania tej klasy są to:
- Element.form.js -metoda getValue
- Class.Extras.js - do utworzenia klasy
- Fx.Base - do efektu animacji
- być może jeszcze inne
- pomocy w napisaniu klasy (nie wiem jak poskładać te elementy w jeden skrypt)
- wydaje mi się że w html-u są potrzebne divy, które mają się pojawiać po wpisaniu - też nie wiem jak je osadzić, podejrzewam że muszą mieć jakąś zmienną
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klasa obslugujaca inputy</title>
<script src="mootools-1.2-core-nc.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { background: #fefefe;
}
#formularz { background: #fefefe;
margin:0 auto;
width: 500px;
}
.input { border: 1px solid #003366;
background: #0099CC;
padding: 1em;
margin-top: 0.5em;
}
.padding { padding: 0.5em;
}
</style>
</head>
<body>
<div id="formularz">
<div class="input">
<input class="padding" name="pole_tekstowe" type="text" />
</div>
<div class="input">
<select name="pole_wyboru">
<option value="opcja1">opcja1</option>
<option value="opcja2">opcja2</option>
<option value="opcja3">opcja3</option>
</select>
</div>
<div class="input">
<textarea class="padding" name="wiadomosc" cols="50" rows="5"></textarea>
</div>
<div class="input">
<input class="padding" name="zaznaczenie" type="checkbox" value="" />
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klasa obslugujaca inputy</title>
<script src="mootools-1.2-core-nc.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body { background: #fefefe;
}
#formularz { background: #fefefe;
margin:0 auto;
width: 500px;
}
.input { border: 1px solid #003366;
background: #0099CC;
padding: 1em;
margin-top: 0.5em;
}
.padding { padding: 0.5em;
}
</style>
</head>
<body>
<div id="formularz">
<div class="input">
<input class="padding" name="pole_tekstowe" type="text" />
</div>
<div class="input">
<select name="pole_wyboru">
<option value="opcja1">opcja1</option>
<option value="opcja2">opcja2</option>
<option value="opcja3">opcja3</option>
</select>
</div>
<div class="input">
<textarea class="padding" name="wiadomosc" cols="50" rows="5"></textarea>
</div>
<div class="input">
<input class="padding" name="zaznaczenie" type="checkbox" value="" />
</div>
</div>
</body>
</html>
czy ktoś mógłby pomóc lub nakierować jak dalej postąpić z tym tematem ?