JQuery Load 유무 체크하기

Open API/Jquery|2016. 11. 16. 09:41
반응형



페이지 내에 Jquery 가 정상적으로 load 되었는지 체크 하는 방법입니다.


종종 해외 특정 국가의 경우 


jQuery 사이트의 jquery.js 파일 include 시에 정상적으로


읽어오지 못하는 경우가 발생합니다.


혹은 인터넷 속도 문제로 타 도메인의 jquery.js 사용할 경우에도 발생합니다.


가급적 동일 호스팅에 있는 파일을 이용하시길 권장합니다.



// 1.
if (window.jQuery) {  
    // jQuery is loaded  
} else {
    // jQuery is not loaded
}
 
// 2.
if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded
} else {
    // jQuery is loaded
}
 
// .. 만약 Load 되어있지 않다면.. 추가하기
if (!window.jQuery) {
  var jq = document.createElement('script'); jq.type = 'text/javascript';
  jq.src = 'http://code.jquery.com/jquery-latest.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}

댓글()

jQuery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 )

Open API/Jquery|2016. 11. 15. 17:28
반응형



그간 많은 롤링플러그인을 사용해왔으나 이해하기도 쉽고 적용하기도 쉽고 응용하기도 쉽고 TOP 입니다!!

최석균님(제작자)께 감사드립니다. 


Test Url : http://www.uhoon.co.kr/test/2544.html



플러그인 및 샘플 다운로드 ( jquery-syaku.rolling.v1.2.0.zip )


* 제작자님 샘플에는 Javascript 배열에 객체를 직접 담아하도록 되어있으나 

현업에서 편의상 html 태그를 Js에 넣어서 사용하기 힘든바 html 소스에서 읽어와서 

롤링되도록 샘플소스에 적용하였으니 참고해주세요 .


첨부된 샘플 소스는 제작자님께서 제공하시는 그대로입니다.

하여 쬐끔 수정한 샘플 소스자체를 아래 작성합니다.


<!DOCTYPE html>
<html>
<head>
    <title>상하좌우 롤링 ( 버튼 , 자동 )</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="./2544/jquery-syaku.rolling.js"></script>
    <script type="text/javascript">
        jQuery(function() {
 
            jQuery("#srolling").srolling({
                data : $("#aaa > div"),  // 노출될 아이템
                auto : true,                    //자동 롤링 true , false
                width : 20,                 // 노출될 아이템 크기
                height : 30,                    // 노출될 아이템 크기
                item_count : 1,         // 이동 될 아이템 수
                cache_count : 1,            // 임시로 불러올 아이템 수
                delay : 1000,               // 이동 아이템 딜레이
                delay_frame : 500,      // 아이템 흐르는 속도
                move : 'top',               // 이동 방향 left , right , top , down
                prev : '#p_click',          // < 이동 버튼
                next : '#n_click'           // > 이동 버튼
            });
        });
    </script>
</head>
 
<body >
<div id="srolling" style="position: relative;overflow:hidden;width:100px;height:30px;border:#e0e2ef 1px solid;"></div>
<div id="aaa" style="display:none;">
    <div>11111</div>
    <div>22222</div>
    <div>33333</div>
    <div>44444</div>
    <div>55555</div>
    <div>66666</div>
</div>
<span id="p_click">이전</span>
<span id="n_click">다음</span>
</body>
</html>


댓글()

jQuery Table에 동적 Tr 추가/삭제 하기

Open API/Jquery|2016. 11. 15. 17:23
반응형


관리자 페이지등에서 잊을만 하면 사용하는 기능인데..


그간 샘플링이 안되어서 매번 그때 그때 커스터마이징해서 썻던것인데 정리해보았습니다.


Test Url : http://www.uhoon.co.kr/test/2541.html 



<!DOCTYPE html>
<html>
<head>
    <title>테이블에 동적으로 TR 추가 /삭제 하기</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btnAddRow").on("click",function() {
                // clone
                $.trClone = $("#memberTable tr:last").clone().html();
                $.newTr = $("<tr>"+$.trClone+"</tr>");
 
                // append
                $("#memberTable").append($.newTr);
 
                // delete Button 추가
                $.btnDelete = $(document.createElement("input"));
                $.btnDelete.attr({
                    name : "btnRemove",
                    type : "button" ,
                    value : "삭제"
                });
                $("#memberTable tr:last td:last").html("");
                $("#memberTable tr:last td:last").append($.btnDelete);
 
                // 버튼에 클릭 이벤트 추가
                $("#memberTable tr>td:last>input[type='button']").on('click', function(){
                    $(this).parent().parent().remove();
                });
            });
 
            // 초기화
            $("#tableReset").on("click",function(){ 
                $("#frmTest").each(function(){ this.reset(); });
 
                $("input[name='btnRemove']").each(function () {
                    $(this).trigger('click');
                });
            });
        });
    </script>
</head>
 
<body >
<div style="width:500px;text-align:right;">
    <input type="button" value="행추가"  id="btnAddRow" />
    <input type="button" value="reset" id="tableReset"/>
</div>
 
 
<form method="post" id="frmTest">
<table id="memberTable" border="1" style="width:500px;">
    <tr>
        <td><input type="text" id="fullName" /></td>
        <td><input type="text" id="age"  /></td>
        <td><input type="text" id="addr" /></td>
        <td style="width:50px;"></td>
    </tr>
</table>
</form>
</body>
</html>


댓글()