[Javascript/jQuery]버튼 클릭, 더블클릭 이벤트

Web 2018. 9. 6. 11:09

Javascript와 jQuery를 이용한 클릭, 더블클릭 이벤트 소스입니다.


HTML소스 

?
1
2
3
4
<body>
  <button id="click">Click</button>
  <button id="dblclick">doubleClick</button>
</body>


Javascript 소스

?
1
2
3
4
5
6
7
8
9
10
11
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      $("#click").click(function() {
        alert("click");
      });
      $("#dblclick").dblclick(function() {
        alert("double click");
      });
    });
</script>


결과

소스 및 예제페이지 확인


'Web' 카테고리의 다른 글

[Javascript]확인, 취소 Confirm Dialog 띄우기  (0) 2018.09.11
[Javascript/jQuery]Table 특수키(Ctrl, Shift)를 이용한 다중선택  (0) 2018.09.04
블로그 이미지

알터.

,

[Javascript/jQuery]Table 특수키(Ctrl, Shift)를 이용한 다중선택

Web 2018. 9. 4. 16:28

Javascript와 jQuery를 사용한 Table 다중 선택 소스입니다.


html Table 생성

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
  <table class="selectTable">
    <thead>
      <tr>
        <td>title1</td>
        <td>title2</td>
        <td>title3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
      </tr>
      <tr>
        <td>content4</td>
        <td>content5</td>
        <td>content6</td>
      </tr>
      <tr>
        <td>content7</td>
        <td>content8</td>
        <td>content9</td>
      </tr>
    </tbody>
  </table>
</body>


css 설정

?
1
2
3
4
5
6
7
8
9
<style>
    .selectTable {
      border: 1px solid #000000;
    }
 
    #select {
      background-color: #BDBDBD;
    }
</style>


javascript설정

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
  var lastIndex = 0;
 
    $(document).ready(function() {
      $(".selectTable tbody tr").click(function() {
        var select = $(this);
        var index = select.index();
        select.attr("id", "select");
        if(!window.event.ctrlKey && !window.event.shiftKey) {
          select.siblings().removeAttr("id");
        } else if(window.event.shiftKey) {
          for(var i=Math.min(lastIndex, index);i<Math.max(lastIndex, index);i++) {
            $(".selectTable tbody tr").eq(i).attr("id", "select");
          }
        }
        lastIndex = index;
      });
    });
</script>


결과

추가 옵션


-블록지정 방지

?
1
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">


소스 및 예제페이지 확인


'Web' 카테고리의 다른 글

[Javascript]확인, 취소 Confirm Dialog 띄우기  (0) 2018.09.11
[Javascript/jQuery]버튼 클릭, 더블클릭 이벤트  (0) 2018.09.06
블로그 이미지

알터.

,

공지사항

태그목록

글 보관함

달력

«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30

티스토리툴바