회사에서 사용중인 매직 마우스2가 너무 높이가 낮아서 마우스가 하나 필요했다.


집에서 사용중인 로지텍 마우스가 있지만 그건 집에서 사용해야 하니 한 사기 위해서 하이마트로 향했다.

로지텍 마우스중 내 눈에 들어온건 mx master 2s와 mx anywhere 2s 인데 anywhere는 너무 높이가 낮았다. 그렇지만 가격은 mx master 2s가 너무 비쌌다. 129,000원 ㅎㄷㄷ


너무 비싸서 마다 하려 했지만 요새 야근이 많이 손목도 아프고 야근 수당이 나오니 야근수당으로 산다고 생각하고 구매했다.


제품박스는 되게 컸다.

앞에 뚜껑을 열면 자석으로 붙어있고 제품 상세를 확인 할 수 있다.

아주 심플하다 ㅋㅋ 

유니파잉 수신기와 마우스 그리고 충전 케이블이 있다.


이 마우스는 기존에 사용중이던 마우스들과 다르게 충전해서 사용한다.

그래서 당장은 건전지를 사지 않아도 되는 장점이 있지만 나중에 배터리 수명이 다하면 문제가 발생할 수 있다.

물론 그전에 망가지겠지만 ㅎㅎ


제품의 밑바닥은 수신장치를 바꾸는 버튼과 충전 단자 그리고 ON/OFF 스위치가 있다.


그립감도 좋고 다 괜찮다.

가격이 너무 비싸다 ㅜㅜ 그래서 아마존에서 직구하고 싶었으나 직구하면 국내에서 수리가 안되기 때문에 그냥 비싸도 국내에서 샀다.

업무를 진행하면서 jquery-ui를 이용해서 툴팁을 만들때 툴팁위에 마우스를 올렸을 때 툴팁이 유지되도록 하는 기능을 만들어야 했다. 

구글링을 통해서 방법을 찾았고 그 방법을 공유해보자.

먼저 기본적인 툴팁이 적용된 input box예제를 살펴보자.

 

 

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }
         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
 
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
 
   <body>
      <!-- HTML -->
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>
 
cs

 

단순하게 툴팁이 출력되고 마우스를 가져다 되면 사라져버린다.

툴팁에 마우스를 가져다 되었을 때 툴팁을 유지하기 위해서는 툴팁이 닫히려고 하는 이벤트에 ui hover 이벤트를 달아주면된다. 예제 코드는 다음과 같다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               },
                close: function( event, ui ) {
                  ui.tooltip.hover(
                      function () {
                          $(this).stop(true).fadeTo(400, 1);
                          //.fadeIn("slow"); // doesn't work because of stop()
                      },
                      function () {
                          $(this).fadeOut("400", function(){ $(this).remove(); })
                      }
                  );
                }
            });
         });
cs

 

결과를 확인해보면 마우스를 위에 가져다 놓아도 사라지지 않는 것을 확인할 수 있다.

애플 매직마우스2를 여자친구가 생일선물로 사주었다.

맥북을 키보드 연결해서 데스크탑처럼 집에서 사용을 하는데 그때 트랙패드에 스와이프 기능사용에 제약이 되어서 필요했었는데 정말 고마웠다.


구매는 현대백화점 지하 1층의 ashop에서 구매하였다.
가격은 99,000원.

구성품은 라이트닝 케이블, 설명서 그리고 마우스이다.
충전하는 부분이 바닥에 있어서 조금 불편하긴 하지만 한번 충전하면 오래가기 때문에 그렇게 거슬릴 것 같지는 않다.



마우스 높이가 낮기때문에 처음사용하는 지금은 조금 불편하지만 그래도 트랙패드 기능을 사용할 수 있어서 좋다.

연결은 bluetooth로 간단하게 연결하여 사용할 수 있다.

+ Recent posts