'web/jquery'에 해당되는 글 3건

web/jquery

JQuery UI ToolTip에서 툴팁에 mouse over시 유지되도록 설정

업무를 진행하면서 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

 

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

web/jquery

Context Menu를 내 마음대로 변경하는 Jquery-ContextMenu.js 사용방법 소개

프로젝트 진행 중 contextmenu를 커스텀해서 사용하고 싶어서 검색하던 중 jquery-contextmenu를 찾았다.

생각보다 사용법도 간단하고 icon도 다양해서 소개하고자 한다.

[필요사항]
- jquery 1.8 이상의 버전이 필요
- jquery-contextmenu 필요
- jquery-ui의 경우 필수는 아니다.

[설치방법]
- npm i jquery를 사용하여 jquery를 설치한다.
- npm i jquery-contextmenu 명령어를 사용하여 jquery-contextmenu를 설치한다.

[적용]
- 적용하고자 하는 페이지에 다운받은 js, css 파일을 임포트 한다.

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/jquery-ui-dist/jquery-ui.min.css">
 
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.js"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
cs



[jquery-contextmenu 옵션 설명]


- jquery-contextmen.js를 사용하기 위해 필요한 옵션이 엄청 많다. 모든것을 소개할 수는 없고 몇가지만 소개하고 나머지는 문서를 참고하기 바란다.

1. selector
-> 적용하고자 하는 element의 class명
2. trigger
-> 컨텍스트 메뉴가 생성되는 이벤트를 정의한다. (ex. 왼쪽클릭, 오른쪽클릭, 마우스오버 등등...)
3. callback
-> 컨텍스트 메뉴의 아이템을 눌렀을 때, 발생되는 콜백 정의
4. items
-> 컨텍스트 메뉴의 아이템들을 정의. (표시되는 이름과 icon을 정의 할 수 있다.)
-> 아이콘은 하단에 기재한 fontawesome 홈페이지에서 각 아이콘별 클래스 명칭을 기재하여 사용하면 된다.
-> 3.0 버전 이상부터는 각 요소마다 콜백을 별도로 부여할 수 있다.


[완성 코드]
- 왼쪽클릭, 오른쪽클릭, 마우스 오버에 대한 소스만 만들어보았다.


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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<link rel="stylesheet" type="text/css" href="node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/jquery-ui-dist/jquery-ui.min.css">
 
 
<input type="button" class="right" value="오른쪽 클릭"/>
<input type="button" class="left" value="왼쪽 클릭"/>
<input type="button" class="hover" value="마우스 오버"/>
 
 
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-contextmenu/dist/jquery.contextMenu.min.js"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js"></script>
<script>
$(function(){
    <!-- hover -->
    $.contextMenu({
        selector: '.hover',
        trigger: 'hover',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
        }
    });
 
    <!-- 왼쪽 클릭 -->
    $.contextMenu({
        selector: '.left',
        trigger: 'left',
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m);
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
        }
    });
 
    <!-- 오른쪽 클릭 -->
    $.contextMenu({
        selector: '.right',
        items: {
            // <input type="text">
            name: {
                name: "Text",
                type: 'text',
                value: "Hello World",
                events: {
                    keyup: function(e) {
                        // add some fancy key handling here?
                        window.console && console.log('key: '+ e.keyCode);
                    }
                }
            },
            sep1: "---------",
            yesno: {
                name: "Boolean",
                type: 'checkbox',
                selected: true
            },
            sep2: "---------",
            radio1: {
                name: "Radio1",
                type: 'radio',
                radio: 'radio',
                value: '1'
            },
            radio2: {
                name: "Radio2",
                type: 'radio',
                radio: 'radio',
                value: '2',
                selected: true
            },
            radio3: {
                name: "Radio3",
                type: 'radio',
                radio: 'radio',
                value: '3'
            },
            radio4: {
                name: "Radio3",
                type: 'radio',
                radio: 'radio',
                value: '4',
                disabled: true
            },
            sep3: "---------",
            // <select>
            select: {
                name: "Select",
                type: 'select',
                options: {1: 'one', 2: 'two', 3: 'three'},
                selected: 2
            },
            // <textarea>
            area1: {
                name: "Textarea with height",
                type: 'textarea',
                value: "Hello World",
                height: 40
            },
            area2: {
                name: "Textarea",
                type: 'textarea',
                value: "Hello World"
            },
            sep4: "---------",
            key: {
                name: "Something Clickable",
                callback: $.noop
            }
        },
        events: {
            show: function(opt) {
                $.contextMenu.setInputValues(opt, $this.data());
            },
            hide: function(opt) {
                var $this = this;
                $.contextMenu.getInputValues(opt, $this.data());
            }
        }
    });
});
 
