'예제' 태그의 글 목록

예제

[Javascript]Swiper JS 테스트 2020.06.25
[JavaScript]Fullcalendar Sample 예제 2019.08.08
[JavaScript]postMessage 예제 2019.07.24

[Javascript]Swiper JS 테스트

2020. 6. 25. 15:09

테스트 목록

1. 가로 슬라이드

2. 세로 슬라이드

3. 가로 슬라이드에 세로 슬라이드 추가

4. 세로 슬라이드에 가로 슬라이드 추가

<div style="margin-bottom:50px"><strong>1. 배경 + 세로 슬라이드</strong></div>

            <!-- greeting_w -->
            <div class="greeting_w part2" style="background-image:none;background:#000">
                <div class="fix_inner" style="height: 290px;">
                    <!-- 테스트 -->
                    <div class="swiper-container" id="swiper-container-inbox">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Slide 1</div>
                            <div class="swiper-slide">Slide 2</div>
                            <div class="swiper-slide">Slide 3</div>
                            <div class="swiper-slide">Slide 4</div>
                            <div class="swiper-slide">Slide 5</div>
                            <div class="swiper-slide">Slide 6</div>
                            <div class="swiper-slide">Slide 7</div>
                            <div class="swiper-slide">Slide 8</div>
                            <div class="swiper-slide">Slide 9</div>
                            <div class="swiper-slide">Slide 10</div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
            <!-- //greeting_w -->

            <div style="margin-bottom:50px"><strong>2. 세로 슬라이드</strong></div>

            <!-- greeting_w -->
            <div class="greeting_w part2" style="height: 290px;background-image:none;background:#000">
                <div class="swiper-container" id="swiper-container-fullbox">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-color:red">Slide 1</div>
                        <div class="swiper-slide" style="background-color:indianred">Slide 2</div>
                        <div class="swiper-slide" style="background-color:blue">Slide 3</div>
                        <div class="swiper-slide" style="background-color:lightcoral">Slide 4</div>
                        <div class="swiper-slide" style="background-color:greenyellow">Slide 5</div>
                        <div class="swiper-slide" style="background-color:yellow">Slide 6</div>
                        <div class="swiper-slide" style="background-color:lightpink">Slide 7</div>
                        <div class="swiper-slide" style="background-color:lavenderblush">Slide 8</div>
                        <div class="swiper-slide" style="background-color:powderblue">Slide 9</div>
                        <div class="swiper-slide" style="background-color:orange">Slide 10</div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>



 <!--3. 가로 , 세로 슬라이드 -->
            <div style="margin-bottom:50px"><strong>3. 가로 , 세로 슬라이드 </strong></div>

            <div class="greeting_w part2" style="background-image:none;background:#000">
                <div class="fix_inner" style="height: 290px;">
                    <div class="swiper-container swiper-container-h" id="swiper-container-horizontal">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">horizontal Slide 1</div>

                            <div class="swiper-slide">
                                <div class="swiper-container swiper-container-v" id="swiper-container-vertical">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">Vertical Slide 1</div>
                                        <div class="swiper-slide">Vertical Slide 2</div>
                                        <div class="swiper-slide">Vertical Slide 3</div>
                                        <div class="swiper-slide">Vertical Slide 4</div>
                                        <div class="swiper-slide">Vertical Slide 5</div>
                                    </div>
                                    <div class="swiper-pagination swiper-pagination-v"></div>
                                </div>
                            </div>

                            <div class="swiper-slide">horizontal Slide 3</div>
                            <div class="swiper-slide">horizontal Slide 4</div>
                            <div class="swiper-slide">horizontal Slide 5</div>
                            <div class="swiper-slide">horizontal Slide 6</div>
                            <div class="swiper-slide">horizontal Slide 7</div>
                            <div class="swiper-slide">horizontal Slide 8</div>
                            <div class="swiper-slide">horizontal Slide 9</div>
                            <div class="swiper-slide">horizontal Slide 10</div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-h"></div>
                    </div>
                </div>
            </div>



