Nếu có tham gia Digg, hẳn các bạn biết về trình đơn chọn chủ đề của website này; một trình đơn chọn khá đơn giản nhưng rất hiệu quả khi sử dụng. Loại trình đơn này được tạo với sự kết hợp của CSS, HTML và JavaScript và bài viết hướng dẫn JavaScript này sẽ chỉ bạn cách tạo ra một trình đơn tương tự như vậy mà không cần phải dùng thêm bất kì một thư viện JavaScript nào.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

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

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới