'Plugin'에 해당되는 글 4건

  1. 2017.01.12 Table 자동 rowspan 처리 jQuery plugin
  2. 2011.11.18 자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자) 5
  3. 2011.08.06 [추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게! 3
  4. 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 을 해버리는게 쪼금 아쉬웠다.


나는 특정 컬럼에만 적용하고 싶었는데... 뭐 어쩌나~ 그 친절한 사람이 만들어 놓은 훌러그인을 살짝 수정했다.


본의 아니게 친절한 분의 깔끔한 소스코드에 나의 더러운 코드를 쪼금 넣었다.


jquery.rowspanizer.js


사용법은 기존대로 요렇게 하면 모든 컬럼에 대해서 적용하는 것이고

$("#target-table").rowspanizer();

1, 2, 5번째 컬럼에 대해서 적용하려면 요렇게 하면 된다.

$("#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
Posted by 스토브

자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)

jQuery Plugin 2011. 11. 18. 23:26
종종 웹서핑을 하면서 a 를 누르면 욜리~ b를 누르면 죨리~ c를 누르면 요기능 을 해주는 단축키 기능이 있는 사이트들을 보게 된다.

요런 단축키 기능을 쉽게 추가해 주기 위한 jQuery 훌러그인을 맹글어 보았다.


다운로드

jquery.shortcut-0.1.js




설치 
<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>



사용법 
<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 로 메뉴 접었다~ 펼쳤다~ 구현하기


저작자표시 비영리 변경금지

'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
Posted by 스토브

[추천 플러그인]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 버튼을 클릭해서 플러그인 설치를 완료한다.

설치할 항목 선택(zencoding)


 설치완료 후 이클립을 리스탓트 하면 끝~


자~ 이제 간단히 기능을 살펴보기 위해서 html 파일이나 jsp 파일이나 뭐 아무파일이나 생성해서 에디터를 열어보자.

뭐 이왕이면 html 이나 jsp 파일을 생성하는게 컬러링이 되니깐 좋을것이다.

참고로 Zencoding 플러그인은 이클립스 상의 왠만한 텍스트에서나 다 쓸 수 있다. java 소스 에디터에서도 된다! 할일은 없지만. 아무튼!!

div#tree>ul>li*3
요렇게 입력하서 Tab 키를 뽓 눌러보면
<div id="tree">
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
요렇게 후딱 싹 바뀌는걸 볼수 있다! 뭐 별기능 아니지만 어째보면 보기만 해도 흐뭇한 기능이 아닐수 없다.
코딩할때 카피&붙여넣기 하는 일이 많을까? 이걸 쓸 일이 많을까 하는 생각은 문득 해보긴 해본다.

뭐 또 아무튼 Zencoding 에서 쓸수 있는 문법이랄까? 하여튼 그게 css 문법이랑 거의 똑같다는게 또 큰 장점이 아닐수 없다.





계속해서 몇가지 예를 들어보자.



html:4t 
<!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 
<script type="text/javascript" src=""></script>

link:css 
<link rel="stylesheet" type="text/css" href="style.css" media="all" />

ul#nav.tree>li*3>a 
<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=#] 
<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=#] 
<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=#] 
<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 
<table></table>
<ul id="nav" class="tree">
	<li></li>
	<li></li>
</ul>

table#summary>(caption)+(thead>tr>th)+(tbody>tr*2>td*2) 
<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
Posted by 스토브

설치된 Plugin Uninstall

이클립 2011. 8. 5. 11:43
설치된 훌러그인이 필요가 없을때 쓰지도 않는걸 남겨두느니 차라리 지우고 싶다.

고럴땐 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
Posted by 스토브
prev 1 next
openclose

티스토리툴바