2017년 11월 8일 수요일

2017년 2월 13일 월요일

기본적인 유효성 검사 및 태그 틀 layerMsg 및 focus

---------------- 코드 실행 시작---------------------------------------------------------------
1-1항목 1-2항목 숫자만
2-1항목 2-2항목 숫자+콤마
3-1항목 3-2항목 숫자+장선(-)
4-1항목 4-2항목 숫자+점(.)
에러메세지....
---------------- 코드 실행 종료---------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
 .layer-main {
 z-index:2000;
 display:none;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
}
.layer-main:before {
 content: "";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -.25em;
}
.layer-popup {
 display: inline-block;
 vertical-align: middle;
 background-color: #fff;
 border: 1px solid #3571B5;
 z-index: 10;
 font-family:Tahoma;
}
.layer-popup .layer-container {
 padding-bottom: 20px;
}

.layer-title {
 overflow:hidden;
 margin:0px;
 padding:0px;
 background-color: #474747;
 height:36px;
}
.layerTitle {
 float:left;
 line-height:36px;
 margin:0px;
 padding:0px 0px 0px 10px;
 font-size:15px;
 color:#ffffff;
}

.layer-close {
 float:right;
 margin:0px;
 padding:8px 10px;
 cursor:pointer;
}

.layerConts {
 clear:both;
 margin-top:10px;
 padding: 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("[d-valid='ValidNumber']").each(function (){
   // 익스 플로러 10버전 이상 및 (크롬 사파리 포함) 지원하면 keydown 이벤트를 input 이벤트로 데체 하면 좋음!!!!
$(this).on("keydown", function () {kdNumber(this);});
$(this).on("keyup", function () {kuNumber(this);});
});

$("[d-valid='ValidNumComma']").each(function (){
$(this).on("keydown", function () {kdNumComma(this);});
$(this).on("keyup", function () {kuNumComma(this);});
$(this).on("blur", function () {kbNumComma(this);});
});

$("[d-valid='ValidNumMinus']").each(function (){
$(this).on("keydown", function () {kdNumMinus(this);});
$(this).on("keyup", function () {kuNumMinus(this);});
});

$("[d-valid='ValidNumDot']").each(function (){
$(this).on("keydown", function () {kdNumDot(this);});
$(this).on("keyup", function () {kuNumDot(this);});
});
});

/* -- prototype -------------------------------------------------------------------------------------------------------------------*/
String.prototype.DelComma = function () {
return this.replace( /,/g, "");
}

