우클릭시 text 복사

우클릭시 '복사' DIV 나타나서 클릭시 우클릭 위의 TEXT를 복사하는 스크립트이다.

원했던 건 우클릭하면 바로 복사 하려고 하였으나,
왜 그런지 document.execCommand("copy"); 가 동작하지 않는다.
그래서 click 이벤트로 발생하기 위해 '복사'div 를 생성하였다.

	function copyToClipboard(value, showNotification, notificationText) {
	    var $temp = $("<input>");
	    $("body").append($temp);
	    $temp.val(value).select();
	    document.execCommand("copy");
	    $temp.remove();

	    if (typeof showNotification === 'undefined') {
	        showNotification = true;
	    }
	    if (typeof notificationText === 'undefined') {
	        notificationText = "Copied to clipboard";
	    }

	    var notificationTag = $("div.copy-notification");
	    if (showNotification && notificationTag.length == 0) {
	        notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
	        $("body").append(notificationTag);

	        notificationTag.fadeIn("slow", function () {
	            setTimeout(function () {
	                notificationTag.fadeOut("slow", function () {
	                    notificationTag.remove();
	                });
	            }, 10);
	        });
	    }
	}

	var copyData = "";
	//$(".context-menu-one").on("contextmenu", function(event) {
	$("table").on("contextmenu", function(event) {
		event.preventDefault();
		$("div.custom-menu").remove();
		copyData = $.trim(event.target.textContent);
	    
	    $("<div class='custom-menu'>복사</div>")
	        .appendTo("body")
	        .css({top: event.pageY + "px", left: event.pageX + "px"})
	        .on("click", function(event) {
		    event.preventDefault();
		    copyToClipboard(copyData);
		    copyData = "";
		    $("div.custom-menu").remove();
			});

		$("body").click(function (){
			 $("div.custom-menu").remove();
		});
	});
	

 

/* 우측 클릭 '복사' */
.custom-menu {
    z-index:1000;
    position: absolute;
    background-color:#C0C0C0;
    border: 1px solid black;
    padding: 2px;
    border-radius: 5px; 
}

.copy-notification {  
    color: #ffffff;  
    background-color: rgba(0,0,0,0.8);
    padding: 20px;  
    border-radius: 30px;  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    width: 150px;  
    margin-top: -30px;  
    margin-left: -85px;  
    display: none;  
    text-align:center;  
}

참조

datepicker 버튼 추가(당일, 1주일, 1개월, 3개월)

 

 

 

 

 

 

 

 

 

from 절과 to절이 있는 부분을 datepicker로는 만들수가 없다.

datepicker 달력 하단에 당일, 1주일, 1개월, 3개월 버튼을 넣어서

from절과 to절에 넣도록 했다.

 

function fnDatepickerFromToDateRangeSet(startId, endId, searchFnName){

	$("#"+startId).datepicker( "option", "beforeShow",
			function (input) {
				fnDatepickerRangeSet(input,startId,endId,1,searchFnName);
			}
	);
	
	$("#"+endId).datepicker( "option", "beforeShow", 
			function (input) {
	    		fnDatepickerRangeSet(input,startId,endId,2,searchFnName);
			}
	);
	//버튼 위치 input 안으로 넣도록 함.
	$(".ui-datepicker-trigger").css({"vertical-align": "middle", "cursor": "pointer", "padding-left": "2px"}).addClass("box_date_btn");
	 
}


//하단 당월,1주일,1개월,3개월 버튼 추가 - 함수.
//이 함수 자체는 달력이 보여질때 실행되고 하단 버튼 클릭시는  'click: function' 부분에서 실행됨을 주의!
function fnDatepickerRangeSet(input, startId, endId, startEndChk, searchFnName) {
	setTimeout(function () {
		
		var dateText =  ["당일", "1주일", "1개월", "3개월"];
		var dateRange = ["0d",   "-7d",   "-1m",  "-3m"];
		var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");

		for(i=0;dateText.length > i; i++ ){
			$("<button>", { text: dateText[i], value:dateRange[i], executeFn:searchFnName,
				//하단 버튼을 클릭시에는 여기 'click: function'이 실행된다.
				click: function (eventData) {
					$("#"+startId).datepicker('setDate', eventData.currentTarget.value);
					$("#"+endId).datepicker('setDate', '0d');
					jQuery(input).datepicker('hide');
					var execFn = eventData.currentTarget.getAttribute('executeFn');
					if(execFn){
						 eval(execFn);
					}
					
				}
			}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
		}
		
		//오늘 버튼 숨김
		$(input).datepicker("widget").find(".ui-datepicker-current").hide();

		

	}, 1)
 }

 

jqgrid onCellSelect 대체.

jqgrid 사용시 컬럼(셀) 선택 정보를 가져오고 싶어서 검색해 보니

onCellSelect 가 있음.

근데 왜인지 안됨.

onClick 으로 대체 사용.

jquery 하단 고정. stickyFooter

function stickyFooter(){
        jQuery("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px",left:0px;});
    }
 
jQuery(function(){
    stickyFooter(); 
 
    jQuery(window)
        .scroll(stickyFooter)
        .resize(stickyFooter);
});

전부 되는 지는 테스트 못해봄.

onmouseover 삭제

 

onmouseover 기능을 해제하려고 unbind,bind,off 기능을 무쟈게 해메이다 알게 됬다.

................

한편, <td onclick=”"> 와 같이 정적으로 onclick이 설정 된것은 unbind()로 해제할수 없는데

이 경우에는 $(‘.td’).removeAttr(“onclick”); 을 사용해서 해제 해야한다.

 

제길~!!!  내 1시간.....

 

출처

jquery sortable 사용법

<script type="text/javascript">
$(document).ready(function() {
    $("#table_sortable tbody.content").sortable({
      update: function() {
    $('input[name="members[]"]').each( function(index,elem) { //인덱스
       $('#table_sortable tbody.content tr:eq('+ index  +') td input:eq(3)').val(index); //타겟
        });

   }
  });

});
</script>

테이블단위의 sortable은 위와 같이 tbody를 사용한다.

update: 는 이동 완료했을 시 시작.

위의 코드는 테이블을 이동했을 시, members[] 를 읽어들어가며 타겟의 값을 index 값으로 순서대로 변경 해주는 코드

순서를 옮기면 타겟값에 무조건 위에서 부터 0,1,2,3,4,5 이렇게 들어감.

최신 버젼에서는 안됨.




속성 셀렉터 표현

jquery 의 속성 셀렉터 사용시

$('a[ref=nofollow self]') 의 책에서 표현식이 사용가능 하다고 나와 있는 데, 최신 버젼이라서 그런지 안됨.

$('a[ref="nofollow self"]') 이런식으로 큰 따옴표와 작은 따옴표를 섞어 쓰던지

$('a[ref=\'nofollow self\']') 역슬래시로 처리 해줘야 됨.