JKUN

Welcome To The Jkun.net

블로그 포스트 검색결과


jquery 에 해당되는 글 13개가 검색 되었습니다.

  1. 2016.01.21 jquery attribute (속성 존재여부)
  2. 2015.04.13 $.when()
  3. 2015.04.02 탭브라우져 - 1.0 (2)
  4. 2014.12.29 노드 다루기
  5. 2014.10.21 PHP - IDE CodeLobster (코드랍스터)
  6. 2014.05.13 jQuery Form Reset
  7. 2014.03.14 Plug In - TableDnD (테이블 드래그 앤 드롭)
  8. 2013.11.27 PlugIn - jQuery UserAgent 플러그인
  9. 2013.11.15 PlugIn - jquery-user-agent (유저에이전트)
  10. 2013.08.20 jQuery 아이프레임, iframe
  11. 2013.01.22 jQueryPlugIn - jQueryScroll
  12. 2012.07.29 jQuery Cookie
  13. 2010.07.29 유용한 jQuery 플러그인

Blog

jquery attribute (속성 존재여부)

2016.01.21 18:16 Development/JavaScript | jQuery


Navtive

$(this)[0].hasAttribute('name');

jQuery

$(this).is('[name]');//boolean
$(this).filter('[name="jkun"]');

개인적으로는 is 메소드를 더 선호

저작자 표시
신고

'Development > JavaScript | jQuery' 카테고리의 다른 글

jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
window.resize 크로스 브라우징  (0) 2013.11.15
현재 0 개의 댓글이 있습니다.
Comment

Blog

$.when()

2015.04.13 14:43 Development/JavaScript | jQuery


http://api.jquery.com/jQuery.when/


jQuery 에서 특정액션을 취하고 성공과 실패여부에 따라 기능을 수행해야 하는 경우가 있다.

이 경우에는 when() 메소드를 이용하면 보다 간편하고 명시적인 코드로 처리할 수 있다.

쿼리에서 CASE WHEN ... THEN 절과 비슷한 느낌이 든다.


사용은 다음과 같다.


$.when( alert('밥 먹고난 다음에 ') ).done(function() {
alert('커피한잔 허자');
});

그리고 추가적인 절차가 필요할때도 다음과 같다.

function work1() { /* action */ }
function work2() { /* action */ }
$.when( work1, work2 ).done(function() {
alert('End!');
});

그리고 done() 과 then() 의 차이가 있다.

처리후 콜백이 "성공" 과 ("성공","실패") 로 나누어 진다고 생각하면 된다.

function work() { /* action */ }
function trueWork() { /* action */ }
function falseWork() { /* action */ }
$.when ( work ).then( trueWork, falseWork );


저작자 표시
신고

'Development > JavaScript | jQuery' 카테고리의 다른 글

jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
window.resize 크로스 브라우징  (0) 2013.11.15
현재 0 개의 댓글이 있습니다.
Comment

Blog

탭브라우져 - 1.0

2015.04.02 12:55 From JKUN Development/jQuery Plug-In


jQuery 기반의 탭브라우징 UI 플러그인을 배포합니다.

소스코드 삭제나 변경시에 고지해주시기 바랍니다.^^


전반적인 html 사용코드는 다음과 같습니다.


이제 대략적으로 사용방법에 대해서 설명드립니다.


1. jquery.jkun.tabbrowse.css 와 jquery.jkun.tabbrowse.js 를 불러옵니다.

<link rel="stylesheet" type="text/css" href="jquery.jkun.tabbrowse.css"&glt;


<script src="jquery.jkun.tabbrowse.min.js"></script>

2. 먼저 사용하시고자 하는 UI 의 디자인 전체 코드영역의 스타일시트를 필요에 맞게 수정하시기 바랍니다.
저는 다음과 같이 작성하였습니다.

#tabs { width:1000px; min-height: 600px; height:auto; border:#ebebeb 1px solid; }
#tabs .controller li { margin:0 0 -5px -5px !important; padding:0; border-right:#ebebeb 1px solid;}
#tabs div.viewer { min-height:600px; height:auto; }
#tabs div.viewer div { min-height:600px; height: auto; }

#tabs .controller li a:hover,
#tabs .controller li a.selected { background-color: #000; color:#fff; border-bottom: 0 !important; }
#tabs div.viewer { margin:0; padding:0; border-top: #ebebeb 1px solid; }
3. 이제 HTML 코드 작성규칙입니다.
3-1. 탭브라우져를 사용하고자 하는 요소에 data-widget="tabBrowser" 속성이 필요합니다.
3-2. 해당 요소에 컨트롤러 와 뷰어 요소가 필요합니다.
3-3. 추가하고자 하는 요소에 속성을 지켜주셔야 합니다.
3-3-1. 추가하고자 하는 요소(컨트롤)에 data-tabs-append-control="true" 속성을 지정해 주세요.
3-3-2. 표시하고자 하는 요소에 연결타입을 설정해 주세요.
3-3-3. 표시하고자 하는 요소에 연결타입의 URL 을 지정해 주세요.

