'Plugin'에 해당되는 글 4건
- 2017.01.12 Table 자동 rowspan 처리 jQuery plugin
- 2011.11.18 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) 5
- 2011.08.06 [추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게! 3
- 2011.08.05 설치된 Plugin Uninstall
Table 자동 rowspan 처리 jQuery plugin
jQuery Plugin 2017. 1. 12. 15:45
요렇게 Table에서 rowspan 을 처리해주는게 필요해서 관련 훌러그인이 있나 찾아 보다가 어떤 친절한 사람이 github에 만들어 놓은것을 발견하였다.
https://github.com/marcosesperon/jquery.rowspanizer.js
하지만 살짝 문제가 있었는데
어떤 특정컬럼에 대해 rowspan 할지 지정하는 옵션이 없어서 모든 td 들에 대해서 rowspan 을 해버리는게 쪼금 아쉬웠다.
나는 특정 컬럼에만 적용하고 싶었는데... 뭐 어쩌나~ 그 친절한 사람이 만들어 놓은 훌러그인을 살짝 수정했다.
본의 아니게 친절한 분의 깔끔한 소스코드에 나의 더러운 코드를 쪼금 넣었다.
사용법은 기존대로 요렇게 하면 모든 컬럼에 대해서 적용하는 것이고
1 | $( "#target-table" ).rowspanizer(); |
1, 2, 5번째 컬럼에 대해서 적용하려면 요렇게 하면 된다.
1 2 3 4 | $( "#target-table" ).rowspanizer({ cols : [0, 1, 4], vertical_align: "middle" }); |
'jQuery Plugin' 카테고리의 다른 글
jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) (3) | 2012.05.29 |
---|---|
자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) (5) | 2011.11.18 |
자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-) (0) | 2011.11.07 |
jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)
jQuery Plugin 2011. 11. 18. 23:26
종종 웹서핑을 하면서 a 를 누르면 욜리~ b를 누르면 죨리~ c를 누르면 요기능 을 해주는 단축키 기능이 있는 사이트들을 보게 된다.
요런 단축키 기능을 쉽게 추가해 주기 위한 jQuery 훌러그인을 맹글어 보았다.
다운로드
설치
1 2 | < script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type = "text/javascript" ></ script > < script src = "jquery.shortcut-0.1.js" type = "text/javascript" ></ script > |
사용법
1 2 3 4 5 6 7 8 9 10 11 12 | < script type = "text/javascript" > $.shortcut({ 65 : function(){ alert("a키 눌렀을때 처리할 기능"); // window.location.href = "/"; // 홈으로 이동 }, 66 : function(){ alert("b키 눌렀을때 처리할 기능"); // $("#keyword").focus(); // keyword 인풋박스로 포커스 이동 } }); </ script > |
$.shortcut() 에 추가하고 단축키 키코드값 : 키를 눌렀을때 실행할 자바스크립 함수를 쌍으로 해서 ,(콤마) 로 구분해 넣고 싶은 만큼 쪽 넣으면 된다~
키코드값 알아내기. ↓ 아래에 있는 인풋박스에 코드값을 알고 싶은 키를 입력하면 옆에 키코드값이 뽓 나타난다.
키코드 알고 싶어염 :
※ 사람들이 input, textarea 에 뭔가 입력하고 있을때 단축키 기능이 실행되 버리는 것을 막기 위해 input, textarea 에 뭔가를 입력할때는 단축키 기능이 작동하지 않는다.
※ 웹브라우져 단축키 ex) ctrl+a 를 입력했을때 사이트 단축키 기능이 실행되는것을 막기 위해 컨트롤키, 알트키, 쉬프트키를 누른상태에서는 단축키 기능이 작동하지 않는다.
2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)
2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2
2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제
2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기
'jQuery Plugin' 카테고리의 다른 글
Table 자동 rowspan 처리 jQuery plugin (0) | 2017.01.12 |
---|---|
jQuery를 이용한 스크롤 따라니는 배너를 쉽게 맨들기(scroll follow) (3) | 2012.05.29 |
자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-) (0) | 2011.11.07 |
jQuery datepicker 팝업창 사이즈 바꾸기 (3) | 2011.11.06 |
jQuery UI datepicker z-index 때문에 datepicker 가 뽓 나타나지 않을때 해결하기 (1) | 2011.11.06 |
[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!
이클립 2011. 8. 6. 00:21
html, css를 작성할때 특히 html 태그를 작성할때 기가맥힌 이클립 플러그인이다.
일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.
Help > Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로 사이트를 등록한다.
사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.
설치완료 후 이클립을 리스탓트 하면 끝~
자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.
뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.
참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!
요렇게 입력하서 Tab 키를 뽓 눌러보면
요렇게 후딱 싹 바뀌는걸 볼수 있다!
뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.
뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.
계속해서 몇가지 예를 들어보자.
html:4t
script:src
link:css
ul#nav.tree>li*3>a
ul#nav.tree>li*2>a.navBtn[href=#]
ul#nav.tree>li*2>a#link$.navBtn[href=#]
ul#nav.tree>li*2>a#link$$.navBtn[href=#]
table+ul#nav.tree>li*2
table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2)
우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!
[HTML 예제보러 가기]
[CSS 예제보러 가기]
일단 바로 설치를 한 다음에 간단한 사용법을 살펴보자.
Help > Install New Software 에 가서 Work with에 http://zen-coding.ru/eclipse/updates/ 입력한후 Add 버튼을 클릭해서 적당한 이름으로 사이트를 등록한다.
사이트를 등록하면 잠시후에 설치할 플러그인 목록이 조회되는데 체크후 Next 버튼을 클릭해서 플러그인 설치를 완료한다.
설치완료 후 이클립을 리스탓트 하면 끝~
자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.
뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.
참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!
1 | div#tree>ul>li*3 |
1 2 3 4 5 6 7 | < div id = "tree" > < ul > < li ></ li > < li ></ li > < li ></ li > </ ul > </ div > |
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.
뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.
계속해서 몇가지 예를 들어보자.
html:4t
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html lang = "en" > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" > < title ></ title > </ head > < body > </ body > </ html > |
script:src
1 | < script type = "text/javascript" src = "" ></ script > |
link:css
1 | < link rel = "stylesheet" type = "text/css" href = "style.css" media = "all" /> |
ul#nav.tree>li*3>a
1 2 3 4 5 | < ul id = "nav" class = "tree" > < li >< a href = "" ></ a ></ li > < li >< a href = "" ></ a ></ li > < li >< a href = "" ></ a ></ li > </ ul > |
ul#nav.tree>li*2>a.navBtn[href=#]
1 2 3 4 | < ul id = "nav" class = "tree" > < li >< a href = "#" class = "navBtn" ></ a ></ li > < li >< a href = "#" class = "navBtn" ></ a ></ li > </ ul > |
ul#nav.tree>li*2>a#link$.navBtn[href=#]
1 2 3 4 | < ul id = "nav" class = "tree" > < li >< a href = "#" id = "link1" class = "navBtn" ></ a ></ li > < li >< a href = "#" id = "link2" class = "navBtn" ></ a ></ li > </ ul > |
ul#nav.tree>li*2>a#link$$.navBtn[href=#]
1 2 3 | < ul id = "nav" class = "tree" > < li >< a href = "#" id = "link01" class = "navBtn" ></ a ></ li > < li >< a href = "#" id = "link02" class = "navBtn" ></ a ></ li > |
table+ul#nav.tree>li*2
1 2 3 4 5 | < table ></ table > < ul id = "nav" class = "tree" > < li ></ li > < li ></ li > </ ul > |
table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < table id = "summary" > < caption ></ caption > < thead > < tr > < th ></ th > </ tr > </ thead > < tbody > < tr > < td ></ td > < td ></ td > </ tr > < tr > < td ></ td > < td ></ td > </ tr > </ tbody > </ table > |
우째 쓰는지는 대략 알수 있을 것이다. 더 많은 것을 알고 싶을땐!
[HTML 예제보러 가기]
[CSS 예제보러 가기]
install : 취임시키다, 장치하다, 임명하다, 자리에 앉히다, 인스톨하다
'이클립' 카테고리의 다른 글
Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기 (0) | 2011.08.08 |
---|---|
Eclipse Javascript Code Assist 가 되지 않을때 (1) | 2011.08.08 |
[추천 플러그인] jqueryWTP : Eclipse jQuery Code Assist Plugin (3) | 2011.08.05 |
설치된 Plugin Uninstall (0) | 2011.08.05 |
후져진 Eclipse Indido 에디터 폰트를 다시 쪽바로 맨들기 (6) | 2011.07.28 |
설치된 Plugin Uninstall
이클립 2011. 8. 5. 11:43
설치된 훌러그인이 필요가 없을때 쓰지도 않는걸 남겨두느니 차라리 지우고 싶다.
고럴땐 Help > About Eclipse > Installation Detalis > Unstall 하고 싶은 플러그인 선택 > Uninstall
요래하면 끝
고럴땐 Help > About Eclipse > Installation Detalis > Unstall 하고 싶은 플러그인 선택 > Uninstall
요래하면 끝
'이클립' 카테고리의 다른 글
Zencoding 활용 #1 : 기본적으로 출력되는 lang, locale, charset 변경하기 (0) | 2011.08.08 |
---|---|
Eclipse Javascript Code Assist 가 되지 않을때 (1) | 2011.08.08 |
[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게! (3) | 2011.08.06 |
[추천 플러그인] jqueryWTP : Eclipse jQuery Code Assist Plugin (3) | 2011.08.05 |
후져진 Eclipse Indido 에디터 폰트를 다시 쪽바로 맨들기 (6) | 2011.07.28 |