프프프

javascript

15개 발견

jQuery 플러그인 제작 프로세스

0. 영역 내, $ 별칭 보호

(function(global, $){
    'use strict';
    // $ === window.jQuery
})(window, window.jQuery);

1. 플러그인 기본형 쉘 작성

(function(global, $){
    'use strict';

    var plugin_name = '';

    if ( !$.fn[plugin_name] ) {
        $.fn[plugin_name] = function() {
            // 플러그인 코드
        };
    }

})(window, window.jQuery);

2. 체이닝 설정

(function(global, $){
    'use strict';

    var plugin_name = '';

    if ( !$.fn[plugin_name] ) {
        $.fn[plugin_name] = function() {

            // jQuery 체이닝 설정
            return this;
        };
    }

})(window, window.jQuery);

3. $.each() 유틸리티 메소드 활용

(function(global, $){
    'use strict';

    var plugin_name = '';

    if ( !$.fn[plugin_name] ) {
        $.fn[plugin_name] = function() {
            var $this = this;

            return $.each($this, function(index, el){
                var _$item = $this.eq(index); // jQuery 인스턴스 객체

                // 플러그인 코드
            });
        };
    }

})(window, window.jQuery);

4. 객체지향 프로그래밍 설정

(function(global, $){
    'use strict';

    var plugin_name = '';

    // 생성자 함수
    var ConstructorFn = function(el) {
        this.el = el;
    };

    // 생성자 프로토타입 객체
    ConstructorFn.fn = ConstructorFn.prototype = {
        // 초기화 메소드
        init: function() {

        }
    };

    if ( !$.fn[plugin_name] ) {
        $.fn[plugin_name] = function() {
            var $this = this;

            return $.each($this, function(index, el){
                var _$item = $this.eq(index);

                new ConstructorFn(el);
            });
        };
    }

})(window, window.jQuery);

5. 사용자정의/기본 옵션 설정

(function(global, $){
    'use strict';

    var plugin_name = '';

    var ConstructorFn = function(el, options) {
        this.init(el, options)
    };

    ConstructorFn.fn = ConstructorFn.prototype = {
        init: function(el, options) {
            // 사용자 정의 옵션 >> 기본 옵션 = 병합
            options = $.extend({}, $.fn[plugin_name].defaults, options);

            // 이벤트 메소드 실행
            this.events();
        },
        events: function() {

        }
    };

    if ( !$.fn[plugin_name] ) {
        // options - 사용자 정의 옵션 설정
        $.fn[plugin_name] = function(options) {
            var $this = this;

            return $.each($this, function(index, el){
                var _$item = $this.eq(index);

                // 생성자 함수에 options 전달
                new ConstructorFn(el, options);
            });
        };

        // 플러그인 초기 옵션 설정
        $.fn[plugin_name].defaults = {

        };
    }

})(window, window.jQuery);

출처: yamoo9/jQuery-Class

'Front > JavaScript' 카테고리의 다른 글

쿠키 만료 세팅  (0) 2017.02.15
지정한 문자 모두 치환하기 (replaceAll)  (0) 2017.02.15
accordion  (0) 2017.02.09
count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

출처: http://gent.tistory.com/4

'Front > JavaScript' 카테고리의 다른 글

jQuery 플러그인 만들기  (0) 2017.03.19
지정한 문자 모두 치환하기 (replaceAll)  (0) 2017.02.15
accordion  (0) 2017.02.09
count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

출처: http://gent.tistory.com/18

'Front > JavaScript' 카테고리의 다른 글

jQuery 플러그인 만들기  (0) 2017.03.19
쿠키 만료 세팅  (0) 2017.02.15
accordion  (0) 2017.02.09
count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

See the Pen WRaGYY by parkjinhyung (@gutmate) on CodePen.


'Front > JavaScript' 카테고리의 다른 글

쿠키 만료 세팅  (0) 2017.02.15
지정한 문자 모두 치환하기 (replaceAll)  (0) 2017.02.15
count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
최대값, 최소값 구하기 (arr sort)  (0) 2016.11.15
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

'Front > JavaScript' 카테고리의 다른 글

accordion  (0) 2017.02.09
count elements  (0) 2017.02.06
최대값, 최소값 구하기 (arr sort)  (0) 2016.11.15
HTML5 TABLE 접근성  (0) 2016.11.11
변수 추가하기  (0) 2016.11.09
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다
$(function(){
    /* li 중 최대 높이값으로 높이 통일하기 */
    var heightArr = [];
    $("ul li").each(function(){
        heightArr.push($(this).height()); // li 높이 값 배열에 담기
    });
    heightArr.sort(function(a, b){return b-a;}); // 내림차순
    // heightArr.sort(function(a, b){return a-b;}); // 오름차순
    $("ul li").height(heightArr[0]);  // 내림차순일 경우 최대값, 오름차순일 경우 최소값
});


