CDN
<head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>장애 리스트 관리 시스템</title> <!-- CSS --> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"> <!-- datepicker3 CSS --> <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> <!-- custoem CSS --> <link rel="stylesheet" href="assets/css/fault_handling.css"> <!-- js --> <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- datepicker3 js --> <script src="assets/js/moment-with-locales.js" charset="utf-8"></script> <script src="assets/js/bootstrap-datetimepicker.js"></script> <script src="assets/js/fault_handling.js" charset="UTF-8"></script> <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js --> <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>
index.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>장애 리스트 관리 시스템</title> <!-- CSS --> <link href="assets/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"> <!-- datepicker3 CSS --> <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> <!-- custoem CSS --> <link rel="stylesheet" href="assets/css/fault_handling.css"> <!-- js --> <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- datepicker3 js --> <script src="assets/js/moment-with-locales.js" charset="utf-8"></script> <script src="assets/js/bootstrap-datetimepicker.js"></script> <script src="assets/js/fault_handling.js" charset="UTF-8"></script> <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js --> <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <section class="fault-handling-section"> <div class="row"> <!-- 사이즈 조절 class="col-xs-3 .col-md-2" --> <div class="col-xs-3 col-sm-3 col-md-1"></div> <!-- 사이즈 조절 class="col-xs-12 .col-sm-6 .col-md-8" --> <div class="col-xs-12 col-sm-10 col-md-10"> <div class="fault-handling-title"> <h3 class="text-left">장애 리스트 관리 시스템</h3> <div class="text-right">xxx님 ,반갑습니다.</div> </div> <div class="fault-handling-nav-tab"> <ul class="nav nav-pills nav-justified"> <li role="presentation" class="active"><a href="#">장애 등록/수정/승인</a></li> <li role="presentation" ><a href="index2.html">장애 통계 관리</a></li> </ul> </div> <div class="fault-handling-num-1"> <!-- start : num-1 --> <div class="row"> <form action="" name="search-form" class="form-horizontal" > <div class="col-xs-3 fault-group-3"> <label class="num-label"><span class="num-label-span">담당 팀</span> <select class="form-control form-group-fault-input-0"> <option></option> </select> </label> </div> <div class="col-xs-2 fault-group-2"> <label class="num-label"><span class="num-label-span">담당 자</span> <input class="form-control form-group-fault-input-1 "> </label> </div> <div class="col-xs-3 text-right fault-group-startdate date"> <label><span class="num-label-span">시작일</span> <input type="text" class="form-control date form-group-fault-input-2 datetimepicker1" > <span class="input-group-addon" > <span class="glyphicon glyphicon-calendar"></span> </span> </label> </div> <div class="col-xs-3 text-left fault-group-enddate date"> <label><span class="num-label-span">종료일</span> <input type="text" class="form-control date form-group-fault-input-2 datetimepicker1"> <span class="input-group-addon" > <span class="glyphicon glyphicon-calendar"></span> </span> </label> </div> <div class="col-xs-1 text-right fault-group-div" > <input type="submit" class="btn btn-primary fault-group-btn " value="검색" > </div> </form> </div> </div> <!-- end : num-1 --> <div class="fault-handling-num-2"> <!-- start : num-2 --> <div class="table-responsive"> <table class="table table-bordered table-hover text-center "> <thead> <tr class="active"> <th class="text-center">장애 번호</th> <th class="text-center">장애 등급</th> <th class="text-center">장애 제목</th> <th class="text-center">등록 일시</th> <th class="text-center">수정 일시</th> <th class="text-center">담당 팀</th> <th class="text-center">담당 자</th> <th class="text-center">승인</th> <th class="text-center">승인자</th> </tr> </thead> <tbody> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> <tr> <td>10101</td> <td>심각</td> <td>서버 오류</td> <td>2019-02-11 15:47</td> <td></td> <td>주문개발</td> <td>윤정현</td> <td>승인 필요</td> <td></td> </tr> </tbody> </table> <nav class="text-center"> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li><a href="#">‹</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">›</a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> </div> </div> <!-- end : num-2 --> <div class="row"> <!-- start : num-3 --> <div class="num3-1"></div> <div class="col-xs-10 col-sm-10 num3-2" > <form class="form-horizontal" > <div class="form-group"> <label for="" class="col-sm-2 control-label">장애 아이디</label> <div class="col-sm-3"> <input type="text" class="form-control" readonly value="1112" > </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">장애 제목</label> <div class="col-sm-10"> <input type="text" class="form-control" value="190312 [escrow] xxx로 인한 주문/클레임 문제"> </div> </div> <div class="form-group"> <div class="date"> <label for="" class="col-sm-2 control-label">발생 일시</label> <div class="col-sm-3"> <input type="text" class="form-control datetimepicker1" id="start-date"> </div> <div class="col-sm-1"> <span class="input-group-addon-1"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="date"> <label for="" class="col-sm-2 control-label text-left">복구 일시</label> <div class="col-sm-3"> <input type="text" class="form-control datetimepicker1" id="end-date" > </div> <div class="col-sm-1"> <span class="input-group-addon-2"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">담당자</label> <div class="col-sm-3"> <input type="text" class="form-control" readonly value="유정현" > </div> <div class="col-sm-1"></div> <label for="" class="col-sm-2 control-label">담당팀</label> <div class="col-sm-3"> <input type="text" class="form-control" readonly value="주문개발팀"> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">신고자</label> <div class="col-sm-3"> <input type="text" class="form-control" value="유정현" > </div> <div class="col-sm-1"></div> <label for="" class="col-sm-2 control-label">장애등급</label> <div class="col-sm-3"> <select class="form-control"> <option>보통</option> </select> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">신고 내역</label> <div class="col-sm-10"> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">장애원인</label> <div class="col-sm-10"> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">장애범위</label> <div class="col-sm-10"> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">조치내용</label> <div class="col-sm-10"> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">향후방안</label> <div class="col-sm-10"> <textarea class="form-control" rows="5"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-12 text-right"> <button class="btn btn-info" type="reset">초기화</button> <button class="btn btn-primary" type="button">확인</button> <button class="btn btn-warning" type="button" >수정</button> <button class="btn btn-success" type="button">승인</button> </div> </div> </form> </div> </div><!-- end : num-3 --> </div> </div> </section> <script> $(function(){ myDataTime(); }); function myDataTime(){ $(".form-group-fault-input-2").css("font-size", "10px"); $('.datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD a hh:mm:ss', locale: 'ko' }); $('.input-group-addon-1').on('click', function() { $('#start-date').data('DateTimePicker').toggle(); }); $('.input-group-addon-2').on('click', function() { $('#end-date').data('DateTimePicker').toggle(); }); } </script> </body> </html>
index2.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>장애 리스트 관리 시스템</title> <!-- CSS --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"> <!-- datepicker3 CSS --> <link href="assets/css/bootstrap-datetimepicker.css" rel="stylesheet"> <!-- custoem CSS --> <link rel="stylesheet" href="assets/css/fault_handling.css"> <!--http://canvasjs.com/ 유료 차트--> <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> <!-- js --> <script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- datepicker3 js --> <script src="assets/js/moment-with-locales.js" charset="utf-8"></script> <script src="assets/js/bootstrap-datetimepicker.js"></script> <script src="assets/js/fault_handling.js" charset="UTF-8"></script> <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js --> <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <section class="fault-handling-section"> <div class="row"> <!-- 사이즈 조절 class="col-xs-3 .col-md-2" --> <div class="col-xs-3 col-sm-3 col-md-1"></div> <!-- 사이즈 조절 class="col-xs-12 .col-sm-6 .col-md-8" --> <div class="col-xs-12 col-sm-10 col-md-10"> <div class="fault-handling-title"> <h3 class="text-left">장애 리스트 관리 시스템</h3> <div class="text-right">xxx님 ,반갑습니다.</div> </div> <div class="fault-handling-nav-tab"> <ul class="nav nav-pills nav-justified"> <li role="presentation" ><a href="index.html">장애 등록/수정/승인</a></li> <li role="presentation" class="active" ><a href="#">장애 통계 관리</a></li> </ul> </div> <div class="fault-handling-num-1"> <!-- start : num-1 --> <div class="row"> <form action="" name="search-form" class="form-horizontal" > <div class="col-xs-1"></div> <div class="col-xs-3 fault-group-startdate"> <label class="num-label"><span class="num-label-span">담당 그룹팀</span> <select class="form-control form-group-fault-input-2"> <option></option> </select> </label> </div> <div class="col-xs-3 text-left fault-group-startdate date"> <label><span class="num-label-span">시작일</span> <input type="text" class="form-control form-group-fault-input-2 datetimepicker1" > <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </label> </div> <div class="col-xs-3 text-left fault-group-enddate date"> <label><span class="num-label-span">종료일</span> <input type="text" class="form-control date form-group-fault-input-2 datetimepicker1" > <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </label> </div> <div class="col-xs-1 text-right fault-group-div" > <input type="submit" class="btn btn-primary fault-group-btn " value="검색" > </div> </form> </div> </div> <!-- end : num-1 --> <div class="fault-handling-num-5"> <!-- start : num-2 --> <div class="container-fluid"> <div class="row"> <!-- <div class="col-md-6"> <div id="pieChart" style="height: 360px; width: 100%;"> </div> </div>--> <div class="col-md-3"></div> <div class="col-md-6"> <div id="columnChart" style="height: 360px; width: 100%;"> </div> </div> <div class="col-md-3"></div> </div> </div> </div> <!-- end : num-2 --> <div class="fault-handling-num-3"> <!-- start : num-3 --> <div class="table-responsive"> <table class="table table-bordered table-hover text-center "> <thead> <tr class="active"> <th class="text-center">장애 번호</th> <th class="text-center">장애 등급</th> <th class="text-center">장애 이름</th> <th class="text-center">등록 일시</th> <th class="text-center">수정 일시</th> <th class="text-center">담당 팀</th> <th class="text-center">담당 자</th> </tr> </thead> <tbody> <tr> <td>10101</td> <td>보통</td> <td>주문실패</td> <td>2019-03-10 15:45</td> <td></td> <td>주문개발</td> <td>윤정현</td> </tr> <tr> <td>10103</td> <td>보통</td> <td>접속불가</td> <td>2019-03-11 14:22</td> <td>2019-03-13 14:22</td> <td>주문개발</td> <td>윤정현</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <nav class="text-center"> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li><a href="#">‹</a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">›</a></li> <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> </ul> </nav> </div> </div> <!-- end : num-3 --> </div> </div> </section> <script> /*var pieChartValues = [{ y: 39.16, exploded: true, indexLabel: "Hello", color: "#1f77b4" }, { y: 21.8, indexLabel: "Hi", color: "#ff7f0e" }, { y: 21.45, indexLabel: "pk", color: " #ffbb78" }, { y: 5.56, indexLabel: "one", color: "#d62728" }, { y: 5.38, indexLabel: "two", color: "#98df8a" }, { y: 3.73, indexLabel: "three", color: "#bcbd22" }, { y: 2.92, indexLabel: "four", color: "#f7b6d2" }]; renderPieChart(pieChartValues); function renderPieChart(values) { var chart = new CanvasJS.Chart("pieChart", { backgroundColor: "white", colorSet: "colorSet2", title: { text: "Pie Chart", fontFamily: "Verdana", fontSize: 25, fontWeight: "normal", }, animationEnabled: true, data: [{ indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "pie", showInLegend: false, toolTipContent: "<strong>#percent%</strong>", dataPoints: values }] }); chart.render(); }*/ var columnChartValues = [{ y: 686.04, label: "빌딩개발", color: "#1f77b4" }, { y: 381.84, label: "백엔드개발", color: "#ff7f0e" }, { y: 375.76, label: "정산개발", color: " #ffbb78" }, { y: 97.48, label: "주문", color: "#d62728" }/*, { y: 94.2, label: "five", color: "#98df8a" }, { y: 65.28, label: "Hi", color: "#bcbd22" }, { y: 51.2, label: "Hello", color: "#f7b6d2" } */ ]; renderColumnChart(columnChartValues); function renderColumnChart(values) { var chart = new CanvasJS.Chart("columnChart", { backgroundColor: "white", colorSet: "colorSet3", title: { text: "에스크로그룹 등급별 장애 관리 현황", fontFamily: "Verdana", fontSize: 25, fontWeight: "normal", }, animationEnabled: true, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme2", data: [ { indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "column", showInLegend: false, legendMarkerColor: "grey", dataPoints: values } ] }); chart.render(); } $(function(){ $(".canvasjs-chart-credit").html(""); myDataTime(); }); function myDataTime(){ $(".form-group-fault-input-2").css("font-size", "10px"); $('.datetimepicker1').datetimepicker({ format: 'YYYY-MM-DD a hh:mm:ss', locale: 'ko' }); } </script> </body> </html>
fault_handling.js
var mobilecheck = function () { var check = false; (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } $(function(){ mobileCss(); }); function mobileCss(){ if(mobilecheck()){ $('.fault-group-2').attr('class', 'col-xs-12 fault-group-2'); $('.fault-group-3').attr('class', 'col-xs-12 fault-group-3'); $('.fault-group-startdate').attr('class', 'col-xs-12 text-left fault-group-startdate'); $('.fault-group-enddate').attr('class', 'col-xs-12 text-left fault-group-enddate'); $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div'); $('.form-group-fault-input-0').css('width', '80%'); $('.form-group-fault-input-1').css('width', '80%'); $('.form-group-fault-input-2').css('width', '70%'); $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div'); $('.fault-group-btn').css('width', '90%'); //모바일로 접속시 }else{ //PC로 접속시 } } (function($) { function mediaSize() { if (window.matchMedia('(max-width: 768px)').matches) { $('.fault-group-2').attr('class', 'col-xs-12 fault-group-2'); $('.fault-group-3').attr('class', 'col-xs-12 fault-group-3'); $('.fault-group-startdate').attr('class', 'col-xs-12 text-left fault-group-startdate'); $('.fault-group-enddate').attr('class', 'col-xs-12 text-left fault-group-enddate'); $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div'); $('.form-group-fault-input-0').css('width', '80%'); $('.form-group-fault-input-1').css('width', '80%'); $('.form-group-fault-input-2').css('width', '70%'); $('.fault-group-div').attr('class', 'col-xs-12 text-center fault-group-div'); $('.fault-group-btn').css('width', '90%'); } else { $('.fault-group-2').attr('class', 'col-xs-2 fault-group-2'); $('.fault-group-3').attr('class', 'col-xs-3 fault-group-3'); $('.fault-group-startdate').attr('class', 'col-xs-3 text-left fault-group-startdate'); $('.fault-group-enddate').attr('class', 'col-xs-3 text-left fault-group-enddate'); $('.fault-group-div').attr('class', 'col-xs-1 text-center fault-group-div'); $('.form-group-fault-input-0').css('width', '55%'); $('.form-group-fault-input-1').css('width', '60%'); $('.form-group-fault-input-2').css('width', '60%'); $('.fault-group-btn').css('width', ''); } }; mediaSize(); window.addEventListener('resize', mediaSize, false); })(jQuery);
댓글 ( 4)
댓글 남기기