[es] - form wizard u jquery

Kerim O

Član broj: 206460
Poruke: 59
178.77.25.*

Profil

^{27.05.2012. u 22:46 - pre 145 meseci}

Pozdrav svima. Počeo sam malo da čeprkam oko jquer-a. Uradio sam par stvari i iskreno oduševljen sam šta se može sve sa jquery-em uraditi..Ono kod čega sam zapeo je pravljenje wizard-a..Odnosno,napravio sam jedan jednostavi wizard..Medjutim sada pokušavam da uradim malo kompleksniji sa linkovima i ne uspjevam..Da ne bih bilo da tražim gotov zadatak postaviću dio koda ovdje što sam uradio...

Code:

<html>
<head>

<style type="text/css">

#container
{
  width:400px;

  height:20px;
}

.sadrzaj1{
  border:1px solid black;
  width:400px;
}

.sadrzaj2{
  border:1px solid black;
    width:400px;
    display:none;

}

.sadrzaj3{
  border:1px solid black;
   display:none;
}
a {
  color:red;
  text-decoration:none;
}

ul {}

li {display:inline;padding-left:15px;}

.ukinuto2{
  cursor:default;
  opacity:0.3;
}

.ukinuto3{
  cursor:default;
  opacity:0.3;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $("#ime").keyup(function(){

  var ime = $("#ime").val();

  if(ime.length < 5) {
    $("strong").remove();
    $(".ime").append("<strong>Nije tacno</strong>");
    $(".ukinuto2").css({'cursor':'default'});
    $(".ukinuto2").css({'opacity':'0.3'});
    $(".ukinuto2").removeAttr('href');


  }
  else {
        $("strong").remove();
        $(".ime").append("<strong>Gotovo</strong>");
        $(".ukinuto2").css({'cursor':'pointer'});
        $(".ukinuto2").css({'opacity':'1'});
        $(".ukinuto2").attr('href','#korak2');



  }


});

$(".ukinuto2").click(function(){
  $(".sadrzaj1").hide();
  $(".sadrzaj2").fadeIn("slow");



});

});


</script>

</head>

<body>

<div class="glavni">
<div id="container">
<ul>
<li class="normal1"><a href="#korak1" class="ukinuto1">Navigacija</a></li>
<li class="normal2"><a href="#" class="ukinuto2">Tutoriali</a></li>
<li><a href="#" class="ukinuto3">Linkovi</a></li>
</ul>
</div>
<div class="sadrzaj1">

<h4>Prvi korak</h4>

<div class="ime">Ime : <input type="text" name="ime" id="ime" /></div>

</div>

<div class="sadrzaj2">
<h4> Drugi korak</h4>
<div class="email">Tvoja email adresa<input type="text" name="email" id="email"/></div>

<div class="sadrzaj3">
<h4> Lozinka</h4>
<div class="email">Tvoja lozinka<input type="text" name="email" id="lozinka"/></div>
</div>

</div>

    </body>

    </html>

Kod sam zamislio na slijedeći način i uspio mi je u provj jednostavnijoj varijanti. Kada validacija uspješno prodje,link za slijedeću stranicu vratim mu opacity na 1 i na normalan lin pointer.I kada kliknem radi..Medjutim,nikako do sada nigdje nisam naišao na to kako da isprogramiram svu ovu akciju a da ne moram programirati za svaki lin posebno.. I problem je što ako kliknem npr na klasu .ukinuto2 svejedno prelazim na drugi link a to ne bih htio..

Plugine ne želim da koristim jer želim da pišem svoj kod i da vježbam..A nisam uspio izguglati wizard ovako sa linkovima pa mi to djeluje malo zbunjujuće..Ovo sa linkovima sam izabrao jer bih tako mogao fino da uradim linkove sa "stanjima" da baš izgledaju fino..

Hvala..

Odgovor na temu