'Front > JavaScript' 카테고리의 다른 글

count elements  (0) 2017.02.06
문자열 존재 확인  (0) 2016.12.12
HTML5 TABLE 접근성  (0) 2016.11.11
변수 추가하기  (0) 2016.11.09
유튜브 재생 제어  (0) 2016.10.31
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

See the Pen gLaMyp by parkjinhyung (@gutmate) on CodePen.

'Front > JavaScript' 카테고리의 다른 글

최대값, 최소값 구하기 (arr sort)  (0) 2016.11.15
HTML5 TABLE 접근성  (0) 2016.11.11
유튜브 재생 제어  (0) 2016.10.31
이벤트 버블링  (0) 2016.10.28
레이어팝업 위치조정, 초점처리(for웹접근성)  (0) 2016.10.17
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다
1
2
3
4
5
6
7
8
9
// 유투브영상 재생
function btnOpenVideo() {
    $("#vedio").attr("src","https://www.youtube.com/embed/aaaaaa?autoplay=1");
    $(".ytp-large-play-button").trigger('click');
}
// 재생 종료
function btnCloseVideo() {
    $("#vedio").attr("src","https://www.youtube.com/embed/aaaaaa?autoplay=0");
}
cs


'Front > JavaScript' 카테고리의 다른 글

HTML5 TABLE 접근성  (0) 2016.11.11
변수 추가하기  (0) 2016.11.09
이벤트 버블링  (0) 2016.10.28
레이어팝업 위치조정, 초점처리(for웹접근성)  (0) 2016.10.17
스크롤 이동  (0) 2016.10.11
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

See the Pen mOdwEe by parkjinhyung (@gutmate) on CodePen.

'Front > JavaScript' 카테고리의 다른 글

변수 추가하기  (0) 2016.11.09
유튜브 재생 제어  (0) 2016.10.31
레이어팝업 위치조정, 초점처리(for웹접근성)  (0) 2016.10.17
스크롤 이동  (0) 2016.10.11
테이블 서머리, 캡션 삽입 스크립트  (0) 2016.09.22
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

<iframe>으로 올린 유투브 동영상 유투브 동영상이 화면위로 뚫고 올라오는 경우

z-index로도 안먹히는 경우

 

&wmode=opaque"

속성이 지정되어 있는경우?대신 &를 넣어준다.

?wmode=opaque"

 

 

<iframe width="640" height="360" src="http://www.youtube.com/embed/6eH05-QYjz4?feature=player_detailpage&wmode=opaque" frameborder="0" allowfullscreen></iframe>

[출처] <iframe>으로 올린 유투브 동영상 z-index 문제|작성자 미투마켓


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function iframeVideo() {
   $('iframe').each(function() {
      var url = $(this).attr("src");
 
      if ($(this).attr("src").indexOf("?"> 0) {
         $(this).attr({
            "src": url + "&wmode=transparent",
            "wmode""Opaque"
         });
      } else {
         $(this).attr({
            "src": url + "?wmode=transparent",
            "wmode""Opaque"
         });
      }
   });
}
cs


'Front > HTML&CSS' 카테고리의 다른 글

반응형 박스  (0) 2016.10.31
[IE] table 요소에 position과 background 사용 주의  (0) 2016.10.26
<!doctype>  (0) 2016.05.03
말 줄임  (0) 2016.05.02
가로세로 비율을 유지하는 반응형 박스  (0) 2016.04.26
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$('.layer_open').click(function(){
    var el = $(this);
    $('.layer_popup').show();
    $('.dim').show();
    el.attr('data-focus','on'); // 레이어 팝업이 닫힐 때를 위한 표시 - 웹접근성
 
    /* modalPopup팝업 위치조정 */
    window.setTimeout(function(){
        var target = $("#layerPopup");
        var win_height = $(window).height();
        var pop_height = target.height();
        var top_value = $(window).scrollTop() + (win_height - pop_height) /2;
        target.attr("tabindex","0");
        target.show().css("top",top_value);
        target.focus();
    },500);// ajax 팝업을 고려한 딜레이 추가
    /* [end]: modalPopup팝업 위치조정 */
});

$('.layer_close').click(function(){
    $('.layer_popup').hide();
    $('.dim').hide();
    $("a[data-focus~=on]").focus(); // 표시해둔 곳으로 초점 이동
    window.setTimeout(function(){
        $("a[data-focus~=on]").removeAttr("data-focus");
    },500); // 역할을 다하고 필요없어진 표시 삭제
});
cs


'Front > JavaScript' 카테고리의 다른 글

유튜브 재생 제어  (0) 2016.10.31
이벤트 버블링  (0) 2016.10.28
스크롤 이동  (0) 2016.10.11
테이블 서머리, 캡션 삽입 스크립트  (0) 2016.09.22
백그라운드이미지 애니메이션  (0) 2016.09.22
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function(){
    /**
     * 백그라운드 이미지의 애니메이션 화
     *
     *  - SECTION: 반복되는 이미지 구간 넓이
     *  - WIDTH: 이미지 전체 넓이
     *  - TIME: 애니메이션 속도
     *
     */
    
     // 생성
     $.fn.aniJin = function (SECTION, WIDTH, TIME){
         var $this = $(this); // 대상 설정
         if(!TIME) {TIME = 200;} // default 값 설정
 
         var repeat = setInterval(function(){
             var bpx = parseInt($this.css("backgroundPositionX")); // 백그라운드의 현재 위치값
             $this.css({
                 backgroundPositionX: "-=" + SECTION
             }); // 반복되는 구간 만큼 백그라운드 이동
             if (bpx <= -(WIDTH-SECTION*2)) {
                 clearInterval(repeat);
             } // 종료시점 설정
         }, TIME);
     };
    
     // EX
     $(".blossom2").aniJin(5508800200);
     $(".blossom3").aniJin(63013860180);
     $(".blossom4").aniJin(4808640200);
});
cs




