삽질 이제 그만!!
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(/&/gi, "&").replace(/</gi, "<").replace(/>/gi, ">");
};
String.prototype.decodeCode = function () {
return this.replace(/'/g, "'")
.replace(/(/g, "(")
.replace(/)/g, ")")
.replace(/"/g, "'")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/
/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(/&/gi, "&").replace(/</gi, "<").replace(/>/gi, ">");
};
String.prototype.decodeCode = function () {
return this.replace(/'/g, "'")
.replace(/(/g, "(")
.replace(/)/g, ")")
.replace(/"/g, "'")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/
/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 설정 } } }); });
피드 구독하기:
글 (Atom)