Loading data........
Tin nhanh :
Xem Tivi Online

Tổng hợp các kênh giải trí (Đang cập nhật chức năng..)

New Update

Truyền hình SCTV

SCTV14

SCTV15

SCTV16

SCTV17

SCTV18 HD

Vietnam Channels

VTV1

VTV2

VTV3

VTV4

VTV6

VTV9

VTC Online

VTC1

VTC2

VTC3

VTC4

VTC5

VTC6

VTC Online

VTC7

VTC8

VTC9

VTC10

VTC11

VTC12

Truyền hình tp HCM

HTV1

HTV2

HTV3

HTV4

HTV7

HTV9

Radio Channels

VOV1

VOV2

VOV3

VOV4

VOV5

VOV GT-HN

Home » » Cách xác đinh mouse click bằng jquery

Cách xác đinh mouse click bằng jquery

Bài viết này chia sẻ cho các bạn 1 cách dễ dàng làm cách nào để sử dụng JQuery kiểm soát các sự kiện mouse_democlick chuột (bao gồm cả click chuột trái, chuột phải và nút ở giữa).  Sau đó tùy vào mục đích sử dụng của bạn mà có thể xây dựng các tiện ích chức năng khác như: chống copy text bằng chuột phải, hiển thị quick menu……..

Trong đoạn code demo bên dưới, bạn có thể thấy rõ được sự thể hiện khi nào click phải chuột hay click trái.. nhờ sự thay đổi mã màu được viết trong file css

 

Code HTML

<html>
<head>
    <title>JQuery CSS Mouse</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
     <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div id="content">
        <div class="top" id="topleft">
        </div>
        <div class="top" id="topright">
        </div>
        <div id="topmiddle">
        </div>
        <div class="clear">
        </div>
        <div id="mbody">
        </div>
    </div>
</body>
</html>

Code file CSS (style.css)

#content {
    position: relative;
    width: 310px;
    height: 310px;
}
.top {
    float:left;
    width:150px;
    height: 150px;
    background: #d3d3d3;
    border: 1px solid #666;
}
#topleft {
    -webkit-border-radius: 10em .5em 0 0;
    -moz-border-radius: 10em .5em 0 0;
    border-radius: 10em .5em 0 0;
    border-right-width: 0;
}
#topright {
    -webkit-border-radius: .5em 10em 0 0;
    -moz-border-radius: .5em 10em 0 0;
    border-radius: .5em 10em 0 0;
}
#topmiddle {
    width:30px;
    height: 100px;
    position: relative;
    -webkit-border-radius: 5.5em;
    -moz-border-radius: 5.5em;
    border-radius: 5.5em;
    background: #999;
    border: 1px solid #666;
    z-index: 1;
    top: 15px;
    left: 135px;
}
.clear {
    clear: both;
}
#mbody {
    border: 1px solid #666;
    border-top-width: 0;
    background: #d3d3d3;
    width: 301px;
    height: 250px;
    -webkit-border-radius: 0 0 15.5em 15.5em;
    -moz-border-radius: 0 0 15.5em 15.5em;
    border-radius: 0 0 15.5em 15.5em;
}

Và cuối cùng chèn đoạn mã Jquery bên dưới này vào trên thẻ đóng </head>

<script type="text/javascript">
$(document).ready(function() {
    var cwidth_half = $("#content").width() / 2;
    var cheight_half = $("#content").height() / 2;

    $(document).mousemove(function(e) {
        $("#content").css({
            left: (e.pageX-cwidth_half)+'px',
            top: (e.pageY-cheight_half)+'px'
        });
    });

    $(document).bind("contextmenu", function(e) {
        return false;
    });

    $(document).mousedown(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#333");
                break;
            case 2:
                $("#topmiddle").css("background", "#333");
                break;
            case 3:
                $("#topright").css("background", "#333");
                break;
        }
    });

    $(document).mouseup(function(event) {
        switch (event.which) {
            case 1:
                $("#topleft").css("background", "#d3d3d3");
                break;
            case 2:
                $("#topmiddle").css("background", "#999");
                break;
            case 3:
                $("#topright").css("background", "#d3d3d3");
                break;
        }
    });

});
</script>
Có thể chạy thử code online tại thông qua trang http://jsfiddle.net/Victa/XbMMa/

nhớ chọn phần framework bên trái là Jquery.

Like và chia sẻ với bạn bè :

0 nhận xét:

Speak up your mind

Tell us what you're thinking... !

 
Proudly powered by Blogger
Copyright © 2009-. The Color Of Life - All Rights Reserved