Đỉnh NGUYỄN

life's a journey not a destination

Thay đổi vị trị của 1 đối tượng dùng jQuery

Leave a comment


Với sự phát triển của các framework viết bằng JavaScript cho phép drag, drop hoặc di chuyển 1 thành phần trên trang rất dễ dàng. Ứng dụng thực tế có thể thấy trong ứng dụng mua sắm trực tuyến tương tác. Các món hàng được dropped vào giỏ hàng.

Nếu muốn di chuyển 1 đối tượng từ vị trí này sang vị trí khác, chỉ cần click lên nó. Đối tượng sẽ di chuyển trở về chỗ cũ khi bạn click lên nó lần nữa – tương tự như 1 hành động undo. Mặc dù điều này trông giống có nhiều mã lệnh được thực thi, nhưng với jQuery API’s, yêu cầu này thật sự rất dễ. Đây là cách di chuyển vị trí của 1 đối tượng trên trang dùng jQuery.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Thay đổi vị trị của 1 đối tượng dùng jQuery</title>

    <script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function() {
            $(".smallDiv").toggle(
                function() {
                    $(this).animate({ 'left': '600px' }, 'slow');
                },
                function() {
                    $(this).animate({ 'left': '0px' }, 'slow');
                });
        });
    </script>

    <style type="text/css">
        .smallDiv
        {
            height: 150px;
            width: 150px;
            position: relative;
            border: solid 1px Silver;
            background-color: Gray;
        }
    </style>
</head>
<body>
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
    <br />
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
    <br />
    <div class="smallDiv">
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
    </div>
</body>
</html>

Advertisements

Author: dinhnn

Senior software developer, a technical leader. You can be reached at via email to dinhnguyenngoc@gmail.com, via my blog at dinhnguyenngoc.wordpress.com, and on Twitter @dinhnguyenngoc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s