<div id=" tabs" data-widget="tabBrowser">
	<ul class="controller"></ul>
	<div class="viewer"></div>
</div>
<div class="controls">
	<button data-tabs-append-control="true" data-view-sync="iframe" data-view-sync-url="http://www.jkun.net">add1</button>
	<button data-tabs-append-control="true" data-view-sync="ajax" data-view-sync-url="/dev/tabs/sync.html">add2</button>
	<button data-tabs-append-control="true">add3</button>
	<button data-tabs-append-control="true">add4</button>
	<button data-tabs-append-control="true">add5</button>
</div>
4. 이제 스크립트코드 작성구간입니다. 탭브라우져를 호출하는 코드입니다.
	$(document).ready(function(){

		var _tabBrowser = new tabBrowser({
			useConfirm : false,
			appendIdRule : 'tabs-',
			appendLimit : 6,
			duplicateCheck : true
		});

	});

이렇게가 사용하는 절차였습니다. 다음은 실행결과 화면입니다.


다음은 이 플러그인에 대한 간단한 기능 명세입니다.

※ 플러그인을 사용하기 위한 사용자 정의 속성 ( HTML Custom Attribute )

 속성명

 정의

 설정

 data-widget

 플러그인을 실행하기 위한 엘리먼트 지정

 data-widget="tabBrowser"

 data-tabs-append-control

 탭을 추가하는 링크 엘리먼트 지정

 true | false
 data-view-sync

 탭 추가시 뷰어에 표시하는 연결형태

 iframe | ajax
 data-view-sync-url

 탭 추가시 뷰어에 표시하는 연결형태에

 따른 컨텐츠가 포함되어 있는 URL

 ex) /jkun.html


※ 플러그인을 사용하기 위한 옵션 ( Javascript Literal Object )

 옵션명

 정의

 설정

 useConfirm

 탭 삭제시 확인 여부 설정

 true | false

 appendIdRule

 생성되는 탭에 대한 ID 규칙 설정

 String

 appendLimit 생성되는 탭 개수에 대한 제한

 Integer

 duplicateCheck

 탭 생성시 중복되는 탭에 대하여

 새로 지우고 생성 또는 취소를

 설정

 true | false





첨부된 파일은 소스코드와 전체적인 예제파일입니다.
퍼가시면서 댓글 남겨주시는 센스도 잊지 마세요~ ^^


저작자 표시
신고

'From JKUN Development > jQuery Plug-In' 카테고리의 다른 글

탭브라우져 - 1.0  (2) 2015.04.02
현재 2 개의 댓글이 있습니다.

보리보리 2015.04.06 02:50 신고

감사합니다. 찾고 있었던거에요.
잘 쓰겠습니다. 설명도 친절하게 달아주셨네요~ ^^*


Comment

Blog

노드 다루기

2014.12.29 00:22 Development/JavaScript | jQuery


출처 : http://egloos.zum.com/survival/v/464374


1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기
    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 
3. 부모 노드 찾기
 
 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기
    -- $("선택자").parents()  모든 부모
 - 모든 부모 중 선택자에 해당하는 부모 찾기
    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기
    -- $("선택자").prev()
    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기
    -- $("선택자").next()
    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성
    -- $("노드")
    -- $("선택자").html("<노드>...")
    -- $("노드").clone()

 - 추가
    -- $기준노드.append($추가노드)
    -- $추가노드.appendTo($기준노드)
    -- $기준노드.prepend($추가노드)  
    -- $추가노드.prependTo($기준노드)
    -- $추가노드.insertBefore($기준노드)
    -- $기준노드.before($추가노드)
    -- $추가노드.insertAfter($기준노드)
    -- $기준노드.after($추가노드)

 - 삭제
    -- $("선택자").remove()

 - 이동
    -- $기준노드.append($이동노드)  
    -- $이동노드.appendTo($기준노드)
    -- $이동노드.insertBefore($기준노드)
    -- $기준노드.before($이동노드)
    -- $이동노드.insertAfter($기준노드)   
    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")
 
 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

저작자 표시
신고

'Development > JavaScript | jQuery' 카테고리의 다른 글

jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
window.resize 크로스 브라우징  (0) 2013.11.15
현재 0 개의 댓글이 있습니다.
Comment

Blog

PHP - IDE CodeLobster (코드랍스터)