'Front > JavaScript' 카테고리의 다른 글

스크롤 이동  (0) 2016.10.11
테이블 서머리, 캡션 삽입 스크립트  (0) 2016.09.22
메뉴 고정  (0) 2016.08.04
일정한 개수로 그룹화(묶기)  (0) 2016.08.02
테이블 헤드 고정  (0) 2016.07.28
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 일정한 개수로 그룹화
// numSlice = 한그룹의 자식 개수
function portList(numSlice){ 
  var $target = $("aaa"); // 묶을 대상
  var wrapType = "<div class=\"aaa_wrap\"></div>"// 감싸을 태그
  var numList = $target.length// 묶을 대상의 총 개수
  var end = Math.ceil(numList / numSlice); // 루프 종료 시점
 
  for (num = 0; num <= end; num++) {
    var maxNum = (num + 1* numSlice; // 구간 끝
    var minNum = maxNum - numSlice; // 구간 시작
 
    $target.slice(minNum, maxNum).wrapAll(wrapType);
  }
}
// 그룹화 초기화
function portListReset(){
  var $target = $(".aaa"); // 나눌 대상
  $target.unwrap();
}
// n개로 재그룹화
function portReload(n){
  portListReset();
  portList(n);
}
cs


'Front > JavaScript' 카테고리의 다른 글

백그라운드이미지 애니메이션  (0) 2016.09.22
메뉴 고정  (0) 2016.08.04
테이블 헤드 고정  (0) 2016.07.28
중복값 체크하기  (1) 2016.05.17
[jQuery] Selector 정리 - Attribute 속성 선택자  (0) 2016.05.04
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var arr = $('table').find('tr');
for (var i = 1; i < arr.length; i++){
    /*
        i = 1 부터 시작하는 이유
        아래의 for문 종료 시점이 j < i 이기 때문에 0 미만은 없으니까!!
    */
    for (var j = 0; j < i; j++) {
        /*
            종료시점이 j < i 인 이유
            비교값에 자신과 같은 요소를 비교하면 모든값이 중복이 되어버리기 때문에
            자신의 값 전까지만 비교하도록 조건을 설정했다!!
        */
        var arrI = $(arr[i]).find(".port"); //비교하고 싶은 항목이 있는곳 찾아가기
        var arrJ = $(arr[j]).find(".port"); //비교하고 싶은 항목이 있는곳 찾아가기
        var arrItxt = arrI.text(); //비교항목 텍스트 추출하기
        var arrJtxt = arrJ.text(); //비교항목 텍스트 추출하기
 
        console.log(arrItxt,arrJtxt);
        if(arrItxt == arrJtxt) { //비교항목 텍스트 비교
            console.log("중복!!!!"); 
        } else {
            console.log("중복값이 없습니다.");
        }
    }
}
cs


'Front > JavaScript' 카테고리의 다른 글

백그라운드이미지 애니메이션  (0) 2016.09.22
메뉴 고정  (0) 2016.08.04
일정한 개수로 그룹화(묶기)  (0) 2016.08.02
테이블 헤드 고정  (0) 2016.07.28
[jQuery] Selector 정리 - Attribute 속성 선택자  (0) 2016.05.04
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다

[jQuery] Selector 정리 - Attribute 속성 선택자

[출처] [jQuery] Selector 정리 - Attribute 속성 선택자|작성자 코딩하는CEO


 

출처 : http://b_feather.blog.me/50148872245

 

HTML 태그는 type, id, name과 같은 속성을 지니며, html5 부터는 data- 으로 시작되는 커스텀 속성도 표준의 일환으로 지원을 합니다.


CSS를 이용하여 스타일과 마크업을 분리한다는 개념이 모호했던 시기에는 width이나 height과 같은 속성을 이용하여 태그가 나타내는 요소(Element)의 모양새를 설정하기도 했지만, 지금은 레퍼런스를 찾아보면 이러한 속성들이 마크업 표준으로써 지원되지 않거나 이들을 사용하지 않는 것을 권장한다는 점을 알 수 있습니다.


다음 예시에 나타나 있듯이 html 태그의 속성은 attribute="value"의 형태로 표현되며, xhtml 표준이라 그런지 모르겠지만, 보통 속성의 이름은 모두 소문자로 구성됩니다.


<input type="text" id="txtField" name="txtField" data-user="me">

CSS와 마찬가지로 jquery 또한 이러한 속성값을 기준으로 요소들을 선택할 수 있습니다. 이러한 속성 선택자는 <input> 요소들 중 type이 "text"인 요소들만 선택한다거나, 라디오버튼들 중 같은 name 속성값을 가진 요소들만 선택을 한다는 식으로 활용할 수 있습니다.



//html

<form id="example" name="example">

<input type="text" id="userName" name="userName">

<input type="radio" id="radio1" name="chooseOne" value="dog">

<input type="radio" id="radio2" name="chooseOne" value="cat">

</form>


//jquery 예제

$('input[type="text"]'); //type 속성이 "text"인 input 엘리먼트 선택

$('input[name="chooseOne"]'); //name 속성이 "chooseOne"인 input 엘리먼트 선택

위 예제를 보면 알 수 있듯이 jquery 속성 선택자는 []안에 속성 이름과 값을 넣는 형식으로 구성됩니다. 아래에 속성 선택자 사용예를 정리해놨으니 참고하시기 바랍니다.


속성값이 선택자값과 일치 [name="value"]

$('span[data-type="title"]');

//data-type 속성을 지니며 그 값이 "title"인 모든 span 엘리먼트 선택


속성값이 선택자값과 불일치 [name!="value"]

$('input[checked!="checked"]');

//checked 속성의 값이 "checked"가 아닌 모든 input 엘리먼트 선택


속성값이 선택자값으로 시작됨 [name^="value"]

$('p[id^="body"]');

//id 속성값이 "body"로 시작되는 모든 p 엘리먼트 선택

//예: id="bodyParagraph", id="bodySection"


속성값이 선택자값으로 끝남 [name$="value"]

$('div[id$="Section"]');

//id 속성값이 "Section"으로 끝나는 모든 div 엘리먼트 선택

//예: id="headerSection", id="bannerSection"


속성값이 선택자값으로 시작되며

뒤에 "-"으로 연결된 값이 따름 [name|="value"]

$('span[name|="tag"]');

//name 속성값이 "tag"와 일치하거나 "tag-"으로 시작되는 모든 span 엘리먼트 선택

//예: name="tag", name="tag-pets", name="tag-fashion"


속성값이 선택자값을 포함하고 있음 [name*="value"]

$('a[href*="article"]');

//href 속성값에 "article"이 포함된 모든 a 엘리먼트 선택

//예: href="/articles/september", href="/entries/article"


속성값 중에 선택자값과 일치하는 단어가 있음 [name~="value"]

$('div[class~="buttonStyle"]');

//class 속성값에 "buttonStyle"이 단어로 들어간 모든 div 엘리먼트 선택

//예: class="skinColor buttonStyle topDiv"


속성중에 선택자와 이름이 같은 것이 있음 [name]

$('div[data-pane]');

//data-pane이라는 속성을 지닌 모든 div 엘리먼트 선택


복수의 속성으로 선택 [name1="value"][name2="value"]

$('input[type="hidden"][data-value="userValue"]');

//type 속성값이 "hidden"이고,

//data-value 속성값이 "userValue"인 모든 input 엘리먼트 선택

[출처] [jQuery] Selector 정리 - Attribute 속성 선택자|작성자 코딩하는CEO


예제 : )

$('#reward_bt[p]').live('click',function(){

   //서버 선택 value 체크

   no =$(this).attr("p");  }

 <img src="/img/news/&lt;?php echo $btImg?&gt;" width="107" height="56" alt="보상받기" id="reward_bt" style="cursor:hand;cursor:pointer;" p="<?php echo $level[$i]?>">

이런식으로 배열돌려서 처리하는 방법으로 응용할 수 있다

'Front > JavaScript' 카테고리의 다른 글

백그라운드이미지 애니메이션  (0) 2016.09.22
메뉴 고정  (0) 2016.08.04
일정한 개수로 그룹화(묶기)  (0) 2016.08.02
테이블 헤드 고정  (0) 2016.07.28
중복값 체크하기  (1) 2016.05.17
댓글 로드 중…

트랙백을 확인할 수 있습니다

URL을 배껴둬서 트랙백을 보낼 수 있습니다