(13) 주요 스크립트 및 jquery 플러그인 기본 틀

2019. 8. 22. 17:25

/*----------------------------------------------------
// Global
----------------------------------------------------*/
var console = window.console || {log:function(){}};
var	d = $(document);
var loadingBar = true;	//로딩바 제어

/*----------------------------------------------------
// ajax
----------------------------------------------------*/

function ajaxCall(settings) {

	var options = {
		async : true,
		type : "post",
		data : null,
		dataType : "json",
		contentType: "application/x-www-form-urlencoded; charset=utf-8",
		url : "",
		param : '',
		form : null,
		callback : null,
		dimmedshow : false
	};
	var opt = $.extend({},options,settings);

	// serialize
	if(opt.param != '') {
		opt.data = opt.param;
	}else{
		opt.data = $("form[name='"+opt.form+"']").serialize();
	}

	$.ajax({
		async : opt.async,
		url : opt.url,
		type : opt.type,
		dataType : opt.dataType,
		contentType : opt.contentType,
		data : opt.data,
		error : function(request,status,error) {
			alert('Error : '+request.status);
		},
		success : function(data,status,xhr) {
			if (xhr.readyState == 4){
				if (xhr.status >= 200 && xhr.status < 300) {
					if(typeof opt.callback === 'function') {
						loadingHide(opt.dimmedshow);
						opt.callback(data);
					}
				}
			}
		}
	});
}

function showLayerPopup(settings) {

	var options = {
		layer : null,
		draggable : true,
		callback : function() {},
		showAfter : null,
		beforeClose : null
	};
	var opt = $.extend({},options,settings);

	var coordinate = {
		width : 0,
		height : 0,
		left : 0,
		top : 0
	}
		
	if(opt.layer.length < 1) {
		//alert("레이어 팝업이 없습니다.");
		return;
	}

	// coordinate
	coordinate["width"] = opt.layer.outerWidth();
	coordinate["height"] = opt.layer.outerHeight();
	coordinate["left"] = Math.round(coordinate["width"] / 2);
	coordinate["top"] = Math.round(coordinate["height"] / 2);

	opt.layer.css({
		marginTop : (-1 * coordinate["top"])+"px",
		marginLeft : -1 * coordinate["left"]
	});

	if(opt.draggable) {
		opt.layer.draggable({ 
			handle:opt.layer.find(".pop-header") }
		);
	}


	// close event
	opt.layer.off(".layerClose").on("click.layerClose",".btn-layer-close",function() {
		if(typeof opt.beforeClose == "function") {
			if(!opt.beforeClose(opt.layer)) {
				return;	
			};
		}

		$(opt.layer).hide();
		hideDimmed();
		opt.layer.css({
			left : "50%",
			top : "50%",
			marginTop : 0,
			marginLeft : 0
		});
	});


	// callback
	if(typeof opt.callback == "function") {
		opt.callback(opt.layer);
	}

	// show
	showDimmed();
	$(opt.layer).show();

	// callback
	if(typeof opt.showAfter == "function") {
		opt.showAfter(opt.layer);
	}

}

function showDimmed() {
	setTimeout(function(){
		$(".dimmed").removeClass("white").show();
	},10);
}

function hideDimmed() {
	$(".dimmed").hide();
}

// loading
function loadingShow(color) {
	if(color) {
		$(".dimmed").addClass("white");
		$(".dimmed,.loading").show();
	}else{
		$(".dimmed").removeClass("white");
		$(".dimmed,.loading").show();
	}
}
function loadingHide(type) {
	//setTimeout(function(){

		if(type) {
			$(".loading",parent.document).hide();
		}else{
			$(".dimmed,.loading",parent.document).hide();
		}
	//},10);
}

/*----------------------------------------------------
// 텍스트 입력폼 체크
----------------------------------------------------*/

function isEmpty(data,text,errMsg) {
	if(trim(data.value).length<1) {
		if(typeof text === "function") {
			text(errMsg);
		}else{
			alert(text);
		}
		data.focus();
		return false;
	}
	return true;
}

function isEmptyJquery(obj,name,text) {
	if(trim(obj.find("[name='"+name+"']").val()) === '') {
		alert(text);
		obj.find("[name='"+name+"']").focus();
		return false;
	}
	return true;
}

function trim(str){ 
	return str.replace(/^\s*/,'').replace(/\s*$/, ''); 
}  

//한글만입력
function ChkOnlyHan(name,text) {
	var obj = trim(name.value);

    if(/[^가-힝]/.test(obj)) {
        alert(text); 
		name.focus();
        return false;
    }
	return true;
}

//영어만 입력
function ChkOnlyEngNum(name,text) {
	var obj = trim(name.value);

    if(/[^a-zA-Z0-9]/.test(obj)) {
        alert(text); 
		name.focus();
        return false;
    }
	return true;
}

//숫자만 입력
function ChkOnlyNum(name,text) {
	var obj = trim(name.value);
		obj = obj.split(",").join("");
		obj = Number(obj);

	if(isNaN(Number(obj))) {
        alert(text); 
		name.focus();
        return false;
    }
	return true;
}


/*----------------------------------------------------
// 기타
----------------------------------------------------*/
function preventDefault(e) {
	e.preventDefault();
	e.stopPropagation();
}


// Cookie
function getCookie( name )	{
	var nameOfCookie = name + "=";
	var x = 0;
	while ( x <= document.cookie.length )	{
		var y = (x+nameOfCookie.length);
		if ( document.cookie.substring( x, y ) == nameOfCookie ) {
			if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
				endOfCookie = document.cookie.length;
				return unescape( document.cookie.substring( y, endOfCookie ) );
		}
			
		x = document.cookie.indexOf( " ", x ) + 1;
		if ( x == 0 ) break;
	}
	return "";
}

