2016-10-21 2 views
0

ionic 프레임 워크를 사용하여 모바일 응용 프로그램을 만들려고합니다. Angularjs와 HTML을 사용했습니다. 또한 AJAX를 사용하여 웹 서비스를 호출했습니다. 코딩 및 안드로이드 개발에 익숙하지 않습니다. 화면 크기에 따라 출력 크기가 조정되는 출력 응답을 만드는 데 도움이 필요했습니다. 어떻게 해결할 수 있습니까? 도움을 청하면 도움이됩니다. 다음은 제 코드입니다. ,화면에 맞게 데이터를 출력합니다.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

나는 아래의 코드에서 같은 추가이 당신을 hepls 희망 : 내가없는 볼 수 있습니다

function myCall() { 
 
    var value1 = document.getElementById('Text1').value; 
 
    var value2 = document.getElementById('Text2').value; 
 
    var result = ""; 
 
    var request = $.ajax({ 
 
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?", 
 
    data: { UserID: value1, Password: value2 }, 
 
    type: "GET", 
 
    dataType: "JSON" 
 
    }); 
 

 
    request.done(function (msg) { 
 
    result = JSON.stringify(msg); 
 
    $.each(msg, function (i, val) { 
 
     if (val.Result == "Login successful") { 
 
     window.location = ("http://192.168.0.103/PdfReport.htm"); 
 
     } 
 
     else { 
 
     window.location = ("http://192.168.0.103/Login.htm"); 
 
     alert("Login failed"); 
 
     } 
 
    }); 
 
    }); 
 
    request.fail(function (jqXHR, textStatus) { 
 
    alert("Request failed: " + textStatus); 
 

 
    }); 
 
}
form { 
 
    border: 3px solid #f1f1f1; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
} 
 

 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 
body h2{ 
 
    color:darkblue; 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .cancelbtn { 
 
    width: 100%; 
 
    } 
 
}
<script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<form > 
 
    <div class="imgcontainer"> 
 
    &nbsp;</div> 
 
    <div class="container"> 
 
    <label><b>Username</b></label> 
 
    <input id="Text1" type="text"/> 
 
    <label><b>Password</b></label> 
 
    <input id="Text2" type="text"/> 
 
    <button type="submit" value="submit" onclick="myCall()">login</button> 
 

 
    <input type="checkbox" checked="checked"/> Remember me 
 
    </div>   
 
    <div class="container" style="background-color:#f1f1f1"> 
 
    <button type="button" class="cancelbtn">Cancel</button> 
 
    <span class="psw">Forgot <a href="#">password?</a></span> 
 

 
    </div> 
 
    <div id="mybox"> 
 
    </div> 
 
</form>

+0

위가 각도와 상관없는 코드, 그것은 주로 jQuery의. 귀하의 질문에 대한 현재 시청률을 얻으려면 ** jQuery ** 및 ** ionic **으로 정확하게 태그를 지정하십시오. – vas

답변

0

한 가지 뷰포트입니다.

function myCall() { 
 
    var value1 = document.getElementById('Text1').value; 
 
    var value2 = document.getElementById('Text2').value; 
 
    var result = ""; 
 
    var request = $.ajax({ 
 
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?", 
 
    data: { UserID: value1, Password: value2 }, 
 
    type: "GET", 
 
    dataType: "JSON" 
 
    }); 
 

 
    request.done(function (msg) { 
 
    result = JSON.stringify(msg); 
 
    $.each(msg, function (i, val) { 
 
     if (val.Result == "Login successful") { 
 
     window.location = ("http://192.168.0.103/PdfReport.htm"); 
 
     } 
 
     else { 
 
     window.location = ("http://192.168.0.103/Login.htm"); 
 
     alert("Login failed"); 
 
     } 
 
    }); 
 
    }); 
 
    request.fail(function (jqXHR, textStatus) { 
 
    alert("Request failed: " + textStatus); 
 

 
    }); 
 
}
form { 
 
    border: 3px solid #f1f1f1; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
} 
 

 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 
body h2{ 
 
    color:darkblue; 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .cancelbtn { 
 
    width: 100%; 
 
    } 
 
}
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <form > 
 
     <div class="imgcontainer"> 
 
     &nbsp;</div> 
 
     <div class="container"> 
 
     <label><b>Username</b></label> 
 
     <input id="Text1" type="text"/> 
 
     <label><b>Password</b></label> 
 
     <input id="Text2" type="text"/> 
 
     <button type="submit" value="submit" onclick="myCall()">login</button> 
 

 
     <input type="checkbox" checked="checked"/> Remember me 
 
     </div>   
 
     <div class="container" style="background-color:#f1f1f1"> 
 
     <button type="button" class="cancelbtn">Cancel</button> 
 
     <span class="psw">Forgot <a href="#">password?</a></span> 
 

 
     </div> 
 
     <div id="mybox"> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

관련 문제