2014.10.21 23:28 Development/IDE


오웃. 꽤 괜찮은 PHP IDE 가 나왔다. CodeLobster (코드랍스터) ㅋㅋㅋ

현재까지는 윈도우까지만 지원한다.

무엇보다 훌륭한건 상용화되있는 PHP 프레임워크 및 jQuery 등을 꽤나 훌륭히 지원한다.

거기다 디버깅에 브레이크 포인트까지.

PHP 웹개발을 위해서만 특화된 IDE 라는 느낌이 팍팍온다. ㅎㅎ




그리고 system 쪽에 코어클래스중 커스텀으로 추가한 메소드라든지 코드어시스트 기능이 제법 깔끔히

지원된다.



이클립스에서 코드이그나이터 코드어시스트를 받으려면 프로젝트를 추가해주고 사용해야 하는

꽤나 그지같은 불편함이 있었는데;


그리고 컬러스키마같은 경우도 꽤나 다양하게 종류를 제공한다.


하지만 에디션별로 사용할 수 있는 차이가 있다. 어느 툴과 마찬가지로. ㅎㅎ

일단 프리버젼 등록키를 받고나면 30일동안 무료사용인데, 홈페이지에도 아래처럼 차이가 나와있다.



위 플러그인 프레임워크 기반 서비스중인 회사에서는 돈주고 사도 무방할정도 비싸지 않은 금액이다.

나라면 CodeIgniter + Phalcon + jQUery 만 ㄱㄱㄱ








저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

jQuery Form Reset

2014.05.13 15:32 Development/JavaScript | jQuery


에이 너무 까먹어서 포스팅한다. 짜증나네;;


jQuery Form Reset


$('#formID')[0].reset(); //ㅅㅂ