</script>
cs



[적용화면]



[참고문서]

- API 문서

https://swisnl.github.io/jQuery-contextMenu/docs.html


jquery-contextmenu.js는 fontawesome의 아이콘을 사용하고 있기 때문에 icon종류는 여기서 보고 사용하면 된다.

https://fontawesome.com/icons

web/jquery

dom element를 자유롭게 움직이고 수정할 수있게 하는 gridstack.js 소개

기존에 jquery-ui에서 sortable 메서드를 사용하여 element들을 자유롭게 움직일 수 있다.

하지만 미세한 이동이 어렵고, 크기 조절까지 한번에 하기에는 부적절하다.
그래서 검색결과 gridstack.js를 사용하면 편리하게 크기 조절 및 위치 이동까지 자유롭게 할 수있다는 것을 알았다.

[필요 라이브러리]
gridstack.js를 사용하기 위해서는 하단의 정보와 같이 몇몇 라이브러리가 필요하다.






[예제 코드]
1. package.json
-> 필요라이브러리가 추가된 package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "gridstack_test",
  "version": "1.0.0",
  "description": "gridstack_test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wedul",
  "license": "ISC",
  "dependencies": {
    "gridstack": "^0.4.0",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "lodash.js": "^1.0.1",
    "underscore": "^1.9.0"
  }
}
cs




2. html
-> libarary 로드 후 html에 적용


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
<link rel="stylesheet" href="lib/jquery-ui.css"></link>
<link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.css"></link>
<style>
.grid-stack-item {
  border: 1px solid;
  background-color: #eee;
}
</style>
 
<button id="addBtn">항목 추가</button>
 
<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">기존항목1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content">기존항목2</div>
    </div>
</div>
 
<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="node_modules/underscore/underscore.js"/></script>
<script type="text/javascript" src="lib/jquery-ui.js"/></script>
<script type="text/javascript" src="node_modules/gridstack/dist/gridstack.all.js"/></script>
<script type="text/javascript">
$(document).ready(function () {
  var options = {
      cellHeight: 80,
      verticalMargin: 10
  };
  $('.grid-stack').gridstack(options);
 
  let a = 0;
  $('#addBtn').click(() => {
    let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
    a++;
  });
});
</script>
cs



[결과화면]
-> 자유롭게 위치 이동이 가능하고 사이즈 조절이 가능해진다.



[추가정보]
만약 기존에 element이외에 새로운 element에도 gridstack.js를 적용하고 싶은경우에는 다음과 같이 진행해야 한다.

위에 예제 소스에 있지만 필요한 소스는 다음과 같다.


1
2
3
4
5
6
7
8
let $html = '<div id="'+ a + '" class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="4" data-gs-height="2">';
    $html += '<div class="grid-stack-item-content">추가된 항목</div></div>';
 
    $($html).appendTo($('.grid-stack'));
    $('.grid-stack').gridstack();
 
    var grid = $('.grid-stack').data('gridstack');
    grid.addWidget($('#' + a));
cs



gridstack 요소를 가져온 후  addWidget(el)메소드를 사용하여 추가한다.

[속성소개]
- 각 elemenet들이 가지고 있는 몇 가지 속성들이 있다. 모두 소개할 수는 없고 가로, 세로, 위치 좌표에 대한 정보만 소개하겠다. (나머지는 API문서 참고)





위에 소스에서 보면 다음과 같이 속성들을 가지고 있다.

data-gs-x="5"            위치 x좌표 
data-gs-y="0"            위치 y좌표
data-gs-width="4"    가로크기
data-gs-height="4"   세로크기

해당 데이터를 접근하기 위해서는 $('#id').data('gs-x')와 같은 방식으로 접근하면 된다.


[참고자료]
gridstack.js 사이트
http://gridstackjs.com/


github 사이트
https://github.com/gridstack/gridstack.js#api-documentation



푸터바

알림

이 블로그는 구글에서 제공한 크롬에 최적화 되어있고, 네이버에서 제공한 나눔글꼴이 적용되어 있습니다.

카운터

  • Today : 36
  • Yesterday : 651
  • Total : 55,511