'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



요렇게 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"
});


Trackback 0 Comment 0

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

종종 웹서핑을 하면서 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   를 입력했을때 사이트 단축키 기능이 실행되는것을 막기 위해 컨트롤키, 알트키, 쉬프트키를 누른상태에서는 단축키 기능이 작동하지 않는다. 


Trackback 0 Comment 5
  1. 슈즈니 2012.01.09 12:32 address edit & del reply

    정말 좋은 강좌들 잘 보고 갑니다.^^

  2. bleu 2012.04.05 23:51 address edit & del reply

    장애인 사이트 제작중이였는데 너무 고마워요 ^^

  3. Gunmania 2013.07.05 09:20 address edit & del reply

    감사합니다! 처음에 jQuery 저 주소로 안되서 jQuery쪽으로 가서 최신버전(1.10)을 썼는데 충돌나네요 ㄷㄷ jQuery쪽에서 1.6.4로 넣어서 해결했습니다

  4. 멋지다 2013.08.15 23:59 address edit & del reply

    너무 민감한데요. 혹시 누르는 속도를 조금 늦춰서 감지할 수 있을까요? 0.5초만 늦춰도 오류가 좀 줄꺼 같긴해여ㅛ

  5. 비가오면 2016.02.18 15:00 address edit & del reply

    좋은 정보 감사합니다.

[추천 플러그인]Zencoding For Eclipse : html, css작성을 쉽게!

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 : 취임시키다, 장치하다, 임명하다, 자리에 앉히다, 인스톨하다
Trackback 1 Comment 3
  1. 음.. 2014.01.20 14:03 address edit & del reply

    더 이상 서비스 되지 않는듯 합니다. emmet로 변한듯

  2. 손님 2014.08.19 11:11 address edit & del reply

    혹시 사용중이신 테마좀 공유해주실수 있나요? 그리고 css 오타 판독기능 같은건 없나요?
    항상 좋은 정보 감사합니다.~

  3. TK 2016.06.16 14:01 address edit & del reply

    zen coding이 emmet로 바뀌면서 플러그인 주소가 http://emmet.io/eclipse/updates/ 로 변경되었네요.

    참고 - https://github.com/emmetio/emmet-eclipse#readme

설치된 Plugin Uninstall

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

고럴땐 Help > About Eclipse > Installation Detalis > Unstall 하고 싶은 플러그인 선택 > Uninstall

요래하면 끝



Trackback 0 Comment 0
prev 1 next