Navtive

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

jQuery

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

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

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

jQuery PlugIn - 커스텀 스크롤 라이브러리  (0) 2016.06.19
jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14

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 PlugIn - 커스텀 스크롤 라이브러리  (0) 2016.06.19
jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14

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
  1. 보리보리 2015.04.06 02:50 신고

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

출처 : 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
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14
PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27

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

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

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

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

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




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

지원된다.



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

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


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


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

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



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

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








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


jQuery Form Reset


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


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

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

$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14
PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15

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

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

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

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


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

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

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

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

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

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

jquery-ua.zip


(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);



<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 - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (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

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 - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (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

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 - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (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
출처 : 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 - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (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

+ Recent posts