Przełącznik

23 lutego, 2012 w kategoriach: Web developing, Ajax, JavaScript, Jquery, Podstawy

4,670 0
Dane:
  • Czas pracy: 15 minut
  • Poziom: Podstawowy
Opis:

Poradnik pokazujący jak wykonać prosty przełącznik (switch).

Pliki do pobrania

Pokaż/Ukryj wszystko

Witam. W tym poradniku opiszę jak uzyskać efekt tzw. przełącznika na stronie internetowej. Najczęściej jest on stosowany do html’owych checkboxów. Gdy po kliknięciu ukaże nam się tak, to znaczy, że checkbox jest zaznaczony. I logicznie na odwrót.

Efekt jaki uzyskamy:
Alt efekt

Zapraszam do kroku 2, gdzie utworzymy kod HTML. ;)


Wydawnictwo Strefa Kursów

Importujemy nasz plik css, bibliotekę jqery i nasz skrypt .js. Nadajemy tytuł stronie.

<!Doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="skrypt.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<title>Prosty switch</title>
</head>

W sekcji body damy prostą instrukcje warunkową w php. Gdy przycisk ‚submit’ został naciśnięty pobieramy wartość ‚imie’ oraz wartość checkboxa, tzn. czy akceptowaliśmy, czy też nie. Wyświetlamy te wartości.

<?php
if (isset($_POST['submit'])) {
$akceptacja = isset($_POST['accept']);
$imie = $_POST['nick'];
echo "Witaj ".$imie."!<br />";
if ($akceptacja=="on") {echo "Akceptowałeś regulamin | <a href='index.php'>Powrót</a>";} else {echo "Nie akcepowałeś regulaminu! | <a href='index.php'>Powrót</a>";}
}

W przeciwnym wypadku tworzymy prosty formularz html wraz z checkboxem.

else {
?>
<div id="content">
<form method="post" action="">

<label for="nick">Imię:</label>
<input class="kontakt_input" type="text" name="nick" id="nick" />

<br />

<label for="accept">Akceptujesz?</label>
<input class="checkbox" type="checkbox" name="accept" id="accept" />

<br />
<input type="submit" name="submit" value="Wyślij" class="submit" />
</form>
</div>

Kończymy warunek php oraz sekcję body i html.

<?php } ?>
</body>
</html>

Przejdźmy teraz do pliku css ;)

Ustalamy poszczególne wartości dla elementów naszej strony. Implementujemy min. obrazek ‚switch.png’ oraz ‚send.png’, które możesz pobrać tutaj:
Switch
Send

body {
background: #141414;
color: #fff;
}
form {
color: #fff;
font-size: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
width: 400px;
margin: 20px auto 0 auto;
}
form label {
float: left;
text-align: right;
margin-right: 15px;
width: 120px;
margin-top: 20px;
font-size: 16px;
}
.kontakt_input {
margin-left: 10px;
margin-top: 10px;
width: 228px;
height: 42px;
border: 2px #999 solid;
color: #444;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
form .submit {
text-indent: -9999px;
width: 91px;
height: 38px;
background: url(send.png);
border: none;
margin-top: 20px;
margin-left: 150px;
cursor: pointer;
}
form .submit:hover {
background-position: center bottom;
}
.js .checkbox{
display:none;
}
.toggle{
background:url("switch.png") bottom left;
display:block;
width:88px;
height:34px; margin: 10px auto 0 auto;
}
.toggle.checked{
background-position:top left;
}

Gdy nasz dokument jest gotowy nadajemy sekcji body klasę ‚js’, która ukryje wszystkie checboxy.

$(document).ready(function() {
$('body').attr("class","js");

Dodajemy przełącznik po każdym checkboxie zawartym w dokumencie. Jeśli przełącznik jest zaznaczony nadajemy klasę checked.

$('.checkbox').after(function(){
if ($(this).is(":checked")) {
return "<a href='#' class='toggle checked' ref='"+$(this).attr("id")+"'></a>";
}else{
return "<a href='#' class='toggle' ref='"+$(this).attr("id")+"'></a>";
}

});

Gdy przełącznik zostanie kliknięty zostaje nadanie lub odebranie wartości ‚cheecked’.

$('.toggle').click(function(e) {
var checkboxID = $(this).attr("ref");
var checkbox = $('#'+checkboxID);

if (checkbox.is(":checked")) {
checkbox.removeAttr("checked");

}else{
checkbox.attr("checked","true");
}
$(this).toggleClass("checked");

e.preventDefault();

});

Kończymy kod javascript.

});

I to by było na tyle. Jest to dość nowa technologia w zastosowaniach na naszych stronach internetowych dlatego zachęcam do korzystania z takich oto prostych przełączników, które uatrakcyjnią naszą stronkę.

Pozdrawiam Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dodaj komentarz