function setCookie( name, value, expiredays ) {
	var todayDate = new Date();
	todayDate.setDate( todayDate.getDate() + expiredays );
	document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

// 콤마찍기
function comma(str,dot) {
	return dot ? commaDot(str) : commaNotDot(str);
}

function commaNotDot(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}

function commaDot(str) {
	var n = str.toString();
		dot = n.indexOf(".") > -1 ? true : false,
		parts = n.split(".");


	parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	parts[1] = parts[1] ? parts[1].replace(/^(\d{2})./g, "$1") : "";

    return parts[0] + (dot ? "." : "") + parts[1];
}

// 콤마풀기
function uncomma(str,dot) {
	return dot ? uncommaDot(str) : uncommaNotDot(str);
}

function uncommaNotDot(str) {
    str = String(str);
  return str.replace(/[^\d]+/g, '');
}

function uncommaDot(str) {
	var n = str.toString();
		dot = n.indexOf(".") > -1 ? true : false,
		parts = n.split(".");
	
	return parts[0].replace(/[^\d]+/g, '') + (dot ? "." : "") + (parts[1] ? parts[1] : "");
}


function toDay() {
	var today = new Date();
	return today.toISOString().substring(0, 10);
}

function toInt(n,dot) {
	return Number(uncomma(n,dot));
}


// 체크박스 전체선택 / 해제



(function(window,document,jQuery) {


	// checbox
	$.fn.checkboxAll = function(settings) {
		var options = {
			color : "" // default : blue / red, green

		};

		var opt = $.extend({},options,settings);

	 
		return this.each(function() {
			var  $this = $(this),
					$check_all = $(".chk_all", $this),
					$chk_list = $(".chk_list:not(:disabled)", $this);


			// opt 적용
			if( typeof(opt.color) == "string" && opt.color != "") {
				$this.addClass(opt.color);
			}

			// check all 
			$this.off(".chkAll").on("click.chkAll",".chk_all",function(e) {
				var $this = $(this);

				// prop (attr 사용시 IE 오류)
				$this.prop("checked") ?  $chk_list.prop("checked", true) : $chk_list.prop("checked", false);

			});

			// check list
			$this.off(".chkList").on("click.chkList",".chk_list",function(e) {
				var $this = $(this),
					$checkbox_checked = true;


				// chk_list loop
				$chk_list.each(function(e) {
					var $checkbox = $(this);

					// 선택해제된 checkbox가 있으면 stop
					if( !$checkbox.prop("checked") ) {
						$check_all.prop("checked", false);
						$checkbox_checked = false;
						return false;
					}
				});

				if($checkbox_checked) {
						$check_all.prop("checked", true);
				}

			});
	 
		});
	}


	$(function() {
	
		var opt =  {
			color : "red"
		}

		$(".tbl-checkbox_1").checkboxAll();
		$(".tbl-checkbox_2").checkboxAll(opt);


	});

})(window,document,$);

스티븐께서 친히*_*

<style>
/* checkbox */
.red input[type="radio"]+label:before,
.red input[type="checkbox"]+label:before {content:"";display:block;position:absolute;left:0;top:1px;width:18px;height:18px;background-image:url('../img/red.png');background-repeat:no-repeat;}

.green input[type="radio"]+label:before,
.green input[type="checkbox"]+label:before {content:"";display:block;position:absolute;left:0;top:1px;width:18px;height:18px;background-image:url('../img/green.png');background-repeat:no-repeat;}

</style>

<div class="tbl">

	<table class="tbl-checkbox tbl-checkbox_1">
		<thead>
			<tr>
				<th><input type="checkbox" class="chk_all" id="chk_all_1"><label for="chk_all_1"></label></th>
				<th>제 목</th>
				<th>일 시</th>
				<th>추 천</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_11"><label for="chk_list_11"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_12"><label for="chk_list_12"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_13" disabled><label for="chk_list_13"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_14"><label for="chk_list_14"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_15"><label for="chk_list_15"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
		</tbody>
	</table>

	<table class="tbl-checkbox tbl-checkbox_2">
		<thead>
			<tr>
				<th><input type="checkbox" class="chk_all" id="chk_all_2"><label for="chk_all_2"></label></th>
				<th>제 목</th>
				<th>일 시</th>
				<th>추 천</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_21"><label for="chk_list_21"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_22"><label for="chk_list_22"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_23"><label for="chk_list_23"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_24"><label for="chk_list_24"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="chk_list" id="chk_list_25" disabled><label for="chk_list_25"></label></td>
				<td>테스트 1</td>
				<td>2019.08.20</td>
				<td>추천</td>
			</tr>
		</tbody>
	</table>

제 목	일 시	추 천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천

제 목	일 시	추 천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천
테스트 1	2019.08.20	추천

저작자표시 비영리 동일조건

'CODING TIP > JavaScript' 카테고리의 다른 글

재생/정지 버튼이 있는 slick slider ( auto play, pause ) (0)	2021.01.12
스크롤 플러그인 사용시 (0)	2018.07.12
(12) 날짜 비교하여 기능 적용하기 (0)	2018.05.28
(11) 남은 날짜, 시간, 분, 초 계산하기 - 날짜 타이머, 카운팅 (0)	2018.04.09
(10) URL 파라미터 값 받아오기 (0)	2018.04.05

Code Box [ Baby JH ]

(13) 주요 스크립트 및 jquery 플러그인 기본 틀

'CODING TIP > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바