<!--4. 세로 , 가로 슬라이드 -->
            <div style="margin-bottom:50px"><strong>4. 세로 , 가로 슬라이드 </strong></div>

            <div class="greeting_w part2" style="background-image:none;background:#000">
                <div class="fix_inner" style="height: 290px;">
                    <div class="swiper-container swiper-container-v" id="swiper-container-vertical2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Vertical Slide 1</div>

                            <div class="swiper-slide">
                                <div class="swiper-container swiper-container-h" id="swiper-container-horizontal21">
                                    <div class="swiper-wrapper"><!--4. 세로 , 가로 슬라이드 -->
            <div style="margin-bottom:50px"><strong>4. 세로 , 가로 슬라이드 </strong></div>

            <div class="greeting_w part2" style="background-image:none;background:#000">
                <div class="fix_inner" style="height: 290px;">
                    <div class="swiper-container swiper-container-v" id="swiper-container-vertical2">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">Vertical Slide 1</div>

                            <div class="swiper-slide">
                                <div class="swiper-container swiper-container-h" id="swiper-container-horizontal21">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" style="">horizontal Slide 1</div>
                                        <div class="swiper-slide" style="">horizontal Slide 2</div>
                                        <div class="swiper-slide" style="">horizontal Slide 3</div>
                                        <div class="swiper-slide" style="">horizontal Slide 4</div>
                                        <div class="swiper-slide" style="">horizontal Slide 5</div>
                                    </div>
                                    <div class="swiper-pagination swiper-pagination-h"></div>
                                </div>
                            </div>

                            <div class="swiper-slide">Vertical Slide 3</div>
                            <div class="swiper-slide">Vertical Slide 4</div>
                            <div class="swiper-slide">Vertical Slide 5</div>
                            <div class="swiper-slide">Vertical Slide 6</div>
                            <div class="swiper-slide">Vertical Slide 7</div>
                            <div class="swiper-slide">Vertical Slide 8</div>


                            <div class="swiper-slide">
                                <div class="swiper-container swiper-container-h" id="swiper-container-horizontal22">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">horizontal Slide 1</div>
                                        <div class="swiper-slide">horizontal Slide 2</div>
                                        <div class="swiper-slide">horizontal Slide 3</div>
                                        <div class="swiper-slide">horizontal Slide 4</div>
                                        <div class="swiper-slide">horizontal Slide 5</div>
                                    </div>
                                    <div class="swiper-button-prev"></div><!-- 이전 버튼 -->
                                    <div class="swiper-button-next"></div><!-- 다음 버튼 (오른쪽에 있는 버튼) -->

                                    <div class="swiper-pagination swiper-pagination-h"></div>
                                </div>
                            </div>

                            <div class="swiper-slide">Vertical Slide 10</div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination swiper-pagination-v"></div>
                    </div>
                </div>
            </div>

            <button id="swipe_prev_test">왼쪽</button>
            <button id="swipe_next_test">오른쪽</button>
            
        </div>
<script src="~/Scripts/API/swiper.min .js"></script>

Script

/* 1. 배경 + 세로 슬라이드 */
var swiper_inbox = new Swiper('#swiper-container-inbox', {
	direction: 'vertical',
	slidesPerView: 1,
	spaceBetween: 30,
	mousewheel: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});

/* 2. 세로 슬라이드 */
var swiper_fullbox = new Swiper('#swiper-container-fullbox', {
	direction: 'vertical',
	slidesPerView: 1,
	spaceBetween: 30,
	mousewheel: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});

/* 3. 가로 , 세로 슬라이드 */
var swiper_horizontal = new Swiper('#swiper-container-horizontal', {
	direction: 'horizontal',                
	slidesPerView: 1,
	spaceBetween: 30,
	//mousewheel: true,
	pagination: {
		el: '.swiper-pagination-h',
		clickable: true,
	},
});

var swiper_vertical = new Swiper('#swiper-container-vertical', {
	direction: 'vertical',                
	slidesPerView: 1,
	spaceBetween: 30,
	mousewheel: true,
	pagination: {
		el: '.swiper-pagination-v',
		clickable: true,
	},
});

/* 4. 세로 , 가로 슬라이드 */
var swiper_vertical2 = new Swiper('#swiper-container-vertical2', {
	direction: 'vertical',                
	slidesPerView: 1,
	spaceBetween: 30,
	mousewheel: true,
	pagination: {
		el: '.swiper-pagination-v',
		clickable: true,
	},
});

var swiper_horizontal21 = new Swiper('#swiper-container-horizontal21', {
	direction: 'horizontal',                
	slidesPerView: 1,
	spaceBetween: 30,
	//mousewheel: true,
	pagination: {
		el: '.swiper-pagination-h',
		clickable: true,
	},
});

