Si vous avez rejoint Digg, Certainement vous aviez connu sur le multi-sujet menu de navigation pour le choix de ce site, une sélection de navigation est très simple mais très efficace. JavaScript tutorial vous expliquer comment créer un comme Digg style sans utiliser de cadre JavaScript.

• Demo
• Agrandir
• Recharger
• New window

To note here is the inclusion of the "digg_selector.js" file which we will look at next. Also important is the hidden field with the id of "hidden_data". Since what we're doing is replacing the functionality of radio buttons with nicely styled links, we need another way to get the information submitted and we do that with the hidden field. That's where the Javascript file comes in:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j++;containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

This is simple - there are just 2 functions. Looking at the first one:

window.onload=function() {
    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a'); // get anchors
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].onclick = handleClick;
    }
};

When the page is loaded, we get all the anchors in the container div (these anchors are the digg style selectors/buttons or whatever you want to call them). Then, inside the for loop we attach an event handler to each anchor, which executes when the anchor is clicked. The event handler is a function called handleClick(), which we look at now:

function handleClick()
{
    document.getElementById('hidden_data').value = this.id;

    var container = document.getElementById('container');
    var containerAnchors = container.getElementsByTagName('a');

    // unhighlight all the links
    for(var j=0;j<containerAnchors.length;j++)
    {
        containerAnchors[j].style.backgroundColor = "#eceff6";
        containerAnchors[j].style.color = "#3b5998";
    }

    // highlight the link that was just clicked
    this.style.backgroundColor = "#3b5998";
    this.style.color = "#ffffff";
}

The line document.getElementById('hidden_data').value = this.id; gets a hold of the hidden field we talked about earlier, and dynamically sets its value to this.id . So what is this.id? Well, this refers to the anchor that gets clicked on. So this.id gets the id of the anchor. The hidden field is set, and when the form is submitted we can get the value of the hidden field in the $_POST['hidden_data'], assuming you're using PHP.

Finally, here's the CSS stylesheet, which needs to explanation:

body
{
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 15px;
}

a:link {color: #3b5998}
a:visited {color: #3b5998}
a:hover {color: #3b5998}
a:active {color: #3b5998}

h1 {
font-family: Georgia, serif;
font-style: italic;
font-size: 20px;
font-weight: bold;
}

hr {
color: #A8A8A8;
height: 1px;
}

#container {
margin:0;
margin-top: 20px;
margin-bottom: 20px;
}

.digg_style_link {
color: #3b5998;
padding: 3px;
margin: 3px;
margin-bottom: 20px;
background-color: #eceff6;
text-decoration: none;
border: 1px solid #d4dae8;
}

That's pretty much all there is to it.

Source : http://localhost/topic-selectors-digg-style.html

• Code
• Imprimer

• Commentaire (0)
• �crire

par Avant-premi�re

Annuler r�ponse

�crivez votre commentaire

Commentaires du client sera publi� avant previwed
Donnez votre email r�el pour obtenir des r�ponses notification ou commentaire sera supprim�

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure � 100% je suis humain r�el
Je le r�p�te, je ne suis pas bot

• Sent (0)
• Nouveau