나도 구글링하다 여기[http://mytory.net/archives/365] 보고 찾음; 감사합니다.^^;

저작자 표시
신고

'Development > JavaScript | jQuery' 카테고리의 다른 글

jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
window.resize 크로스 브라우징  (0) 2013.11.15
현재 0 개의 댓글이 있습니다.
Comment

Blog

Plug In - TableDnD (테이블 드래그 앤 드롭)

2014.03.14 12:20 Development/JavaScript | jQuery-PlugIn


테이블 관련 플러그인 심플하고 그리 무겁지도 않은편입니다.

저도 현재 아주 유용하게 잘쓰고 있습니다.

아래 코드는 기본적으로 구현하는 코드입니다.

$(document).ready(function() { // Initialise the table $('셀렉터').tableDnD(); });


링크 : jQuery 테이블 드래그앤드롭 플러그인

저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

PlugIn - jQuery UserAgent 플러그인

2013.11.27 18:20 Development/JavaScript | jQuery-PlugIn


브라우저 IE10 이상부터는 유저에이전트 문자열에서 MSIE 문자열을 반환하지 않는다.

해서 이로 인해 브라우저의 버젼별 분기하여 수행할 작업이 있을때 문제가 발생할 수 있다.

이전 포스팅했던 jquery-ua 플러그인을 조금 수정했다. 10이상부터는 브라우저 엔진으로 분기를 하여

인터넷 익스플로러 버전을 감별해 내는 것이다.

허접한 함수라도 이해부탁드립니다. 사용하실때는 댓글을 다는 센수~!

jquery-ua.zip


저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

PlugIn - jquery-user-agent (유저에이전트)

2013.11.15 16:51 Development/JavaScript | jQuery-PlugIn


(function ($) {
 
    $.ua = $.ua || {
        platform: {},
        browser: {},
        engine: {}
    };
 
    var ua = navigator.userAgent.toLowerCase(),
        p = $.ua.platform,
        b = $.ua.browser,
        e = $.ua.engine,
        u = 'unknown';

    //alert(navigator.userAgent);
 
    // detect platform
    p.name = (/(win|mac|linux|iphone|ipod|android)/.exec(ua) || [, u])[1];
    p[p.name] = true;
 
    // detect browser
    b.name = (/(msie|firefox|chrome|safari|opera)/.exec(ua) || [, u])[1]; // chrome must be tested before safari
    b[b.name] = true;
    b.version = (b.unknown)? 0: /(?:msie |firefox\/|chrome\/|version\/)(\d+(\.\d+)*)/.exec(ua)[1];
 
    // detect engine
    e.name = (/(trident|webkit|gecko|presto)/.exec(ua) || [, u])[1]; // webkit must be tested before gecko
    e[e.name] = true;
    e.version = (e.unknown)? 0: /(?:trident\/|rv:|webkit\/|presto\/)(\d+(\.\d+)*)/.exec(ua)[1];
 
    // add classes to html element
    $('html').addClass([
        p.name,
        b.name,
        b.name + parseInt(b.version, 10),
        e.name,
        e.name + parseInt(e.version, 10)
    ].join(' '));
 
})(jQuery);

function CastUserAgent(AgentCase) {
	var c = [], i, j;
	var d = 0;
	for (i in $.ua) {
		if (i === 'data' || i === 'init') {
			continue;
		}
		for (j in $.ua[i]) {
			d = 0;
			if (i === AgentCase) {
				if (d != 0) {
					c[c.length] = ',';
				}
				c[c.length] = '\'' + j + '\'' + ':\'' + $.ua[i][j] + '\'';
				d++;
			}
		}
	}
	c.join();
	return eval('({' + c.toString() + '})');
}

아래 CastUserAgent 함수를 추가하였다. 파라메터를 문자열 형태로 'platform, browser, engine'

로 넘겨주면 name, version 을 반환한다.

아래와 같이 호출하여 사용하면 된다.

var bw = CastUserAgent ('browser').name;
alert(bw);



저작자 표시
신고
현재 0 개의 댓글이 있습니다.
Comment

Blog

jQuery 아이프레임, iframe

2013.08.20 16:58 Development/JavaScript | jQuery-PlugIn


<iframe id="TargetFrame"></iframe>


1. 속성변경

$('#TargetFrame').attr('src', 'http://www.jkun.net');

$('#TargetFrame').attr({

  'src' : 'http://www.jkun.net',

  'width' : '100',

  'height' : '100',

  'scrolling' : 'no'

});


2. 프레임내 문서객체 요소 접근

$('#TargetFrame').contents().find('div.target-panel');


3. 부모 요소에 접근

- $('#TargetFrame', parent.document);

- parent.$('#TargetFrame');

저작자 표시
신고

'Development > JavaScript | jQuery-PlugIn' 카테고리의 다른 글

PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment

Blog

jQueryPlugIn - jQueryScroll

2013.01.22 22:49 Development/JavaScript | jQuery-PlugIn


jQuery 로 스크롤을 제어할 수 있는 플러그 인이다.

보여줄 화면이 작거나 사용자 편의 제공에서의 UI 구성시에 도움이 되겠다.


<script type="text/javascript" src="jquery-1.7.2.min.js" comment="왠만하면 최신버전으로~^^"></script>

<script type="text/javascript" src="jquery.scrollTo-min.js" ></script>

<script type="text/javascript">

    $('대상').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

</script>


참고 : http://demos.flesler.com/jquery/scrollTo/


jquery.scrollTo-min.js.zip


저작자 표시
신고

'Development > JavaScript | jQuery-PlugIn' 카테고리의 다른 글

PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment

Blog

jQuery Cookie

2012.07.29 12:10 Development/JavaScript | jQuery-PlugIn


jQuery 쿠키를 사용예제다.

jQuery 1.0.x 기준으로 제공된다. 참고 URL 은 http://archive.plugins.jquery.com/project/Cookie

자꾸 까먹어버릇해서 쓸데마다 찾는것도 짜증나니,

포스팅을 해놓다가 느낀건데.. jQuery 를 주 라이브러리로 선택했으면 수시로 플러그인을 살펴봐야겠다는

생각과.. 제대로 사용하려면 HTML과 CSS 를 보다 더 자세하게 알아야 하며,

기본인 네이티브가 좋은 바탕이 되주어야 겠단 생각이 더욱든다

$.cookie('Key'); /* 쿠키 로드 */
$.cookie('Key','Value'); /* 쿠키 생성 */
$.cookie('Key','Value', { expires : 7 }); /* 쿠키의 유효기간 7일*/
$.cookie('Key', null, { expires : -1 }); /* 쿠키제거 */

저작자 표시
신고

'Development > JavaScript | jQuery-PlugIn' 카테고리의 다른 글

PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment

Blog

유용한 jQuery 플러그인

2010.07.29 14:11 Development/JavaScript | jQuery-PlugIn


출처 : http://blog.naver.com/loudon23/30084204939

jQuery 플러그인(http://plugins.jquery.com/)은 등록된것만 4,500개에 이른다.

다 어디에 쓰이는 플러그인인지 써보지 않고서는 알 방법이 없지 않나. 나도 뭐가 있는지 모르는 상태에서 list 플러그인 찾다가 누군가 올려 놓은 유용한 jQuery 플러그(http://marcgrabanski.com/article/list-of-useful-jquery-plugins)리스트라는 글을 발견하고 옮겨 놨다.

저작자 표시
신고

'Development > JavaScript | jQuery-PlugIn' 카테고리의 다른 글

PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29
현재 0 개의 댓글이 있습니다.
Comment