var swiper_horizontal22 = new Swiper('#swiper-container-horizontal22', {
	direction: 'horizontal',                
	slidesPerView: 1,
	spaceBetween: 30,
	loop : true ,
	//mousewheel: true,
	pagination: {
		el: '.swiper-pagination-h',
		clickable: true,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
});

/* 왼쪽 버튼 테스트 */
$(document).on("click", "#swipe_prev_test", function () {
	$(".swiper-button-prev").click();
});

/* 오른쪽 버튼 테스트 */
$(document).on("click", "#swipe_next_test", function () {
	$(".swiper-button-next").click();
});

'IT > JS + Jquery' 카테고리의 다른 글

[Javascript]현재 날짜 구하기 (YYYYMMDD,YYYY-MM-DD,YYYY.MM.DD) (0)	2020.09.10
[Javascript]C3 Cannot read property 'category10' of undefined (0)	2020.06.25
[Javascript]ie에서 wheel로 수직(vertical) Swiper (0)	2020.06.23
[Javascript]카카오 맵 소스 데이터 가져오기 (0)	2020.06.17
[JavaScript]현재 기준 당일 , 1주전, 2주전 , 3주전 날짜 만들기 (0)	2020.03.20

[JavaScript]Fullcalendar Sample 예제

2019. 8. 8. 20:48

[2021.05.07]
※2019년에 FullCalendar를 커스터마이징을 하였고 버전은 'v3' 버전을 이용하였습니다.
현재 v5버전까지 나온것으로 확인되며, v3 버전은 아래 도메인에서 받을 수 있습니다.

github.com/fullcalendar/fullcalendar/releases/tag/v3.10.2

  $('#calendar').fullCalendar({
        header: {            
            //center: 'prev,title,next', 여기에 select 값을 보내서 달력 이동 할 수 있게.
            right : null
        },
        defaultDate: yyyymmdd, //yyyymmdd 날짜를 입력 하여야 합니다.
        editable: true,
        eventLimit: true,
        monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        monthNamesShort: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        dayNames: ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"],
        dayNamesShort: ["일", "월", "화", "수", "목", "금", "토"],
        buttonText: {
            today: "오늘",
            month: "월별",
            week: "주별",
            day: "일별"
        },
        events:
        [
                {
                    id: "A",
                    title: 'My Event',
                    start: '2016-05-29',
                    description: 'This is a cool event'
                }
        ],
        eventRender: function (event, element) {
            if (event.A) {
                alert("A입니다.");
            } else if (event.B) {
                alert("B입니다.");
            }
        }
  });

'IT > JS + Jquery' 카테고리의 다른 글

[JavaScript]input에 자동완성 기능 (autocomplete) (0)	2019.08.22
[C#]Create Randam key (랜덤키) (0)	2019.08.14
[JavaScript]Fullcalendar 원하는 년 , 월로 달력 이동 시키기 (0)	2019.08.08
[JavaScript]날짜 형식 변경 함수 (yyyy-mm-dd) (0)	2019.08.08
[JavaScript]Ajax return 값 받지 못할 때. (0)	2019.07.29

[JavaScript]postMessage 예제

2019. 7. 24. 06:42

부모 쪽

$(window).load(function() {
       sendMsg();
    });

    function sendMsg() {
        vSendData = vEmail + "^" + vComCode + "^" + vDomain + "^" + vPwd;  //보내는 데이터
        document.getElementById('sof').contentWindow.postMessage(vSendData, 'url');
    }

자식 쪽

//Get Data
        bind(window, 'message', function (e) {

            //Get data
            var get = new Object();

            //vEmail=Email^vEmail=CompanyCode          
            //alert(e.data);

            try {
                //데이터 유무 확인
                if (e.data != null || e.data != "") {

                    var vResult = e.data;

                    var ret = vResult.substr(0).split("^");

                    for (var i = 0; i < ret.length; i++) {
                        var r = ret[i].split("=");
                        get[r[0]] = r[1];
                    }

                    //변수 확인
                    if (get["vEmail"] == null || get["vEmail"] == "") {
                        throw "[Error]E-Mail : (" + get["vEmail"] + ")";
                    }
                    else if (get["vComCode"] == null || get["vComCode"] == "") {
                        throw "[Error]Company Code : (" + get["vComCode"] + ")";
                    }
                    else if (get["vDomain"] == null || get["vDomain"] == "") {
                        throw "[Error]Domain Info  : (" + get["vDomain"] + ")";
                    }
                    else if (get["vPwd"] == null || get["vPwd"] == "") {
                        throw "[Error]Password Info  : (" + get["vPwd"] + ")";

                    }
                    else {
                        fnAutoSearchData(get);

                        //Check Success 
                        
                        //test Data
                        //$('#email').val() = get["vEmail"] + "/" + get["vComCode"];
                        //document.getElementById("email").value = get["vEmail"] + "/" + get["vComCode"];
                    }
                }
            } catch (e) {
                alert(e);
                console.log(e);
            }
        });

        function bind(elem, type, handler, capture) {
            type = typeof type === 'string' && type || '';
            handler = handler || function () { ; };

            if (elem.addEventListener) {
                elem.addEventListener(type, handler, capture);
            }
            else if (elem.attachEvent) {
                elem.attachEvent('on' + type, handler);
            }

            return elem;
        };

간략 요약

부모 창의 데이터를 자식 창의 데이터로 옮기는 작업

하지만 크로스 도메인의 이슈 때문에 지금은 사용 못하는 것으로 확인 됩니다.

'IT > JS + Jquery' 카테고리의 다른 글

[JavaScript]input 버튼 활성화 비활성화 (0)	2019.07.24
[JavaScript]'.' , '@' 제외한 특수문자 제거 (0)	2019.07.24
[JavaScript]아스키코드 특수문자 함수 (0)	2019.07.24
[JavaScript]js 이메일 @ 체크 (0)	2019.07.24
[JavaScript]Input 숫자만 입력 (0)	2019.07.23

PREV 1 NEXT

개발자.. 너란놈..

예제

[Javascript]Swiper JS 테스트

'IT > JS + Jquery' 카테고리의 다른 글

[JavaScript]Fullcalendar Sample 예제

'IT > JS + Jquery' 카테고리의 다른 글

[JavaScript]postMessage 예제

'IT > JS + Jquery' 카테고리의 다른 글

+ Recent posts

티스토리툴바