2017년 1월 29일 일요일

Jquery 이미지 드래그 설정 ( Web, Mobile )

Written by   on   in   with 댓글 없음
1.  스크립트 파일을 추가한다. 웹 2개 모바일 2개
모바일은 jquery.ui.touch-punch.min.js 파일을 다운받아 하나더 추가한다.
주소 : https://github.com/furf/jquery-ui-touch-punch


//웹용 스크립트 파일
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//모바일용 스크립트 파일 
<script src="http://code.jquery.com/jquery.min.js"></script>
사용시 예제 소스 


$(".img_icons").draggable({
 start : function(event) {
  img_choice = $(this).attr("src");
  img_choice_id = $(this).attr("id");
 },
 stop : function() {
  
 },
 revert : true
});

$(".drop_box").droppable({
 drop : function(event, ui) {
  if (img_choice_id) {    
   if ($(this).attr("id") == "drop_box") {
    if (img_choice == "이미지 주소") {   

    }
   }else {
    alert("error");
   }
  }
  
 }
});              


<!-- 이미지 넣을 투명 공간 -->
<div class="drop_box" id="drop_box">
     <img src=" id="icon_none" />
</div>
<!-- 이미지 넣을 투명 공간 -->

<!-- 옮길 이미지  -->
<div class="img_icons" id="over_1">
 <img alt="" class="img_icon" src="" id="img_icon_1" />            
</div>
<div class="img_icons" id="over_2">
 <img alt="" class="img_icon" src="" id="img_icon_2" />            
</div>
<!-- 옮길 이미지  -->
Share:

sublime Text SFTP 기본 설정

Written by   on   in   with 댓글 없음
{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help
   
    // sftp, ftp or ftps
    "type": "ftp",

    "save_before_upload": true, //저장하기 전에 업로드할지 여부를 체크한다.
    "upload_on_save": true, // 업로드 하면서 저장할지 여부를 체크한다
    "sync_down_on_open": false, // 다운로드 및 오픈하면서 동기화할지 여부를 체크한다
    "sync_skip_deletes": false, //삭제한 파일은 동기화에 제외시킬지 여부를 체크한다
    "sync_same_age": true,    // 수정시간이 같은 파일 동기화 여부
    "confirm_downloads": false, //다운로드 확인 여부를 체크한다.
    "confirm_sync": true,  // 동기화 시 확인 여부
    "confirm_overwrite_newer": false, //확인된 파일의 덮어쓰기 여부를 체크하여 새로 만들지 여                                                                      부를 체크한다.

   
    "host": "주소",
    "user": "아이디",
    "password": "비밀번호",
    "port": "21",
   
    "remote_path": "폴더위치",
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn/", "\\.hg/", "\\.git/",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini"
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",
   
    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ftp_obey_passive_host": false,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],
   
    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
    //"allow_config_upload": false,
}

Share:

2017년 1월 26일 목요일

2017년 1월 18일 수요일

iframe 에서 부모창 접근하기

Written by   on   in   with 댓글 없음
부모창 소스

<html>
<body>
<iframe id="test1" frameborder="0" src="test.jsp"></ifame>
<body>
<html>

이라고 가정한다면
test.jsp 소스에서
parent.document.getElementById(부모창에 있는 iframe아이디) 
를 통해 iframe 속성에 접근한다.

 test.jsp 안에서 부모에 있는 iframe 창의 높이를 수정해서 보여줄려고 한다면
onload 나 document.ready 를 활용해서 
parent.document.getElementById("test1").height = document.body.offsetHeight;
을 통해 조절 가능하다.

 * 참고

 - XHTML 표준이 없다 

 가로길이
document.body.offsetWidth 
document.body.scrollWidth // (문서 전체의 크기)
document.body.clientWidth // (창의 크기)

 세로길이
document.body.offsetHeight
document.body.scrollHeight //(문서 전체의 크기)
document.body.clientHeight // (창의 크기)

 - HTML5 표준이 정해져 있다. 

 가로 길이
window.innerWidth // 브라우저 윈도우 두께를 제외한 실질적 가로 길이
window.outerWidth // 브라우저 윈도우 두께를 포함한 브라우저 전체 가로 길이

 세로길이
window.innerHeight // 브라우저 윈도우 두께를 제외한 실질적 세로 길이

 window.outerHeight // 브라우저 윈도우 두께를 포함한 브라우저 전체 세로 길이
Share:

2017년 1월 14일 토요일