String.prototype.AddComma = function () {
return this.replace(/[^0-9]/g , "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}


/* -- replace후 커서위치 유지 -------------------------------------------------------------------------------------------------------------------*/
function CurserSet(Obj, selLen) {
if (Obj.setSelectionRange) { Obj.focus(); Obj.setSelectionRange(selLen, selLen); } /* WebKit */
else if (Obj.createTextRange) { var range = Obj.createTextRange(); range.collapse(true); range.moveEnd('character', selLen); range.moveStart('character', selLen); range.select(); } /* IE */
else if (Obj.selectionStart) { Obj.selectionStart = selLen; Obj.selectionEnd = selLen; }
}

/* -- 숫자만 -------------------------------------------------------------------------------------------------------------------*/
function ValidNumber(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumber(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumber(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

/* -- 숫자+콤마(,) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumComma(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.DelComma();
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumComma(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^,0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumComma(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 188 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

function kbNumComma(Obj) {
var tval = $(Obj).val().AddComma();
$(Obj).val(tval);
}

function AddComma(Obj) {
$(Obj).val($(Obj).val().AddComma());
}

function DelComma(Obj) {
$(Obj).val($(Obj).val().DelComma());
}



/* -- 숫자+장선(-) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumMinus(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.replace( /-/g, "");
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumMinus(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^-0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumMinus(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || (eKey == 189 || eKey == 109) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

/* -- 숫자+점(.) -------------------------------------------------------------------------------------------------------------------*/
function ValidNumDot(Obj) {
var jObj = $(Obj);
var val = jObj.val();
var required = jObj.attr("d-required");
if(required.toLowerCase() != "true" && val == ""){
return true;
}

val = val.replace( /\./g, "")
var msg = jObj.attr("d-msg");
if(jObj.attr("d-required") == "true" && val == "" ){
if(jObj.val() == ""){
msgShow(Obj, msg + " 항목 값을 입력해주세요.");
}
else{
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
}
else{
var ext = /[^0-9]/g;
if(ext.test(val)){
msgShow(Obj, msg + " 항목 입력값을 확인하여 주세요.");
}
else{
return true;
}
}
jObj.focus();
return false;
}

function kuNumDot(Obj) {
var selLen = Obj.selectionStart;
var oVal = $(Obj).val();
var tVal = oVal.replace(/[^.0-9]/g , "");
if (oVal != tVal) {
$(Obj).val(tVal);
CurserSet(Obj, selLen + tVal.length - oVal.length);
}
}

function kdNumDot(Obj) {
var eKey = event.keyCode;
if (((eKey >= 48 && eKey <= 57) || (eKey >= 96 && eKey <= 105) || eKey == 8 || eKey == 46 || eKey == 37 || eKey == 39 || eKey == 9 || eKey == 190 || eKey == 110) && (event.shiftKey == false)) {
}
else {
(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
}
}

function IsValidate(){
var isSucc = true;
$("[d-valid]").each(function (){
if(isSucc){
var valid = $(this).attr("d-valid");
isSucc = eval(valid + "(this)");
}
});
if(isSucc){
alert("데이터 전송 로직을 작성하시면 됩니다.");
}
else{
return false;
}
}

var _focusObj;
function msgShow(Obj, Msg){
_focusObj = Obj;
AlertMsg(Msg);
}

function AlertMsg(Msg){
$(".layerConts").html(Msg);
$(".layer-main").show();
}

function closelayer(){
$(".layer-main").hide();
$(_focusObj).focus();
}
    </script>
</head>
<body>
<table style="width:600px;">
<colgroup>
<col style="width:60px;" />
<col style="width:140px;" />
<col style="width:60px;" />
<col style="width:140px;" />
<col style="width:200px;" />
</colgroup>
<tr>
<th>1-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumber" d-required="true" d-msg="1-1항목" />
</td>
<th>1-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumber" d-required="false" d-msg="1-2항목" />
</td>
<td>숫자만</td>
</tr>
<tr>
<th>2-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumComma" d-required="true" d-msg="2-1항목" />
</td>
<th>2-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumComma" d-required="false" d-msg="2-2항목" />
</td>
<td>숫자+콤마</td>
</tr>
<tr>
<th>3-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumMinus" d-required="true" d-msg="3-1항목" />
</td>
<th>3-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumMinus" d-required="false" d-msg="3-2항목" />
</td>
<td>숫자+장선(-)</td>
</tr>
<tr>
<th>4-1항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumDot" d-required="true" d-msg="4-1항목" />
</td>
<th>4-2항목</th>
<td>
<input type="text" style="width:100%;" d-valid="ValidNumDot" d-required="false" d-msg="4-2항목" />
</td>
<td>숫자+점(.)</td>
</tr>
</table>
</body>
</html>
<input type="button" value="유효성체크"  onclick="IsValidate();"/>


<!----- 레이어 alert 메세지 ----->
<div class="layer-main">
    <div class="layer-popup">
        <div class="layer-container">
            <div class="layer-conts">
                <div class="layer-title">
                    <div class="layerTitle">
                        에러메세지....
                    </div>
                    <div class="layer-close" onclick="closelayer()">
                        <img src="/images/kr/cm/btn_popupClose.gif" alt="" />
                    </div>
                </div>
                <div class="layerConts">
                </div>
                <div>
                    <a href="javascript:closelayer();" class="">
                        닫기
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

2017년 2월 7일 화요일

레이어 중앙정렬 및 Block 처리(Css로 처리)

----실행해 보기 시작-------------------------------------------------------------------------


타이틀................................
레이어컨텐트
레이어컨텐트
레이어컨텐트
레이어컨텐트
레이어컨텐트


----실행해 보기 끝-------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<style>
.layer-main {
z-index:2000;
display:none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
.layer-main:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em;
}
.layer-popup {
display: inline-block;
vertical-align: middle;
background-color: #fff;
border: 1px solid #3571B5;
z-index: 10;
font-family:Tahoma;
}
.layer-popup .layer-container {
padding-bottom: 20px;
}

.layer-title {
overflow:hidden;
margin:0px;
padding:0px;
background-color: #474747;
height:36px;
}
.layerTitle {
float:left;
line-height:36px;
margin:0px;
padding:0px 0px 0px 10px;
font-size:15px;
color:#ffffff;
}

.layer-close {
float:right;
margin:0px;
padding:8px 10px;
cursor:pointer;
}

.layerConts {
clear:both;
margin-top:10px;
padding: 10px;
}
</style>
<script type="text/javascript">
function openlayer() {
document.getElementsByClassName("layer-main")[0].style.display = "block";
}
function closelayer() {
document.getElementsByClassName("layer-main")[0].style.display = "none";
}
function actionlayer() {
alert("actionlayer");
}
</script>
</head>

<body>
<div>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br>ccccc<br></div>
<div onclick="openlayer()">show click here</div>
<div class="layer-main">
    <div class="layer-popup">
        <div class="layer-container">
            <div class="layer-conts">
                <div class="layer-title">
                    <div class="layerTitle">
                        타이틀................................
                    </div>
                    <div class="layer-close" onclick="closelayer()">
                        <img src="/images/kr/cm/btn_popupClose.gif" alt="" />
                    </div>
                </div>
                <div class="layerConts">
레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>레이어컨텐트<br>
                </div>
                <div>
                    <a href="javascript:actionlayer();" class="">
                        저장
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

2016년 9월 6일 화요일

common.js

String.prototype.format = function (args) { var newStr = this; for (var key in args) { newStr = newStr.replace('{' + key + '}', args[key]); } return newStr; } String.prototype.formatAll = function (args) { var newStr = this; for (var key in args) { newStr = newStr.split("{" + key + "}").join(args[key]); } return newStr; } String.prototype.getLpad = function (spad, len) { var str = this; while (str.length < len) str = spad + str; return str; } String.prototype.getDateFormat = function () { var Week = ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일']; var year = this.substring(0, 4); var month = this.substring(4, 6); var day = this.substring(6, 8); var date = new Date(year, parseInt(month) - 1, day); return { date: "{YY}.{MM}.{DD}".format({ YY: year.substring(2, 4), MM: month, DD: day }), fullDate: "{YYYY}.{MM}.{DD}".format({ YYYY: year.substring(0, 4), MM: month, DD: day }), week: Week[date.getDay()], month: month + "월", day: day, orginDate: date } } String.prototype.isBlank = function () { var str = this.trim(); for (var i = 0; i < str.length; i++) { if ((str.charAt(i) != "\t") && (str.charAt(i) != "\n") && (str.charAt(i) != "\r")) { return false; } } return true; } String.prototype.isEmail = function () { return (/\w+([-+.]\w+)*@\w+([-.]\w+)*\.[a-zA-Z]{2,4}$/).test(this.trim()); } String.prototype.isDomain = function () { return (/\w+([-.]\w+)*\.[a-zA-Z]{2,4}$/).test(this.trim()); } String.prototype.isPhone = function () { var arg = arguments[0] ? arguments[0] : ""; return eval("(/(02|0[3-9]{1}[0-9]{1})" + arg + "[1-9]{1}[0-9]{2,3}" + arg + "[0-9]{4}$/).test(this)"); } String.prototype.isMobile = function () { var arg = arguments[0] ? arguments[0] : ""; return eval("(/01[016789]" + arg + "[1-9]{1}[0-9]{2,3}" + arg + "[0-9]{4}$/).test(this)"); } String.prototype.isBirth = function () { return (/(19|20)[0-9]{2}[01]{1}[0-9]{1}[0123]{1}[0-9]{1}$/).test(this.trim()); } String.prototype.isIncKor = function () { return (/[ㄱ-ㅎ|ㅏ-ㅣ|가-하]/).test(this) ? true : false; } String.prototype.isKor = function () { return (/^[가-힣]+$/).test(this) ? true : false; } String.prototype.isEngkor = function () { return (/^[가-힣]+$/).test(this) ? true : (/^[a-zA-Z]+$/).test(this) ? true : false; } String.prototype.num = function () { return (this.trim().replace(/[^0-9]/g, "")); } String.prototype.isNum = function () { return (/^[0-9]+$/).test(this) ? true : false; } String.prototype.isEng = function () { return (/^[a-zA-Z]+$/).test(this) ? true : false; } String.prototype.isEngNum = function () { return (/^[0-9a-zA-Z]+$/).test(this) ? true : false; } String.prototype.money = function () { var num = this.trim(); while ((/(-?[0-9]+)([0-9]{3})/).test(num)) { num = num.replace((/(-?[0-9]+)([0-9]{3})/), "$1,$2"); } return num; } //</String.prototype> String.prototype.decodeEntity = function () { return this.replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">"); }; String.prototype.decodeCode = function () { return this.replace(/&#39;/g, "'") .replace(/&#40;/g, "(") .replace(/&#41;/g, ")") .replace(/&#34;/g, "'") .replace(/&#60;/g, "<") .replace(/&#62;/g, ">") .replace(/&#x0D;/gi, "\r"); }; String.prototype.stripHtml = function () { return $('<div/>').html(this).text(); }; Date.prototype.yyyymmdd = function () { var yyyy = this.getFullYear().toString(); var mm = (this.getMonth() + 1).toString(); var dd = this.getDate().toString(); return yyyy + (mm[1] ? mm : "0" + mm[0]) + (dd[1] ? dd : "0" + dd[0]); }; String.prototype.decodeEntity = function () { return this.replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">"); }; String.prototype.decodeCode = function () { return this.replace(/&#39;/g, "'") .replace(/&#40;/g, "(") .replace(/&#41;/g, ")") .replace(/&#34;/g, "'") .replace(/&#60;/g, "<") .replace(/&#62;/g, ">") .replace(/&#x0D;/gi, "\r"); }; String.prototype.stripHtml = function () { return $('<div/>').html(this).text(); }; Date.prototype.yyyymmddDash = function () { var yyyy = this.getFullYear().toString(); var mm = (this.getMonth() + 1).toString(); var dd = this.getDate().toString(); return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]); }; $.is_mobile = function () {     //if(TOUR_CLI_TP=='W') return false;     if (_agent.match(/android/) || _agent.match(/(iphone|ipod|ipad)/)) {         return typeof arguments[0] == 'undefined' ? true : (function (a, cs) {             return a.match((cs == 'android' ? /android/ : /(iphone|ipod|ipad)/)) ? true : false;         })(_agent, arguments[0]);     }     return false; };

2016년 8월 19일 금요일

모바일 레이어 중앙 정렬 및 기타


<pre name="code" class="jscript">
<html lang="ko">
<head>
    <title>싸니까 믿으니까 인터파크 투어</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style>
        .over-hidden {
            overflow: hidden;
        }

        .over-auto {
            overflow: auto;
        }

        .layer-container {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 100;
            background-color: #fff;
            opacity: 1;
            width: 90%;
        }

        .back-layer {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;
            background-color: #000000;
            width: 100%;
            opacity: 0.5;
        }

        .newlayer-container {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            z-index: 110;
            background-color: #fff;
            opacity: 1;
        }

        .newback-layer {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 99;
            background-color: #808080;
            height: 100%;
            width: 100%;
            opacity: 1;
        }

        .playerlayer-container {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 120;
            background-color: #fff;
            opacity: 1;
        }

    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        });

        function ShowBackCenterLayerTest(cnt, top) {
            var layerID = "center_" + cnt;
            var makeHtml = "";
            makeHtml += "  <div id='" + layerID + "' class='layer-container'>";
            for (var i = 0; i < cnt; i++) {
                makeHtml += "    <div> BackCenter컨텐츠_" + cnt + " </div>";
                if ((i + 1) % 10 == 0) {
                    makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
                }
            }
            makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
            makeHtml += "  </div>";

            fnMakeLayer(layerID, "body", makeHtml);
            fnShowCenterLayer(layerID, top, 500, "left", callback1);
        }

        function ShowBackTopLayerTest(cnt, top) {
            var layerID = "BackTop_" + cnt;
            var makeHtml = "";
            makeHtml += "  <div id='" + layerID + "' class='layer-container'>";
            for (var i = 0; i < cnt; i++) {
                makeHtml += "    <div> BackTop컨텐츠_" + cnt + " </div>";
                if ((i + 1) % 10 == 0) {
                    makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
                }
            }
            makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
            makeHtml += "  </div>";

            fnMakeLayer(layerID, "body", makeHtml);
            fnShowTopLayer(layerID, top, 500, "left", callback1);
        }

        function ShowNewTopLayerTest(cnt, top) {
            var layerID = "NewTop_" + cnt;
            var makeHtml = "";

            makeHtml += "<div id='" + layerID + "' class='newback-layer'>";
            makeHtml += "  <div class='newlayer-container'>";
            for (var i = 0; i < cnt; i++) {
                makeHtml += "    <div> NewTop컨텐츠_" + cnt + " </div>";
                if ((i + 1) % 10 == 0) {
                    makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
                }
            }
            makeHtml += "    <div onclick='fnCloseLayerAttr(this);' data-close='" + layerID + "'> 닫기</div>";
            makeHtml += "  </div>";
            makeHtml += "</div>";

            fnMakeLayer(layerID, "body", makeHtml);
            fnShowNewTopLayer(layerID, 500, "left", callback1);
        }

        function callback1() {
            console.log("callback1");
        }
    </script>
    <script type="text/javascript">
 var _arrLayerID = [];    // 리사이즈시 레이어를 제어하기위해 {layerID, topMargin, ShowType}

 $(window).resize(function () {
     setTimeout(function () {
  LayerResize()
     }, 30);
 });

 function LayerResize() {
     for (var i = 0; i < _arrLayerID.length; i++) {
  var jqueryObj = $("#" + _arrLayerID[i].layerID);
  if (jqueryObj.css("display") != "none") {
      if (_arrLayerID[i].ShowType == "fnShowCenter") {
   fnShowCenterLayer(_arrLayerID[i].layerID, _arrLayerID[i].topMargin, 0);
      }
      else if (_arrLayerID[i].ShowType == "fnShowTop") {
   fnShowTopLayer(_arrLayerID[i].layerID, _arrLayerID[i].topMargin, 0);
      }
  }
     }
 }

 function fnMakeLayer(layerID, parentID, makeHtml) {
     var layerSelecter = "#" + layerID;
     if ($(layerSelecter).length > 0) {
  return;
     }

     var parentSelecter = "";
     if (parentID == null || parentID == "" || parentID == "body") {
  parentSelecter = "body";
     }
     else {
  parentSelecter = "#" + parentID;
     }

     $(parentSelecter).append(makeHtml);
 }

 function fnSetLayer(ID, top, div) {
     var isAddAble = true;
     for (var i = 0; i < _arrLayerID.length; i++) {
  if (_arrLayerID[i].layerID == ID) {
      isAddAble = false;
  }
     }
     if (isAddAble) {
  _arrLayerID.push({ layerID: ID, topMargin: top, ShowType: div });
     }
 }

 function fnShowBackLayer(layerID, topMargin) {
     var backID = layerID + "back";
     if ($("#" + backID).length == 0) {
  var addHtml = $("<div></div>").attr("id", backID).addClass("back-layer");
  $("#divWrap").append(addHtml);
  $("#" + backID).bind('touchmove', function (e) { e.preventDefault() });
     }

     var con_h = $("#" + layerID).height() + $(window).scrollTop() + topMargin;
     var win_h = $(window).height();
     if (con_h > win_h) {
  $("#" + backID).height(con_h);
     }
     else {
  $("#" + backID).height(win_h);
     }

     $("#" + backID).show();

 }

 function fnShowCenterLayer(layerID, topMargin, duration, slideType, callback) {
     var layerSelecter = "#" + layerID;
     $(layerSelecter).removeClass("over-auto");
     $(layerSelecter).css("height", "auto");
     if (topMargin == null || topMargin == "") {
  topMargin = "0";
     }


     topMargin = Number(topMargin);
     fnSetLayer(layerID, topMargin, "fnShowCenter");

     //var win_w = $(window).width();
     //var win_h = $(window).height();
     var win_w = screen.width;
     var win_h = screen.height;
     var con_w = $(layerSelecter).width();
     var con_h = $(layerSelecter).height();
     var scrollTop = $(window).scrollTop();
     var movetop = ((win_h - con_h) / 2);
     var moveleft = (win_w - con_w) / 2;

     if (movetop < 0) {
  movetop = 0;
     }

     movetop += scrollTop + topMargin;
     if (con_h + (topMargin * 2) > win_h) {
  $(layerSelecter).css("height", win_h - (topMargin * 2));
     }

     $("body").css("overflow", "hidden");
     $(layerSelecter).css("overflow", "auto");
     $(layerSelecter).show();
     fnShowBackLayer(layerID, topMargin);
     $(layerSelecter).css("left", "100%").css("top", movetop);
     $(layerSelecter).animate({
  left: moveleft,
  top: movetop
     },
     duration,
     function () {
  if (callback != null) {
      callback();
  }
     });
 }

 function fnShowTopLayer(layerID, topMargin, duration, slideType, callback) {
     var layerSelecter = "#" + layerID;
     $(layerSelecter).css("height", "auto");
     if (topMargin == null || topMargin == "") {
  topMargin = "0";
     }
     topMargin = Number(topMargin);
     fnSetLayer(layerID, topMargin, "fnShowTop");

     var win_w = screen.width;
     var win_h = screen.height;
     var con_w = $(layerSelecter).width();
     var con_h = $(layerSelecter).height();
     var scrollTop = $(window).scrollTop();
     var movetop = topMargin;
     var moveleft = (win_w - con_w) / 2;

     if (movetop < 0) {
  movetop = 0;
     }


     movetop += scrollTop;

     $(layerSelecter).show();
     fnShowBackLayer(layerID, topMargin);
     $(layerSelecter).css("left", "100%").css("top", movetop);
     $(layerSelecter).animate({
  left: moveleft,
  top: movetop
     },
     duration,
     function () {
  if (callback != null) {
      callback();
  }
     });
 }

 function fnShowNewTopLayer(layerID, duration, slideType, callback) {
     var layerSelecter = "#" + layerID;
     $("body").css("overflow", "hidden");
     var scrollTop = $(window).scrollTop();
     $(layerSelecter).css("overflow", "auto");
     $(layerSelecter).css("left", "100%").css("top", scrollTop).show();
     $(layerSelecter).animate({
  left: 0,
  top: scrollTop
     },
     duration,
     function () {
  if (callback != null) {
      callback();
  }
     });
 }

 function fnCloseLayerAttr(obj) {
     var layerID = $(obj).attr("data-close");
     fnCloseLayer(layerID);
 }

 function fnCloseLayer(layerID) {
     $("body").css("overflow", "auto");
     $("#" + layerID + "back").hide();
     $("#" + layerID).hide();
     for (var i = 0; i < _arrLayerID.length; i++) {
  if (_arrLayerID[i].layerID == layerID) {
      _arrLayerID.splice(i, 1);
  }
     }
 }
    </script>
</head>
<body>
    <div id="divWrap">
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>
            <a href="javascript:ShowBackCenterLayerTest(5, 0);"> 레이어 센터(margintop 0) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowNewTopLayerTest(30, 0);"> 레이어 새창처럼 (margintop 0) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackCenterLayerTest(40, 20);"> 레이어 센터(margintop 20) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackCenterLayerTest(60, 80);"> 레이어 센터(margintop 80) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackCenterLayerTest(60, 0);"> 레이어 센터(margintop 0) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackTopLayerTest(10, 10);"> 레이어 Top (margintop 10) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackTopLayerTest(40, 20);"> 레이어 Top  (margintop 20)</a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackTopLayerTest(60, 80);"> 레이어 Top (margintop 80)</a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowBackTopLayerTest(60, 0);"> 레이어 Top (margintop 0)</a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowNewTopLayerTest(30, 0);"> 레이어 새창처럼 (margintop 0) </a>
            <br />
            <br />
        </div>
        <div>
            <a href="javascript:ShowNewTopLayerTest(60, 0);"> 레이어 새창처럼 </a>
            <br />
            <br />
        </div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
        <div>줄바꿈<br /><br /></div>
    </div>
</body>
</html>

</pre>

2015년 7월 14일 화요일

테이블 컬럼 코멘트 조회

// MS SQL 테이블 컬럼 보기
SELECT 
T1.TABLE_NAME, T1.COLUMN_NAME, DATA_TYPE, IS_NULLABLE, CHARACTER_MAXIMUM_LENGTH, COLUMN_DEFAULT, COLUMN_DESC
FROM INFORMATION_SCHEMA.COLUMNS T1 
LEFT OUTER JOIN ( 
 SELECT 
 T.NAME TABLE_NAME, TD.VALUE TABLE_DESC 
 , C.NAME COLUMN_NAME, CD.VALUE COLUMN_DESC 
 FROM SYSOBJECTS T 
 INNER JOIN SYSUSERS U ON U.UID = T.UID 
 LEFT OUTER JOIN SYS.EXTENDED_PROPERTIES TD ON TD.MAJOR_ID = T.ID AND TD.MINOR_ID = 0 AND TD.NAME = 'MS_Description' 
 INNER JOIN SYSCOLUMNS C ON C.ID = T.ID  
 LEFT OUTER JOIN SYS.EXTENDED_PROPERTIES CD ON CD.MAJOR_ID = C.ID AND CD.MINOR_ID = C.COLID AND CD.NAME = 'MS_Description' 
 WHERE T.TYPE = 'u' 
) T2 ON T2.TABLE_NAME=T1.TABLE_NAME AND T2.COLUMN_NAME=T1.COLUMN_NAME 
WHERE T1.TABLE_NAME in (select TABLE_NAME from information_schema.tables)
ORDER BY T1.TABLE_NAME, ORDINAL_POSITION 

2015년 7월 2일 목요일

// 막대 그래프 https://bitbucket.org/cleonello/jqplot/downloads/






  



$(document).ready(function () {
        var ChaData = [['첫번째', 0], ['두번째', 2], ['세번째', 8], ['네번째', 0]];
        //var data = [["26.6", "23", "25", "36.7", "30.4", "20.5", "20.2", "24.7", "19.1"]];
        $.jqplot('box_chart', [ChaData], {
            title: { /* 타이틀 관련 */
                show: false
                ,text: ''
            }
            ,legend: {
                show: false
                /*
                ,showLabels: true
                ,location: 'ne'
                ,labels: ChaData
                rendererOptions: {
                }
                */
            }
            ,grid: {
                background: '#ffffff'
                ,drawGridlines: true
                ,drawBorder: false
                ,shadow: false
                ,borderColor: '#999999'
                ,borderWidth: 1
            }
            ,series: [{
                renderer: $.jqplot.BarRenderer
                , pointLabels: { show: true }
                
                ,rendererOptions: {
                    animation: {
                        speed: 2500    //animation 설정 시 속도
                    }
                    
                    /* 그림자 */
                    ,shadow: false
                    //shadowDepth: 10, 그림자
                    /* 막대에 관한 라인 */
                    ,showLine: true
                    
                    /* 각각의 막대그래프 램던 색 여부 */
                    ,varyBarColor: true

                    
                    /* 막대 넓이 */
                    ,barWidth: 20      //bar width 설정
                    ,barPadding: -15  //bar padding
                    ,barMargin: 0      //bar간 간격
                }

            }],
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                    , label: ""       //X 좌표제목
                    , tickOptions: { fontSize: 13}        // X축 잘자 크기
                },
                yaxis: {
                    label: ""       //Y 좌표제목
                    //,pad :5
                    , padMax: 7
                    //,padMin   : 0
                    , max: 35
                    //, min: 0
                    ,tickOptions: { formatString: '%d' }        // 정수형으로 y축 tick 설정
                    
                }
            }
        });
});